Når det kommer til hastigheden på dit websted, er det vigtigt at tænke på hastighed som en nødvendig funktion, ikke en luksus, og at behandle det i overensstemmelse hermed. Der er mange ting, der går ind i ligningen, som afgør, hvor hurtigt besøgende se indholdet, når de besøger dit websted. Nogle af disse ting, kan du ikke styre: hastigheden af ​​deres internetforbindelse, deres geografiske placering, netværksbelastning og så videre. Der er dog andre ting, som du kan og bør kontrollere.

Et værktøj, du kan bruge til at identificere hastighedsreducerende problemer, der er under din kontrol, er Google PageSpeed ​​Insights. Du har sikkert brugt PageSpeed ​​Insights før (hvis du ikke har det, er dette dit tegn til at  gøre det, før du læser resten af ​​denne artikel). Det er gratis og afgrænser problemer, der sænker leveringen af ​​dine websteder, som f.eks. blokerende JavaScript og CSS.

Fælles problem: Renderings-blokerende JavaScript og CSS

Der er ti hastighedsregler, der bruges til at analysere websteder, der kører gennem PageSpeed ​​Insights. To af disse regler har at gøre med JavaScript- og CSS-ressourcer, der blokerer det overordnede indhold. Undgå en af ​​disse to regler – og mange, mange steder fejler en eller begge dele – og du vil se en “Bør fixes” besked, der giver dig besked om, at du skal: Eliminér blokerende JavaScript og CSS i det overordnede indhold.

Eliminer render-blokerende JavaScript og CSS i øverste del af indholdet

Eliminer render-blokerende JavaScript og CSS i øverste del af indholdet

Hvad betyder det egentlig? Her er en mere dybdegående forklaring.

Når en browser indlæser en webside, forhindrer JavaScript og CSS ressourcer normalt websiden fra at blive vist, indtil de downloades og behandles af browseren. I nogle tilfælde er det en god ting. F.eks. renderes ren HTML, før nogen CSS hentes, og du får et flash af uformet indhold (FOUC), som sandsynligvis er en værre oplevelse for dine brugere end at vente et par hundrede sekund for at indholdet skal vises.

Nogle ressourcer skal downloades og behandles, før der vises noget. Men mange CSS- og JavaScript-ressourcer er betingede – det er kun anvendt i specifikke tilfælde – eller er simpelthen ikke nødvendigt for at lave det overordnede indhold. For at producere den hurtigste mulige oplevelse for dine brugere, bør du forsøge at fjerne eventuelle renderings-blokerende ressourcer, der ikke er nødvendige for at vise det overordnede indhold.

Jeg vil gerne være sikker på et punkt: Det kan være for meget arbejde eller bare at være umuligt at fjerne alle renderings-blokerings-ressourcer. At gøre det kan endda producere den frygtede FOUC (op) jeg nævnte for et øjeblik siden. Bare husk at det ikke er vores mål at opnå en perfekt PageSpeed-score. I stedet er vores mål at levere den bedst mulige brugeroplevelse, og det betyder en hjemmeside, der laster så hurtigt som muligt uden at blinke ikke-stylet indhold.

Med andre ord skal du bruge PageSpeed ​​Insights til at identificere renderings-blokerende filer, som du kan forsøge at fjerne, men lad UX være din overordnede retningslinje. Du kan også se denne meddelelse vist i andre hastighedsprøvningsværktøjer. For eksempel vises i GTmetrix som “udskyder nedbrydelsen af JavaScript.

Sådan fjerner du blokerende JavaScript og CSS

Der er et plugin til det, ik? Nå, men du skal forstå, hvad der foregår, før du begynder at tilkoble plugins. Mange plugins er meget konfigurerbare, og ved at vide, hvordan renderings-blokerende ressourcer elimineres, vil det hjælpe dig med at arbejde mere effektivt med det plugin du selv har valgt.

Ryd JS fra den kritiske renderingsti

Lad os først snakke JavaScript. Den grundlæggende ide er at flytte unødvendige JavaScript og jQuery-ressourcer ud af den kritiske gengivelsessti. Dette gøres typisk ved at tilføje enten defer eller async attributten til script HTML elementer, der kalder JavaScript ressourcer.

