Håll käften Google PageSpeed! Åtgärda de viktigaste felmeddelandena

Tobias Schüring Senast uppdaterad den 21 oktober 2020
11 Min.
Google PageSpeed Insights Fel
Senast uppdaterad den 21 oktober 2020

Google PageSpeed Insights är utmärkt för att snabbt ge dig en översikt över din webbplats optimeringspotential. Idag ska jag visa dig hur du använder denna potential och öka din PageSpeed poäng. Men du bör inte slaviskt följa Googles resultat. Eftersom felmeddelandena för PageSpeed är inte alltid förnuftigt.

Caspar Hübinger deltog för en tid sedan i en av hans blogginlägg inlägg, låt oss säga, vara mycket tydliga ord för Google PageSpeed Insightsresultatet hittades. Och han kritiserar inte bara verktyget, men också användningen av verktyget av användarna. För om du inte vet hur man tolkar och åtgärdar de enskilda optimeringsförslagen kan du snabbt gå vilse i den meningslösa jakten på 100-betyg. Men det vore oklokt. Eftersom utopiska höga Google PageSpeed betyg är oftast ett slöseri med tid. Viktigare är optimeringen av laddningstiden.

Jag ska visa dig idag hur du får Googles viktigaste felmeddelanden PageSpeed Insights tolka och optimera din sida därefter.

Men innan jag visar dig hur man tolkar de enskilda felmeddelanden och korrigera fel, jag vill gå tillbaka till hur du Google PageSpeed Insights används på rätt sätt. Eftersom vi ofta har sett att användarna var starkt fixerade vid sina PageSpeed poäng utan att hålla ett öga på deras sida laddningstid.

Om du inte är intresserad av det här avsnittet bara hoppa över det och lära sig direkt hur man fixar felmeddelandet "Komprimera CSS".

Felmeddelanden för Google PageSpeed är inte alltid korrekta och viktiga

Du bör aldrig fokusera enbart på Googles resultat eller felmeddelanden PageSpeed Insights Lämna. Eftersom Google-verktyget helt enkelt inte mäter den viktigaste egenskapen på din sida: sidans laddningstid. För att mäta dem på rätt sätt rekommenderar jag Webpagetest.org.

Endast om du håller ett öga på sidans laddningstid från början när du optimerar din webbplats kan du göra meningsfulla uttalanden om optimeringens framgång. Eftersom målet med en optimering bör alltid vara en förbättrad användarupplevelse. När det gäller prestandaoptimering är detta naturligtvis sidans laddningstid och den upplevda sidans laddningstid.

MÄRKER!

Kontrollera alltid sidans inläsningstid först innan du optimerar sidans prestanda. Detta är det enda sättet att bedöma hur framgångsrik optimeringen har varit.

Ur ett användarperspektiv är snabbare sidinläsningstid och mindre sidstorlek alltid en fördel. Tålamodet och uppmärksamhet span av den genomsnittlige användaren fortsätter att minska (som denna Microsoft-studie visar) – Detta är särskilt viktigt för e-handeln – och fler och fler besökare kommer via mobila enheter. Redan 2016 56 procent av tyskarna använder regelbundet Internet via smartphones eller surfplattor Kallas. Här är anslutningshastigheter och datavolymer inte alltid obegränsade. Smala, snabba sidor är därför lämpliga.

Google PageSpeed ger dock bara indikationer på optimeringspotential på din webbplats och tillåter bara några slutsatser om användarupplevelsen. Den låga betydelsen av Google PageSpeed felmeddelanden förstärks av det faktum att verktyget inte kan vilas i vissa områden eller bara med betydande ytterligare ansträngning.

Referensen till cachelagring i webbläsaren visas till exempel när externa resurser, inklusive Googles egna tjänster, integreras. Men dessa resurser kan inte täckas av sidans webbläsare cachelagring. Felmeddelandet är därför inte relevant för användarupplevelsen på din webbplats, men produceras av logiken i själva verktyget. I värsta fall tolkas dock meddelandet som om ingen cachelagring av webbläsare är aktiv alls.

