Kuidas optimeerida CSS-i edastamist WordPressis vähese vaevaga
CSS võib parandada teie veebisaidi üldist välimust ning seda on lihtne kasutada, redigeerida ja hooldada. Ainus puudus on võimalus aeglustada lehe laadimise kiirust. Seetõttu näitab see meie WpDataTablesi meeskonna loodud artikkel teile, kuidas optimeerida CSS-i edastamist WordPressis.
Kui CSS-i ei edastata hästi, peab brauser enne teie lehe renderdamise lõpetamist andmeid töötlema ja alla laadima. See tähendab, et külastajad kogevad teie lehe nägemisega viivitust ja võivad sellel maha klõpsata, kuna see ei näi laadivat. Sellest tulenevalt on CSS-i edastamise optimeerimise tähtsus, nii et lugege edasi, et saada teada, kuidas vältida lõkse, mis võivad teie veebilehte aeglustada.
Kõik CSS-i kohaletoimetamise kohta
Põhimõtteliselt muudab CSS, Cascading Style Sheet, veebisaidid atraktiivseks ja ilma nendeta jääksid veebisaidid endiselt 90ndatesse.
Veebilehti, sealhulgas WordPressi veebilehti, kujundab CSS. Iga WordPressi teema kasutab stiilse välimuse loomiseks faili style.cc. Pluginate lisamine lisab rohkem stiililehti, näiteks kui laadite alla vidina plugina, lisab see soovitud välimuse loomiseks täiendava CSS-faili (laaditabeli).
CSS-skriptid laaditakse enne, kui teie sait on nähtav, mis tähendab, et teie brauser ei näita sisu enne, kui antud CSS-teave on töödeldud. Selle tulemuseks on renderduse blokeerimine, mis ilmneb siis, kui brauser laadib enne saidi näitamist kõik CSS-skriptid.
CSS-i saab WordPressis edastamiseks kasutada mitmel viisil, paljude erinevate seadistustega.
Olenemata sellest, kuidas olete oma veebilehe seadistanud, võib CSS teie saiti kiiremini renderdada.
Renderdust blokeeriv JavaScript ja CSS – mis see on?
Meie kõrgtehnoloogilises ühiskonnas oodatakse kiireid laadimissaite ja see on kõrgetasemelise SEO jaoks ülioluline. Google’i PageSpeed Insights aitab teil mõista saidi laadimiskiirust. Vahel kuvatakse tööriista kasutamisel hoiatus – „Eliminate renderdust blokeeriv JavaScript ja CSS lehe ülaosa sisus", kuid siin on sellele probleemile lahendus.
HTML-i renderdamine on vajalik enne, kui brauser saab mis tahes veebilehte kuvada. Seda tehes puutub ta kokku skriptide ja stiilitabelitega ning peab selle faili taotlemiseks ja allalaadimiseks peatuma. Seejärel käivitab see selle ja jätkab HTML-i läbimist. Enamik WordPressi teemasid ja pistikprogramme kasutavad paljusid JavaScripti ja/või CSS-faile, mistõttu võib teie saidi ühe lehe renderdamine kaua aega võtta.
See takistab teie saidi külastajatel veebilehtede teabe kiiret nägemist ja asja veelgi hullemaks teeb see, et neid skripte pole vaja kohe laadida.
Neid mittevajalikke faile nimetatakse renderdust blokeerivateks CSS-i ja JavaScriptideks. Jätkake lugemist, et teada saada, mis need on ja kuidas need oma WordPressi saidilt eemaldada.
Kasutage Google Pagespeed Insightsi renderdust blokeeriva CSS-i ja JavaScripti avastamiseks
Aeglaselt laadivad brauserid üritavad tavaliselt töödelda märkimisväärset hulka CSS-koodi ega saa seetõttu lehte renderdada, kuid mitte iga CSS-i ressurss ei blokeeri renderdamist.
Veebisaidid on tühjad või ainult osaliselt nähtavad, kui CSS laaditi valesti või kui CSS pole optimeeritud, mis võib põhjustada valesid fonte või paigutusi.
CSS-i edastamise optimeerimiseks on oluline mõista, millised elemendid on vajalikud ja millised mitte.
Renderduse blokeerimise alustamiseks testige esmalt oma saidi kiirust teenusega Google PageSpeed Insights.
Tehke järgmist.
- Minge Google PageSpeed Insightsi lehele
- Kopeerige ja kleepige meie saidi URL vastavale väljale
- Vajutage "Analüüsi"
- Selle tulemuseks on aruanne. Pange tähele skripte, mis kuvatakse sõnadega "Eliminate renderdust blokeeriv JavaScript ja CSS"
Tavaliselt on need CSS-id teie saidi jaoks üliolulised:
- Lehekülje ülaosas stiilid
- Teemad
- Tausta värv
- Muud, olenevalt saidi tüübist
Need CSS-id on tavaliselt vähem olulised:
- Voldi all CSS
- CSS, mis on suunatud teistele seadmetele
Renderdust blokeerivate skriptide vähendamine
Saate minimeerida oma saidil olevate renderdust blokeerivate skriptide arvu, tehes järgmist.
- CSS-i ja JavaScripti hulga vähendamine. Saate eemaldada kõik mittevajalikud tühikud ja kommentaarid
- CSS-i ja JavaScripti kombineerimine. Võtke erinevad css- ja js-failid ning lisage need kokku, mille tulemuseks on vähem faile.
- JavaScripti laadimise edasilükkamine. Asünkroonse laadimise abil saate muuta need viimaseks laadimiseks pärast seda, kui kõik muu on laaditud.
WordPress kasutab esiotsa skriptide registreerimiseks ühte kombineeritud filtrit, nii et näete sissetulevaid CSS- või JavaScript-faile. Te ei pruugi teada, mida otsida, seega on pistikprogrammi kasutamine kasulik.
l CSS-i pole vaja kõigil lehtedel kogu aeg. Kuid see on olemas põhjusega ja te kasutate seda kõik mingil etapil, kus on vaja kriitilist renderdamise teed.
CSS-i erinevaid osi võidakse nõuda lehel Kontakteerumine ja lehel Meie pakutavad teenused. Kui keegi laadib meie pakutavate teenuste lehe, pole CSS-i osi, mis on mõeldud ainult lehe Kontaktandmed jaoks, sel ajal vaja, kuid CSS-i laaditakse endiselt, kuna veebihaldur vajab veebilehe renderdamiseks kõigi CSS-failide laadimist.
Seetõttu vajab veebisait kogu CSS-i, kuid mitte kogu CSS-i iga üksiku lehe jaoks. Seetõttu on kriitiline CSS igal lehel ja teie saidi iga kasutaja jaoks erinev.
CSS ja JavaScript, mis blokeerivad lehe kohal renderdamist, on tõsine probleem ja need tuleb võimalikult kiiresti parandada.
On ebareaalne eeldada, et teie sait saab 100/100, seega püüdke saavutada head tulemust, mis annab teie külastajatele kiire lehe laadimise.
Ärge eemaldage hea kasutuskogemuse jaoks vajalikke skripte; need on olulisemad kui püüdes saavutada kõrgemat tulemust.
Kriitilise renderdustee optimeerimine WordPressis
Kriitiline renderdamise tee tähistab järjekorda, milles brauser teie lehe renderdamiseks ülesandeid täidab, st järjestust, milles see CSS-i, HTML-i ja JavaScripti alla laadib ja töötleb ning neid brauseris kuvab.
Voldi kohal olev sisu on oluline, kuna see on esimene osa, mida kasutaja näeb. Lehe all oleva sisu laadimiseks on rohkem aega, kuna kasutaja peab selle nägemiseks kerima.
Voldi kohal oleva osa võimalikult kiireks laadimiseks peate:
- Looge HTML nii, et see eelistaks lehe ülaosade laadimist
- Minimeerige CSS-i, JS-i ja HTML-i kasutatavad andmed
Rohkem selgitusi leiate Google’i PageSpeedi juhendist. Mõnikord on ATF-i laadimiseks vaja rohkem andmeid kui ummikuaken (14,6 kb). Sel juhul tuleb serverist brauserisse ja tagasi teha rohkem võrgureise. Kõrge latentsusega mobiilsidevõrgud avastavad, et see takistab lehe laadimist.
DOM-i ehitab brauser ükshaaval, mis võib vähendada ATF-i renderdamiseks kuluvat aega. Struktureerige HTML-i nii, et lehe ülaosa sisu laaditakse kõigepealt ja ülejäänud leht alles pärast seda.
Optimeerimisprotsess nõuab pidevat täiustamist, jälgimist ja mõõtmist.
Kuigi CSS-i saab elegantsete veebilehtede loomiseks kasutada mitmel viisil, on kõige olulisem selle kiire laadimine. Lehtede kiiremaks laadimiseks puhastage kood ja järgige ülaltoodud samme.
Kui teile meeldis lugeda seda artiklit, kuidas optimeerida CSS-i edastamist WordPressis, peaksite lugema seda artiklit, kuidas lisada WordPressi metasilte ilma pistikprogrammita.
Kirjutasime ka mõnest seotud teemast, nagu pdf-i manustamine WordPressi, exceli manustamine HTML -i, esiletoodud pildi peitmine WordPressi postituses, kuidas teha kindlaks, kas sait on WordPress, kuidas WordPressi cPanelist desinstallida. ja kuidas luua veebisaiti nagu Amazon.