defer og async attributter er ikke skabt lige, og forskellen kan være vigtig at forstå.

  • Async-attributten fortæller browseren at begynde at downloade ressourcen med det samme, uden at bremse HTML-analysen. Når ressourcen er tilgængelig, er HTML-analysen pauset, så ressourcen kan indlæses.
  • Defer-attributten fortæller, at browseren holder af med at hente ressourcen, indtil HTML-analysen er afsluttet. Når browseren er færdig med HIMLen, downloades og returneres alle udskudte scripts i den rækkefølge, de vises i dokumentet.

Den store forskel mellem de to er, at udsættelsen sikrer, at scripts downloades og anvendes på websiden i den rækkefølge, de vises i HTML-dokumentet, mens async ikke gør det. Resultatet er, at hvis async bruges på alle JavaScript-ressourcer, kan det ofte bryde ressourcer, som er afhængige af ressourcer, der vises tidligere i dokumentet. Det mest almindelige problem async producerer er brudt jQuery ressourcer, der forsøger at indlæse, før jquery.js er blevet tilføjet til dokumentet.

Optimer levering af CSS ressourcer

Renderings-blokerende CSS kan også være svært, hvis ikke umuligt at eliminere helt. Det ideelle arrangement er at:

  • dentificer de stilarter, der kræves for at lave det overordnede indhold og levere de stilarter inline med HTMLen.
  • Brug medietattributten på linkelementerne, der trækker i CSS-filer til at identificere CSS-ressourcer, der er betingede, det er kun nødvendigt for bestemte enheder eller situationer.
  • Resterende CSS-ressourcer skal læses asynkront, et træk, der typisk gøres ved at tilføje dem med udskudt eller asynkront JavaScript. For at være ærlige, kommer vi virkelig på prøve her, gør vi ikke? Dette er helt sikkert front-end ingeniør territorium. Det er fantastisk, hvis du er en front-end ingeniør, men de fleste af os er ikke. Den gode nyhed er, at dette er en artikel om WordPress, og du kan eliminere eller i det mindste reducere antallet af render-blokerende JS- og CSS-ressourcer, der påvirker dit websted med det rigtige plugin(s).

Plugins for at reducere renderings-blokerende JavaScript og CSS

Som forberedelse til denne artikel arbejdede jeg mig gennem et dusin populære WordPress-plugins designet til at reducere og eliminere renderings-blokerende JavaScript- og CSS-ressourcer og satte mig på fem, der gav en målbar reduktion.

Jeg skal også nævne, at jeg ikke brugte nogen caching-plugins under denne proces. Mit testwebsted blev oprettet på en Kinsta-plan, der leveres med indbygget caching på serverniveau. Hvis du ikke er en Kinsta-kunde, vil det være med til at forbedre dit websteds ydeevne ved at opsætte et godt caching-plugin.

Men før vi kommer til plugins, har vi brug for en benchmark score. Hvad jeg har lavet er et simpelt teststed på Kinsta og installeret et populært, gratis, jQuery-kærligt tema fra WordPress.org: Sydney. Uden at gøre noget andet, er her hvor vi står.

PageSpeed Insights uden plugins

PageSpeed Insights uden plugins

Ikke så dårligt, men der er sikkert plads til forbedring. Der er to JavaScript og fem CSS ressourcer i en render-blokerende position.

En anden test, vi vil bruge som benchmark, er Pingdom Website Speed Test. Vi ønsker især at notere antallet af anmodninger, der kræves for at indlæse websiden og se, hvordan dette nummer ændres med forskellige plugins aktiveret. Hver yderligere anmodning betyder en anden rundvisning til serveren, så mange plugins vil kombinere CSS- og JavaScript-ressourcer i færre filer for at fremskynde websidens ydeevne.

Siden mit testwebsted er hostet på Kinsta, er webstedet flammende hurtigt fra start og krævede 24 anmodninger om at indlæse hjemmesiden.

Hastighedstest uden plugins

Hastighedstest uden plugins

Lad os se, hvordan vi kan forbedre denne ydelse ved at prøve et par plugins.

Speed Booster Pack

Først er Speed Booster Pack. Dette plugin er aktiv på over 40.000 WordPress-websteder og får en 3,6 ud af 5-stjernet rating på WordPress.org.

Speed Booster Pack plugin

Speed Booster Pack plugin