Så fokusera inte främst på Google gradering, men på laddningstiden. Detta är den enda riktigt viktiga storleken.

Men hur är min Google ranking?

Exemplet med den saknade webbläsaren caching gör det mycket tydligt varför du inte bör vara orolig av en förment dålig PageSpeed resultat.

Om du till exempel har inkluderat Google Maps eller Google Analytics på sidan kommer de att orsaka följande felmeddelande:

Typiska Google PageSpeed Insights -Felmeddelanden: Cachelagring av webbläsare påstås inte användas korrekt

Detsamma gäller för andra tredjepartstjänster. Till exempel vår supportchatt.

Varje gång vi därför tar vår sida till PageSpeed Insights testet är denna punkt kritad upp. Detta innebär att denna faktor alltid snedvrider våra resultat negativt och därför helt enkelt ignorerar dem.

För din webbplats SEO innebär detta att laddningstiden och användarupplevelsen också är mycket viktigare för rankningen på Google än den specifika PageSpeed-klassificeringen.

För när du optimerar sidans laddningstid redigerar du automatiskt många av de områden som är viktiga för Google. En förbättring av laddningstiden och Google PageSpeed-poängen är därför på något sätt relaterade.

Enligt min mening bör man dock inte gå vilse i jakten på en 100 rating.

Men nu till optimeringsstegen!

Fel 1: Komprimera CSS

Enligt vår erfarenhet är detta ett av Googles mest avskräckande felmeddelanden PageSpeed Insights .

Håll käften Google PageSpeed! Åtgärda de viktigaste felmeddelandena

Betydelse: Det här felmeddelandet anger att sidans CSS-filer fortfarande kan komprimeras (eller, i fallet ovan, om det redan har gjorts med lyckat resultat). En sådan minskning minskar antalet tecken i dokumenten. Det är så här filstorleken krymper. Till exempel tas kommentarer, blanksteg och formatering bort.

Genomförande: Även om denna ledtråd fungerar som en avskräckande, genomförandet är mycket enkel. I det här fallet finns det i princip två möjliga lösningar: Om du själv är i form i CSS kan du manuellt minska antalet CSS-filer och skapa en Kort-notation Använda. Du kan också använda CSS-filerna via onlineverktyg som CSS-kompressor Eller CSS-minifier, minska storleken för hand.

Håll käften Google PageSpeed! Åtgärda de viktigaste felmeddelandena

Naturligtvis finns det också den bekväma lösningen med hjälp av CSS minification Plugins I WordPress . Några Plugins göra en direkt vändning och kan komprimera och optimera inte bara CSS, men också JavaScript och HTML.

Ytterligare information

En detaljerad förklaring av hur du WordPress HTML, CSS och JavaScript hittar du i den här artikeln.

Med HTTP/2 är det inte nödvändigtvis meningsfullt att sammanfatta CSS

Den tidigare nämnda Minify Plugins används i stor utsträckning. Eftersom de är bekväma och ta över komprimeringen och sammanfattningen av CSS (och mycket mer) helt automatiskt. Tills nyligen gjorde summeringen av CSS-filer också en hel del mening. Under tiden är detta annorlunda: eftersom det har HTTP/2-standard webbläsare har möjlighet att ladda flera filer från webbservern samtidigt.

Detta innebär att data inte längre behöver summeras, eftersom http/2 kan utbyta flera datapaket samtidigt. HTTP/2 måste till exempel ha ställts in av värden och kan endast användas med SSL-certifikat. användas.

Så innan du bestämmer dig för att gå för en Plugin med flera dussin funktioner och konfigurationsalternativ, tänk noga om du behöver det alls. Speciellt om du litar på dig själv att optimera CSS själv.

