Kuidas optimeerida CSS-i edastamist WordPressis

Kui olete siin, siis tõenäoliselt saite selle teate Google’i PageSpeed ​​Insightsi testis:

Ehkki kõigi renderdust blokeerivate failide eemaldamine võib olla keeruline, pole see õigete tööriistadega nii keeruline.

Selles juhendis näitan teile kolme võimalust saidi kiirendamiseks optimeeritud CSS-i edastamisega. Siin on valikud nii WordPressi uutele uudistele kui ka arendajatele.

Alustame ülevalt – mida täpselt tähendab CSS-i edastamise optimeerimine oma WordPressi saidil?

Mida tähendab "CSS-i edastamise optimeerimine"?

Lubage mul kõigepealt teha selgeks, mida ma silmas pean.

CSS-faile kasutatakse veebilehtede stiili kujundamiseks. Iga WordPressi teema laadib faili style.css ja tõenäoliselt on teil pistikprogrammide poolt lisatud käputäis täiendavaid stiililehti (CSS-faile). Näiteks kui teil on pistikprogramm, mis lisab uue vidina, peab see selle vidina stiilimiseks laadima teise laaditabeli.

Kõik CSS-failid laaditakse enne teie saidi renderdamist.

See tähendab, et külastajad näevad seni tühja valget ekraani. Nüüd on see asi…

Suuremat osa laaditud CSS-ist pole vaja mis tahes lehel, millel külastaja on, ja veelgi vähem on seda vaja selleks, mida nad kohe näevad. Näiteks miks panna nad jaluse stiilide laadimisel ootama? Tõenäoliselt kulub vähemalt paar sekundit, enne kui nad seda näevad (kui nad seda kunagi näevad).

CSS-faile edasi lükates või asünkroonselt laadides saame lubada saidil kuvada külastaja brauseris enne laaditabelite laadimise lõpetamist.

Selles juhendis jagan kolme erinevat lähenemisviisi stiilitabelite edasilükkamiseks ja CSS-i edastamise optimeerimiseks.

Optimeeritud kriitilised renderdusrajad tegevuses

Kui külastate konkureerivate teemade avalehte, hoidke saidi laadimise ajal silma peal brauseri vahekaardi laadimisnäidikul. Märkate, et pärast seda, kui sait on nähtav ja näib olevat laaditud, jääb laadimisindikaator veel hetke pöörlema.

See on näide sellest, kuidas optimeeritud CSS-i edastamine praktikas välja näeb.

Kui soovite näha väga optimeeritud kriitilise renderdustee näidet, külastage Amazoni. Kogu saiti ei laadita korraga. Selle asemel näete mõne sekundi jooksul tänu hoolikalt optimeeritud renderdusteele erinevaid elemente kogu lehel.

1 WP rakett

Kasutan siin Compete Themes’i pistikprogrammi WP Rocket ja soovitan seda enne kõiki muid lahendusi kriitilise renderdustee optimeerimiseks.

CSS-i edastamise optimeerimine WP Rocketiga ei saa tõesti olla lihtsam. Menüüs Failide optimeerimine on selle funktsiooni sisselülitamiseks märkeruut.

Kui see on märgitud, lükkab WP Rocket automaatselt kõik teie laaditabelid edasi, nii et neid ei laadita enne, kui sait külastaja brauseris kuvatakse. Kui nüüd kogu CSS edasi lükata, näeks teie sait kuni selle laadimiseni kohutav välja ja WP Rocketi arendajad on selle pistikprogrammiga elegantselt lahendanud.

Kui lülitate selle valiku sisse, leiab WP Rocket automaatselt CSS-i, mis on vajalik teie saidi nende osade kujundamiseks, mida külastajad teie saidi laadimise hetkel näevad, ja see kood lisatakse dokumenti.

Teisisõnu kuvatakse teie sait brauseris kiiremini ja näib olevat täielikult laaditud, samal ajal kui edasilükatud CSS laaditakse järgmise sekundi või kahe jooksul.

Minu arvates on see vaieldamatult parim lahendus CSS-i edastamise optimeerimiseks WordPressiga.