Pluginets indstillinger findes i Indstillinger> Speed Booster Pack, og menuen er rimeligt enkel, samtidig med at der er et par konfigurationsmuligheder.

Den generelle indstillingsmenu kan flytte scripts til footer og udskyder nedbrydelsen af javascript filer. I kombination skal disse to muligheder helt fjerne ydeblokerende JavaScript. En anden menu med titlen Har stadig brug for mere fart? muliggør lastning af CSS asynkront. Selvom dette skulle have elimineret alle CSS-gengivelser, der gør det muligt for denne mulighed, produceret den frygtede FOUC, så forlod jeg ikke denne mulighed.

Med pluginet konfigureret, er her hvordan webstedet udføres på PageSpeed Insights.

PageSpeed Insights med Speed Booster plugin

PageSpeed Insights med Speed Booster plugin

Som forventet er der ingen tilbageførende renderings-blokerende JavaScript-ressourcer tilbage. Men da asynkron CSS-indlæsning producerede en FOUC og skal efterlades deaktiveret, blokerer alle fem CSS-ressourcer stadig det øverste indhold.

Speed test med Speed Booster plugin

Speed test med Speed Booster plugin

Curiously, the number of requests actually increased. While there was nothing to suggest the number should have decreased, increasing the number of requests is a surprise. The overall performance grade did improve a little, so I won’t call Speed Booster Pack a bust. However, there are more effective options available.

JCH Optimize

Så lad os se på JCH Optimize. Mens pluginet har færre aktive installationer end Speed Booster Pack, kan den prale af en imponerende 4,6 stjerner ud af 5 rating.

JCH Optimize plugin

JCH Optimize plugin

Dette plugin kombinerer og reducerer JavaScript og CSS, og sammen med mange andre funktioner er designet til at fremskynde sideindlæsning. Mens eliminering af renderings-blokerende ressourcer ikke er specifikt nævnt overalt, bør kombinationen af JavaScript og CSS-filer betyde, at der er færre ressourcer, der kræves for at indlæse siden og færre JS- og CSS-ressourcer i en renderings-position.

Plugin tilføjer en indstillingsmenu under Indstillinger> JCH Optimize. Indstillingsmenuen har flere sider med mange forskellige konfigurationsindstillinger. For at gøre tingene relativt enkle valgte jeg de gennemsnitlige automatiske indstillinger i menuen Grundindstillinger.

Resultaterne var lidt forbløffende.

PageSpeed Insights med JCH plugin

PageSpeed Insights med JCH plugin

Alle JavaScript-ressourcer er blevet kombineret, hvilket betyder, at kun én JS-ressource blokerer gengivelsen af det overordnede indhold. Så langt så godt. CSS-resultaterne er, hvor vi kommer ind i en smule af en scratcher. Der er stadig fem CSS-ressourcer i en renderingsposition. Det ser ud til, at pluginet har kombineret og reduceret indholdet af CSS-filer. Skrifttypefiler er dog udelukket, og JCH har indlæst tre forskellige CSS-filer i stedet for at kombinere alle tre i en enkelt CSS-fil.

Det var ikke det, jeg forventede at se. Lad os se, hvad Pingdom’s Website Speed Test tænker på ændringerne.

Speed ​​test med JCH plugin

Speed ​​test med JCH plugin

Som forventet er antallet af anmodninger blevet reduceret med en, da to JavaScript-ressourcer er blevet kombineret. Udover det viser testen ydeevne, der er stort set uændret.

Jeg forventede en mere målbar forbedring fra JCH. Jeg forventede, at alle CSS-filer ville blive kombineret, og der ville kun være to renderings-blokerende ressourcer tilbage: en kombineret JavaScript-fil og en kombineret CSS-fil. Jeg er ikke sikker på, hvorfor det ikke skete. En premium version af JCH Optimize er tilgængelig. Så det er muligt, at nogle af de avancerede funktioner gør det muligt at kombinere CSS-filer yderligere og reducere antallet af render-blokeringsressourcer.

Som det står, er JCH Optimize ikke særlig nyttigt til optimering af dette teststed.

Autoptimize

Med over 600.000 aktive installationer og en 4,7 ud af 5-stjerneklassificering er Autoptimize et af de mest populære hurtigheds-optimerende plugins i WordPress plugin-mappen. Det tjener også stærke mærker takket være plugin-forfatterens velgørende og generøse indstilling.

