Ja jūsu WordPress vietnē tiek izmantots maksas WordPress motīvs vai populārs motīvs no oficiālā WordPress motīvu krātuves, iespējams, ka motīvs tiks izstrādāts dažādiem lietošanas gadījumiem. Un jūs, iespējams, izmantojat tikai nelielu visu motīvā pieejamo funkciju kopumu.
Tādā gadījumā jūsu vietnē tiek ielādēts daudz neizmantotu CSS, kas nav nepieciešams vietnes lapu stila veidošanai. Piemēram, jūsu izmantotajam WordPress motīvam var būt stili arī WooCommerce lapām, taču, ja savā WordPress vietnē izmantojat tikai emuāru, tad jūs neizmantojat CSS, kas iekļauts jūsu vietnes WooCommerce lapām un tādējādi tiek rādīts neizmantots. CSS lietotājiem.
Ja esat pārbaudījis savu vietni, izmantojot Google Pagespeed rīku, iespējams, jau zināt, ka jūsu vietnei ir neizmantotas CSS problēmas. Šajā rokasgrāmatā mēs parādīsim, kā vispirms pārbaudīt neizmantotu CSS, pēc tam izmantojiet bezmaksas rīku, lai no savas WordPress vietnes noņemtu neizmantoto CSS.
Kā pārbaudīt neizmantoto CSS
Google Chrome izstrādātāju rīkiem (to redzat, konteksta izvēlnē noklikšķinot uz opcijas Pārbaudīt) cilnē Avoti ir pārklājuma funkcija. Varat izmantot opciju Pārklājums, lai atrastu neizmantotos CSS un JS, ko ielādē jūsu vietne.
- Atveriet savu vietni pārlūkprogrammā Chrome darbvirsmā.
- Ar peles labo pogu noklikšķiniet uz tukšas baltās vietas savā vietnē un atlasiet Pārbaudīt no konteksta izvēlnes.
- Noklikšķiniet uz Avoti cilni, nospiediet Ctrl+Shift+P lai atvērtu komandu logu, pēc tam ierakstiet pārklājums un atlasiet Sāciet instrumentu pārklājumu un atkārtoti ielādējiet lapu no pieejamajām komandām.
- Cilnē Pārklājums noklikšķiniet uz URL filtrs lauku un ievadiet šeit savas vietnes saknes domēnu, lai tiktu rādīti tikai iekšējie CSS/JS faili.
└ Pārbaudiet Neizmantotie baiti kolonnu, lai redzētu, cik procentu no jūsu motīva CSS/JS failā tiek ielādēti dati.
- Noklikšķiniet uz CSS faila, lai skatītu neizmantoto CSS (atzīmēts ar sarkanām joslām), ko ielādēja jūsu vietne. CSS, kas tiek izmantots pašreizējā lapā, tiks parādīts ar zaļām joslām.
Kad esat analizējis visu neizmantoto CSS, kas tiek ielādēts jūsu vietnē, ir pienācis laiks to noņemt. Ir pieejami vairāki bezmaksas rīki, lai no tīmekļa lapām noņemtu neizmantoto CSS. Zemāk ir viens no populārākajiem rīkiem, ko esmu pārbaudījis un izmantojis savos projektos.
Izmantojiet PurifyCSS Online, lai noņemtu neizmantoto CSS
Parasti jūs varat atrast spraudni gandrīz visam pakalpojumā WordPress. Taču, lai noņemtu neizmantoto CSS, diemžēl nav pieejams neviens spraudnis. Tāpēc mēs izmantosim manuālus, ar WordPress nesaistītus rīkus, lai no jūsu vietnes noņemtu neizmantoto CSS.
PurifyCSS ir visvairāk draudzīgs rīks, kas nav izstrādāts varat atrast, kā rīkoties ar neizmantotu CSS. Rīkam ir vienkārša lietotāja saskarne, kas ļauj lietotājiem norādīt vietnes URL VAI HTML un CSS kodu. WordPress mēs izmantosim URL opciju un nodrošināsim saites uz visu veidu lapām jūsu vietnē, lai rīks varētu iegūt CSS no visiem un optimizēt neizmantoto CSS.
Šeit ir īss to lapu saraksts, kuras jāievieto rīkā:
- Mājas lapas URL
- Vairāki ziņu lapu URL no katras jūsu vietnes kategorijas
└ Tas ir paredzēts, lai nodrošinātu, ka CSS ir iekļauts visiem ziņu elementiem.
- Kontaktinformācija, Par, Privātums un visa veida dažādas lapas, kas var būt jūsu vietnē.
- Arhīva lapa, Meklēšanas lapa, Autoru lapas
- Pielāgota ziņu veida lapas
Karsts padoms: Izveidojiet "funkciju" ziņu/lapu ar visiem motīva elementiem, kurus izmantojat vai varētu izmantot nākotnē, piemēram, tabulu, attēlu galeriju, kodu, iepriekš sakārtotus sarakstus, nesakārtotus sarakstus, veidlapas, cilnes, akordeonus, Gūtenberga blokus, ko parasti izmantojat. utt.
Izmantojiet šo funkciju publicēšanas URL PurifyCSS Online rīkā, lai nodrošinātu, ka parasti izmantoto elementu CSS ir iekļauta.
Nospiediet uz Notīriet CSS pogu, kad PurifyCSS Online rīkā esat pievienojis visus atbilstošos URL veidus no savas vietnes.
Kopējiet rīka ģenerēto jauno CSS un izmantojiet to savā vietnē. Pārliecinies, ka tu dublējiet sākotnējo style.css un citus CSS failus savā motīvā, pirms aizstājat jauno CSS, ko ģenerēja PurifyCSS.
Padoms: Varat izmantot iebūvēto WordPress motīvu redaktoru, lai rediģētu motīva CSS failus, vai arī varat izmantot FTP/SFTP programmu, lai izveidotu savienojumu ar serveri un ērti rediģētu failus, izmantojot Notepad redaktoru.