Eftersom ytterligare en Plugin kan sakta ner sidan. Särskilt om de andra funktionerna i den allsidiga Plugins inte kan nå sin fulla potential.

Fel 2: Eliminera resurser som blockerar rendering

Detta meddelande driver också svett pärlor i pannan på många användare, eftersom det inte är så lätt att genomföra och är också en av Google PageSpeed eviga kritik.

Håll käften Google PageSpeed! Åtgärda de viktigaste felmeddelandena

Betydelse: En webbsida är inbyggd i en viss ordning. Denna lastningsorder kan optimeras. PageSpeed nästan alltid klagar på att CSS-filer blockera denna optimala lastning ordning. Detta gäller även redan mycket väloptimerade sidor (som fallet med Caspar Hübinger visar). Noteringen kan dock vara mycket värdefull för laddningstidsoptimering. I grund och botten talar den här anteckningen om att JavaScript- eller CSS-kod, som är viktig för att ett objekt ska läsas in, till exempel en bakgrundsfärg, ännu inte är tillgänglig när objektet läses in. Detta visar det inte förrän motsvarande CSS-kommando har lästs in. Detta ökar inläsningstiden för din sida, men framför allt påverkar användarupplevelsen, eftersom sidan känns längre.

Genomförande: En vanlig lösning är att konvertera en tumregel: CSS till huvudet. Det innebär att du kan använda CSS-kod från HTML-dokumentets brödtext,, till början av dokumentet,, flyttade och där som en

I sin tur kan du implementera detta optimeringsmått på två sätt: du kan röra koden själv och flytta CSS-koderna in i huvudet, eller så kan du använda en Plugin låt arbetet göra det. Även här hjälper Plugins Hur Bättre WordPress Minify Nästa.

Google PageSpeed Insights Felmeddelanden - utdrag från Plugin Bättre WordPress Minify

Den Minify Plugin I alternativen anger du till exempel vilka CSS-filer som redan har flyttats till huvudet. Du kan också manuellt lägga till fler CSS-resurser här.

Google PageSpeed Insights Felmeddelanden - utdrag från optimering plugin Autoptimize

Det är Plugin Autoptimize, å andra sidan, börjar med den all-round vändning: Du väljer alternativen för alla CSS-filer inte utesluts från operationen.

Utdragen från alternativen i Plugins visa: Plugin-varianten är inte heller genomförbar utan en grundläggande förståelse av processen. Även i Plugins Så du måste jobba dig in.

Felmeddelande 3: Koda bilder effektivt

Även nu, PageSpeed Insights ofta runt. Detta fall är dock nästan alltid snabb och lätt att genomföra och oftast också ger påtagliga fördelar laddningstid.

Håll käften Google PageSpeed! Åtgärda de viktigaste felmeddelandena

Betydelse: Många användare underskattar rollen av bildstorlek för sidans laddningstid. Bilder är mycket ofta en av de största laddningstiden bromsar. Även om endast små mängder data sparas för enskilda bilder kan den totala sparade volymen lägga till upp till en betydande mängd data.

Eftersom en bild är sällan bara en bild. WordPress genererar automatiskt flera miniatyrer av bilden när du laddar upp. Så om du inte använder originalen på din hemsida, men mindre versioner av dem, dvs miniatyrer eller miniatyrer. Utvalda bilder, då naturligtvis de också bör optimeras. Detta förvandlar snabbt en bild till flera filer, som också bär en multipel databelastning.

Genomförande: I princip har du två sätt att optimera dina bilder. Antingen optimerar du bilderna innan du laddar upp eller efter eller under uppladdningen. Du kan göra det förstnämnda via online- eller offlineverktyg, det senare kan du göra via lämpliga WordPress Plugin-program för bildoptimering.

Om du med fördel kan integrera komprimering i arbetsflödet är det vettigt att optimera bilderna innan du laddar upp dem. För detta ändamål finns det onlineverktyg, t.ex. Kraken.io. Eller så kan du minska kvaliteten och därmed filstorleken på dina bilder offline, till exempel direkt i Photoshop. Hur du sparar dig den extra Plugin och håll din sida smal.