Autotimér plugin

Autotimér plugin

Dette plugin er designet til at være nemt at bruge, og det lever op til det løfte. Mens mange af de andre muligheder jeg kiggede på havde meget komplekse menuer, er Autoptimize meget enkel. Alt, hvad jeg gjorde, var at gå til Settings > Autoptimize og vælg de tre primære afkrydsningsindstillinger, der vises på den pågældende side.

Autotimize indstillinger

Autotimize indstillinger

Sådan klarede min testside sig ved PageSpeed Insights efter den enkle 30-sekunder-eller-hurtigere optimering.

PageSpeed Insights med Autoptimize plugin

PageSpeed Insights med Autoptimize plugin

Vi har formået at reducere antallet af renderings-blokerende ressourcer fra i alt syv til fire. Meget godt. Nu for at se, hvordan antallet af anmodninger er ændret.

Hastighedstest med Autoptimize plugin

Hastighedstest med Autoptimize plugin

Det samlede antal anmodninger er faldet betydeligt fra 24 til 17, og præstationsgraden er hoppet til de meget imponerende 92. Det ser ud til, at Autoptimize er populær af en meget god grund. Jeg bør nævnes, at Kinsta har bemærket en tendens til Autoptimize-inkompatibilitet med nogle websteder, der inliner brugerdefineret CSS i header.php. Hvis du for eksempel har brugerdefineret CSS kodet i dit tema’s header.php-fil, skal du være ekstra forsigtig, hvis du prøver Autoptimize.

Async Javascript

Næste på listen er Async Javascript. Dette plugin er vokset meget populært på kort tid og opretholdes af den samme udvikler af Autoptimize. Det er gået fra 4.000 installationer til over 40.000 installationer på under et år med en meget stærk vurdering: 4.4 ud af 5 stjerner. Dette er et andet dødt enkelt plugin. Bare installer og aktiver det. Gå til indstillingen Async Javascript tilføjet til Admin-menuen. Marker afkrydsningsfeltet ud for Aktiver Async JavaScript. Vælg radioknappen for enten Defer eller Async-metoden. Gem derefter ændringerne og se, hvordan dit websted udfører.

I forbindelse med mit test-website endte async med at loade nogle jQuery-filer før jquery.js, som endte med at bryde webstedet. Så jeg gik med udskydermetoden. Med de valgte valgmuligheder, er her hvordan testene gik. Først kommer, PageSpeed ​​Insights.

PageSpeed Insights med Async plugin

PageSpeed Insights med Async plugin

Som forventet er al JavaScript blevet fjernet, men CSS er ikke blevet rørt. Dette er fint, fordi dette plugin er designet til kun at adressere JavaScript.

Speed test med Async plugin

Speed test med Async plugin

Webstedets ydeevne på Pingdoms Website Speed Test var stort set uændret med plugin installeret. Endnu en gang bekræfter dette netop, at dette plugin gør præcis, hvad det siger, det vil gøre: eliminére renderings-blokerende JavaScript.

Kombination af Async JS og Autoptimize

Async Javascript-menuen gør opmærksom på, at den er designet til at fungere fint med Autoptimize. Da jeg allerede havde Autoptimize installeret, gav jeg det en chance. Efter aktivering af Autoptimize blev der vist en ny afkrydsningsfelt i menuen Async Javascript-indstillinger til Aktiver Aut optimize Support. Med dette afkrydsningsfelt aktiveret, her er hvordan webstedet blev udført.

PageSpeed Insights med Async og Autoptimize plugins

PageSpeed Insights med Async og Autoptimize plugins

Fremragende. Med begge installerede plugins har vi formået at trimme det samlede antal renderings-blokerende ressourcer ned til kun tre CSS-ressourcer. Hvordan har vi påvirket antallet af anmodninger?

Speed ​​test med Async og Autoptimize plugins

Speed ​​test med Async og Autoptimize plugins

Webstedet er flammende hurtigt og sender kun 17 anmodninger.