WP Rocket on esmaklassiline pistikprogramm, kuid kui kiiremad laadimisajad teenivad teie saidilt rohkem tulu, kaaluksin kindlasti selle oma saidile hankimist. Mul on palju üksikasjalikum ülevaade WP Rocketist, mida saate lugeda, kui soovite rohkem teada saada. Muidu saate nende saiti vaadata siit.

2 Automatiseeri

Teine võimalus, mida ma soovitaksin, on pistikprogramm Autoptimize.

See funktsioonirikas jõudlusplugin pakub mõningaid lähenemisviise CSS-i edastamise optimeerimiseks. Lihtsaim võimalus on lihtsalt lisada kogu CSS. See võtab kogu teie laadilehtedelt leitud CSS-i ja lisab selle otse lehe dokumenti, nii et laaditabeleid ei laadita.

Selle valiku leidmiseks peate klõpsama ülaosas nuppu Kuva täpsemad sätted.

Seejärel näete valikut lisada kogu CSS.

Kuigi see valik võib jõudlust parandada, võib lehedokumendile liiga palju CSS-i lisatud aeglustada teie saiti. Võib-olla tasub katsetada.

Vastasel juhul on mõistlik lubada selle asemel sisseehitatud ja CSS-i edasilükkamine. See lükkab kõik laaditabelid edasi ja lisab ainult kriitilise CSS-i. Siiski ei leia see automaatselt teie jaoks olulist CSS-i, nagu WP Rocket.

Niisiis, kuidas saate oma saidi kriitilise CSS-i hankida? Isegi kogenud WP-arendaja jaoks võib see olla omamoodi peamurdja.

Kuigi ma ei ole selle tööriista töökindluse osas ise testinud, oleks see tasuta kriitilise tee CSS-i generaatori tööriist elujõuline lähenemisviis. Sisestage oma saidi URL ja see tagastab CSS-i, mille peate kindlasti laadima.

Seejärel saate selle koodi kopeerida ja kleepida automaatse optimeerimise CSS-i kriitilise tee kasti.

Selle lähenemisviisi kasutamisel peate võib-olla lisama oma saidi erinevatele lehtedele täiendava CSS-i ja ühtse stiili tagamiseks peate võib-olla väga hästi tundma oma teema CSS-i.

Teine lähenemine

Seal on pistikprogramm nimega Autoptimizekritikacss.com power-up. See on üsna suutäie, kuid see lisaplugin võimaldab teil automaatselt genereerida saidi kriitiline CSS kasutades criticalcss.com teenust.

Selle valiku kasutamiseks peate tasulise konto jaoks registreeruma CriticalCSS-iga.

3 Kiirustage

See viimane valik on väga kiire ja WordPressi arendajal on seda lihtne rakendada.

Speed ​​Up on kerge pistikprogramm, mis võimaldab teil mittekriitilisi laaditabeleid edasi lükata.

Kuigi see ei optimeeri teie CSS-i edastamist täielikult, aitab see siiski.

Oletame, et teie teema lisab ühe laaditabeli ja seejärel on pistikprogrammide poolt lisatud veel viis laaditabelit. Kui enne saidi kuvamist on oluline laadida ainult teemalaaditabel, võite ülejäänud viis edasi lükata.

Speed ​​Up pakub lihtsat filtrit, mille saate lisada alamteema failile functions.php (või pistikprogrammile), et soovitud stiilitabelid edasi lükata. Kõik, mida vajate, on iga laaditava laaditabeli käepidemed. Siit leiate mõned lihtsad funktsioonid kõigi teie saidil registreeritud stiilitabelite käepidemete väljastamiseks.

Jällegi on see arendaja jaoks kiire ja lihtne, kuid ma ei soovita seda lahendust, kui te koodi ei kirjuta.

Järeldus

Loodan, et õppisite sellest postitusest midagi WordPressi jõudluse optimeerimise kohta.

Kuigi kõik kolm ülaltoodud lahendust võivad hästi toimida, pean ma WP Rocketi pistikprogrammile viimase hüüdlause andma. Nii ajaveebi kui ka WordPressi teema arendajana on minu arvates nii lihtne ja valutu töötada.

Kui soovite oma saidi kiirendamiseks veel näpunäiteid, võib teile meeldida see pildi optimeerimise juhend või minu WP Engine ülevaade, millele Compete Themes tugineb kiirete laadimisaegade jaoks.