Den bekvämare lösningen är naturligtvis också här en Plugin Tillägg som Optimus Eller Smush inte bara optimera huvudbilden, men också alla varianter av den. Dessutom kan Smush också optimera alla dina befintliga bilder efteråt.

Det är Plugins arbete med bland annat en så kallad "förlustfri komprimering". Det innebär att bildernas filstorlek minskar, men deras synliga kvalitet minskar inte.

Fel 4: Aktivera textkomprimering

Detta felmeddelande från Google PageSpeed är mycket snabb att fixa och kan avsevärt minska laddningstiden för din sida.

Håll käften Google PageSpeed! Åtgärda de viktigaste felmeddelandena

Betydelse: Du har redan minskat dina bilder och CSS så mycket som möjligt. Ja, så! Men det räcker inte. Nu kan du använda en annan komprimeringsmekanism. Du vet förmodligen processen från att ladda ner stora datapaket: dessa är oftast i zippade, dvs komprimerad form. Detta gör data mindre vid nedladdning och därmed snabbare nedladdning. Datapaketen måste dock fortfarande packas upp efter hämtningen. Exakt samma sak händer under sidkonfigurationen: webbservern levererar de komprimerade datapaketen, webbservern packar upp dem. Detta gör dataöverföring snabbare och minskar sidans inläsningstid.

Genomförande: Antingen är datakomprimeringen redan inställd på serversidan, eller så måste du själv aktivera den. Är du RAIDBOXES -Kund, du behöver inte oroa dig för något längre. Eftersom vi har den särskilt starka Brotli-komprimering Aktiva.

Med följande post i .htaccess kan du också aktivera den så kallade GZIP-komprimeringen manuellt. Förutsatt att du har en Apache webbserver.


 mod_gzip_on Ja
 mod_gzip_dechunk Ja
 mod_gzip_item_include fil . (html?| txt|css|js|php|pl)
 mod_gzip_item_include hanterare scgi-script
 mod_gzip_item_include mime stext/.*
 mod_gzip_item_include mime .application/x-javascript.*
 mod_gzip_item_exclude mime .image/.*
 mod_gzip_item_exclude rspheader .content-kodning:.*gzip.*
 
 
 
 AddOutputFilterByType DEFLATE text/oformaterad
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE-program/xml
 AddOutputFilterByType DEFLATE-program/xhtml+xml
 AddOutputFilterByType DEFLATE-program/rss+xml
 AddOutputFilterByType DEFLATE-program/javascript
 AddOutputFilterByType DEFLATE-program/x-javascript
 

Fel 5: Distribuera statiskt innehåll med en effektiv cacheprincip 

Enligt min mening är hänvisningen till webbläsaren caching den överlägset mest irriterande på Google PageSpeed Insights . Eftersom du bara kan ställa in cachelagring av webbläsare för dina egna resurser. Cachelagring av webbläsare är inte möjlig för externa resurser.

Håll käften Google PageSpeed! Åtgärda de viktigaste felmeddelandena

Betydelse: Cachelagring i webbläsaren innebär att webbläsaren sparar en statisk version av sidan och inte längre behöver fråga webbservern när du besöker den igen, men sidan är redan laddad.

Genomförande: Antingen har din värdare redan aktiverat cachelagring av webbläsare på serversidan, eller så kan du ställa in den genom att manipulera HTACCESS-filen (glöm inte: den här inställningen fungerar bara på Apache-webbservrar). Exempelkoden nedan anger till exempel webbläsarens cacheminne till en månad, dvs den statiska versionen av sidan lagras i besökarens webbläsare i en månad.