Betragtet alene, er jeg ikke en stor fan af Async Javascript. Det giver mere plads i indstillingsmenuen for at annoncere premium-versionen af ​​pluginet end til plugin-indstillingerne. Det tilføjer et primært element til Admin-menuen i stedet for at tilføje det som en undermenupunkt i menuen Indstillinger, hvor den virkelig hører hjemme. Det fejl-staver JavaScript ved at skrive det Javascript. Ok, jeg indrømmer at sidste ting er trivielt, men hvis P i WordPress betyder noget, så gør S i JavaScript også.

Opdatering: Forfatteren af ​​pluginet behandlede disse bekymringer, efter at vores indlæg blev offentliggjort, ved at reducere annoncens størrelse, flytte placeringen af ​​pluginet i Admin-menuen og endda rettede stavningen af ​​JavaScript. Gør os imponeret. Uanset mine tanker om Async Javascript på egen hånd, når det er parret med Autoptimize, gør det et godt stykke arbejde med fuldstændig eliminering af renderings-blokerende JavaScript og afrimning af mængden af ​​renderings-blokerende CSS.

Hummingbird

Det sidste plugin jeg prøvede var Hummingbird af WPMU DEV. Dette er et plugin, jeg bruger på nogle af mine egne hjemmesider. Dette plejede at være et premium plugin, men den er nu tilgængelig gratis! Det gav den mest signifikante reduktion i renderings-blokerende ressourcer, så det fortjener at blive nævnt.

Hummingbird WordPress plugin

Hummingbird WordPress plugin

Hummingbird er et komplekst plugin, men også ret brugervenligt i betragtning af, hvor meget det tilbyder. Hvis du vil flytte renderings-blokerende ressourcer, skal du gå til Hummingbird> Minification og vælge Check Files. Fra den resulterende skærm kan du vælge CSS og JavaScript-filer for at flytte til sidebeteksten eller overskriften, samt filer til at kombinere og reducere.

Jeg kombinerede og minificerede alle filer og flyttede dem alle til sidefoden med to undtagelser: temaets primære style.css-fil og jquery.js. Jeg fandt ud af, at begge disse filer skal vises i deres oprindelige placering for at undgå at bryde webstedet eller producere en FOUC. Med disse indstillinger, er her hvordan webstedet udførte i PageSpeed Insights.

PageSpeed Insights med Hummingbird plugin

PageSpeed Insights med Hummingbird plugin

Som forventet er vi nede på kun to renderings-blokerende ressourcer: style.css og jquery.js. Godt. Lad os se, hvad Pingdom kan fortælle os.

Speed test med Hummingbird plugin

Speed test med Hummingbird plugin

Mens den samlede præstationsgrad ikke er så høj som ved Autoptimize, har vi formået at trimme det samlede antal forespørgsler til den laveste værdi, vi har set indtil videre: 16.

Async JS fungerer godt med Hummingbird

Mens tingene ser rigtig godt ud, forekommer det mig, at Async Javascript kan hjælpe os med at flytte jquery.js uden at bryde noget. Efter at have aktiveret Async Javascript og genskabe PageSpeed Insights ser jeg, at vi næsten helt har elimineret alle renderings-blokerende ressourcer.

Eliminer renderings-blokerende JavaScript

Eliminer renderings-blokerende JavaScript

Alt der er ladt tilbage til at stå i vejen, er style.css. Det sidste skridt, der gør det muligt for os at fuldstændig eliminere alle renderings-blokerende ressourcer, ville være at inline style.css. Vi har imidlertid formået at gå fra at se en skal reparere besked til en overvejende fixing-meddelelse i PageSpeed ​​Insights. Jeg vil udskyde til Googles definition af hvornår du skal bekymre dig om en Overvej Fixing-meddelelse og sige, at det, vi har opnået indtil nu, er en rungende succes.

Resumé

Ikke alle plugins, der hævder at adressere og eliminere renderings-blokerende JavaScript- og CSS-problemer, oprettes ens. Autoptimize bruges i kombination med Async Javascript er den bedste gratis mulighed jeg fandt for mit test-site. Hummingbird-pluginet sammen med Async JavaScript gav også resultater, der endelig opfyldte PageSpeed ​​Insights.

Denne artikel er langt fra udtømmende, og der er mange ekstra plugins, du kan bruge til at adressere renderings-blokerende ressourcer. Hvilke plugins bruger du og anbefaler at fjerne renderings-blokerende JavaScript og CSS?

47
Delinger