ExpiresActive On
ExpiresDefault "åtkomst 60 sekunder"
ExpiresByType bild / jpg "tillgång plus 1 månad"
FörfallerByType-avbildning/-----------------------------------
ExpiresByType bild/gif "access plus 1 månad"
ExpiresByType bild / png "tillgång plus 1 månad"
ExpiresByType image/ico "access plus 1 månad"
ExpiresByType text/css "access 1 månad"
FörfallerByType text /javascript "access 1 månad"
ExpiresByType-program/javascript "access 1 månad"
ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" Expires

Även här gäller följande: Är du RAIDBOXES kund är cachelagring av webbläsare redan aktiv som standard.

Min 2 Cent: Utan cache, är allt ingenting

Tja, nu har du optimerat sidans bilder, minskat CSS, komprimerat den och lagt den i rätt ordning, och fick dina besökares webbläsare för att cachelagra sidan. Alla dessa mått förkortar sidans laddningstid.

Betydelse: Utan en ordentlig cache, men kommer du att ge en hel del av denna potential. Caching är och förblir den absolut viktigaste prestandafaktorn. En cache lagrar innehållet i din WordPress sidan och ser till att hela sidan inte behöver laddas om varje gång. I stället levereras en statisk, färdig redigeringsversion av sidan från en cache. I synnerhet den långsamma PHP och databasen kringgås.

Genomförande: Återigen har din värdare redan server-side cache eller om du använder en cachelagring Plugin . Här är några mycket kraftfulla Plugins , som cachelagrar stora delar av sidan och leder till en betydande minskning av laddningstiden för återkommande webbplatsbesökare.

Den höga styrkan av caching Plugins är också deras största svaghet. Det kan mycket väl vara så att en Plugin saktar ner sidan för första gången besökare. Eftersom ju mer komplicerat din blogg eller sida är, desto mer komplicerat och omfattande cachemotor som cachar din blogg måste vara. Detta är särskilt relevant för butiker.

Om du kör en jämförelsevis enkel webbplats kan minimalistiska lösningar vara bättre än att cacheteckna all-rounders. En av dessa smala Plugins är till exempel Cache Enabler.

Observera att cachelagring Plugins vanligtvis också minska och sammanfatta CSS eller JavaScript. Därför bör du kontrollera om din cachelagring Plugin inte redan Plugins är överflödigt för CSS-optimering.

Om du använder cachelagring på serversidan rekommenderas att du använder cachelagringsfunktionerna i Plugins inaktivera Autoptimize eller testa om de ger en annan prestandafördel alls.

Slutsats: Med några få Plugins flytta en hel del

Du har redan märkt det när du läser: För att optimera CSS, bilder och optimera lastningsordningen finns det Plugins , som tar mycket arbete ifrån dig. Men inte allt arbete. Cachelagring Plugins ger snabbt en märkbar effekt, men är ibland mycket omfattande och erbjuder många konfigurationsalternativ och ibland redundanta funktioner.

I vilket fall som helst, engagera dig mer i Plugins som du använder. Bara om du vet vad som händer när du använder vissa funktioner kan du optimera på ett meningsfullt sätt. En överbelastning av sidan med optimering Plugins tenderar att ge lite.

Och du bör vara noga med att mäta dina framgångar korrekt när optimera. Oavsett om du är för hand eller via Plugin optimierst. Använda PageSpeed Insights som en första referenspunkt för att identifiera sidans sårbarheter. Missa sedan sidans laddningstid före optimering. Först efter denna inspelning av den ursprungliga positionen gör det verkligen vettigt att optimera din sida steg för steg. För bara om du känner till laddningstiden före optimering och efter varje optimeringssteg kan du också bestämma vilka de enskilda optimeringsåtgärderna har medfört.

Som systemadministratör övervakar Tobias vår infrastruktur och hittar varje justeringsskruv för att optimera prestandan hos våra servrar. På grund av sina outtröttliga ansträngningar är han ofta också Slack som ska hittas.

Liknande artiklar

Kommentarer om den här artikeln

Skriv en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är * Markerade.