Håll tyst om Google PageSpeed

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

PageSpeed Insights Google är ett utmärkt sätt att snabbt få en överblick över din webbplats optimeringspotential. Idag ska jag visa dig hur du utnyttjar denna potential och ökar din PageSpeed Score. Du bör dock inte slaviskt följa Googles resultat. Eftersom PageSpeed-felmeddelandenainte alltid är användbara.

PageSpeed InsightsFör en tid sedan hittade Caspar Hübinger mycket tydliga ord för sitt Google-resultat i en av sina bloggposter. Och han kritiserar inte bara verktyget, utan även användningen av verktyget. För om man inte vet hur man ska tolka och åtgärda de enskilda optimeringsförslagen kan man snabbt förlora sig i den meningslösa jakten på 100 poäng. Men det skulle vara oklokt. När allt kommer omkring är utopiska Google PageSpeed-poäng vanligtvis slöseri med tid. Det är viktigare att optimera laddningstiden.

PageSpeed Insights Idag ska jag visa dig hur du tolkar de viktigaste felmeddelandena från Google och optimerar din webbplats därefter.

PageSpeed Insights Men innan jag visar dig hur du tolkar de enskilda felmeddelandena och åtgärdar felen, skulle jag vilja gå in på hur du använder Google korrekt. Vi har redan sett att vissa människor är mycket fixerade vid sin PageSpeed Score utan att hålla ett öga på laddningstiden för sin webbplats.

Om du inte är intresserad av det här avsnittet, hoppa bara över det och lär dig direkt hur du åtgärdar felmeddelandet "Komprimera CSS".

Felmeddelanden från Google PageSpeed är inte alltid korrekta och viktiga

PageSpeed Insights Du bör aldrig förlita dig uteslutande på resultaten eller felmeddelandena från Google . Eftersom Google-verktyget inte mäter den viktigaste parametern på din webbplats: sidans laddningstid. För att mäta detta korrekt rekommenderar jagWebpagetest.org.

Endast om du har sidladdningstiden i åtanke från början när du optimerar din webbplats kan du göra meningsfulla uttalanden om optimeringens framgång. För målet med all optimering bör alltid vara en förbättrad användarupplevelse. När det gäller prestandaoptimering handlar det naturligtvis om sidladdningstiden och den upplevda sidladdningstiden.

MÄRKA!

Mät alltid sidans laddningstid innan du optimerar prestandan på din webbplats. Det är det enda sättet att bedöma hur framgångsrik optimeringen var.

För användarupplevelsen är snabbare sidladdningstider och mindre sidstorlekar alltid bra. Människors tålamod och uppmärksamhet fortsätter att minska(som denna studie från Microsoft visar) - detta är särskilt viktigt för e-handeln - och mer och mer trafik kommer via mobila enheter. Redan 2016 hade 56 procent av tyskarna regelbunden tillgång till internet via smartphones eller surfplattor. Här är anslutningshastigheter och datavolymer inte alltid obegränsade. Därför är det lämpligt med smidiga och snabba webbplatser.

Google PageSpeed ger dock bara information om optimeringspotentialen för din webbplats och låter dig bara dra några få slutsatser om användarupplevelsen. Det låga informationsvärdet hos Google PageSpeed-felmeddelanden förstärks av att verktyget inte kan tystas på vissa områden, eller bara med betydande extra ansträngning.

Till exempel kommer hänvisningen till webbläsarens cachning alltid att visas när externa resurser - inklusive Googles egna tjänster - integreras. Dessa resurser kan dock inte täckas av webbläsarens cachning på din webbplats. Felmeddelandet har därför ingen betydelse för användarupplevelsen på din webbplats, utan orsakas av logiken i själva verktyget. I värsta fall tolkas meddelandet som om ingen cachning av webbläsaren är aktiv.

Så följ inte i första hand Google-betyget, utan laddningstiden. Detta är den enda riktigt viktiga kvantiteten.

Men hur är det med min Google-ranking?

Exemplet med meddelandet med den saknade webbläsarcachningen gör det tydligt varför du inte bör bli oroad av ett förment dåligt PageSpeed-resultat.

Om du t.ex. har integrerat Google Maps eller Google Analytics på din webbplats kommer dessa att generera följande felmeddelande:

Detsamma gäller för andra tjänster från tredje part. Till exempel vår supportchatt.

PageSpeed Insights Varje gång vi testar vår webbplats på , stryks därför denna punkt. Det betyder att vi vet att denna faktor alltid förvränger våra resultat negativt och därför helt enkelt ignorerar den.

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

För om du optimerar laddningstiden för din webbplats kommer du automatiskt att arbeta med många av de områden som är viktiga för Google. Att förbättra laddningstiden och Google PageSpeed Score är därför kopplade till varandra på ett visst sätt.

Enligt min mening bör du dock inte gå vilse i jakten på 100 i betyg.

Men nu till optimeringsstegen!

Felmeddelande 1: Komprimera CSS

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

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

Betydelse: Detta felmeddelande indikerar att CSS-filerna på din webbplats fortfarande kan komprimeras (eller i fallet ovan, att detta redan har gjorts framgångsrikt). Vid en sådan komprimering minskas antalet tecken i dokumenten. Detta minskar filstorleken. Exempelvis raderas kommentarer, mellanslag och formateringar.

Implementering: Även om denna ledtråd verkar skrämmande, är implementeringen tänkbart enkel. I princip finns det två möjliga lösningar för det här fallet: Om du är en skicklig CSS-användare kan du minska antalet CSS-filer manuellt och använda en kortnotation när du skapar dem. Du kan också själv minska storleken på CSS-filerna med hjälp av onlineverktyg som CSS Minifier.

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

Naturligtvis finns det också en bekväm lösning med CSS-minifieringsplugins i WordPress. Vissa plug-ins gör ett allroundjobb och kan komprimera och optimera inte bara CSS, utan även JavaScript och HTML.

Ytterligare information

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

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

De just nämnda Minify-plugin-programmen används flitigt. Detta beror på att de är praktiska och tar hand om komprimering och sammanslagning av CSS (och mycket mer) helt automatiskt. Fram till nyligen var det också mycket vettigt att kombinera CSS-filer. Under tiden har saker och ting förändrats: sedan HTTP/2-standarden introducerades kan webbläsare ladda flera filer från webbservern samtidigt.

Detta innebär att data inte längre nödvändigtvis behöver kombineras, eftersom flera datapaket kan utbytas samtidigt med HTTP/2. HTTP/2 måste t.ex. konfigureras av hoster och kan endast användas med ett SSL-certifikat.

Så innan du bestämmer dig för ett plugin med flera dussin funktioner och konfigurationsalternativ, tänk noga på om du behöver det alls. Särskilt om du vågar optimera CSS själv.

Eftersom ett ytterligare plugin kan göra din webbplats långsammare under vissa omständigheter. Särskilt om de andra funktionerna i allround-plugins inte kan utnyttja sin fulla potential.

Felmeddelande 2: Eliminera resurser som blockerar rendering

Detta meddelande ger också många människor svettpärlor i pannan, eftersom det inte är så lätt att genomföra och också är en av Google PageSpeeds eviga kritikpunkter.

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

Betydelse: En webbplats byggs i en viss ordning. Denna laddningsordning kan optimeras. PageSpeed klagar nästan alltid på att CSS-filer blockerar denna optimala laddningsordning. Och detta gäller även för webbplatser som redan har optimerats mycket bra(som fallet Caspar Hübinger visar). Trots detta kan tipset vara mycket värdefullt för optimering av laddningstiden. I grund och botten berättar denna ledtråd att JavaScript- eller CSS-kod som är viktig för att ett element ska kunna laddas - till exempel en bakgrundsfärg - ännu inte är tillgänglig vid den tidpunkt då elementet laddas. Detta innebär att det inte kommer att visas förrän motsvarande CSS-kommando har laddats. Detta ökar inte laddningstiden för din webbplats, men det påverkar användarupplevelsen, eftersom det känns som om webbplatsen tar längre tid att ladda.

Implementering: En vanlig lösning är att implementera en tumregel: CSS i sidhuvudet. Det innebär att du flyttar CSS-koden från HTML-dokumentets huvuddel, "body", till början av dokumentet, "head", och inkluderar den där som "style".

Det här exemplet visar tydligt vad jag menar. I kodavsnittet nedan definieras en bakgrundsfärg för en blogg. Elementet "style" laddas i HTML-dokumentets "head". På så sätt laddas inte sidans bakgrund i slutet av dokumentet och skapar ett fult färghopp eller till och med blockerar renderingen.

<head>
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #f5faff; }
</style>
</head>

Du kan genomföra denna optimeringsåtgärd på två sätt: Du kan själv ändra koden och flytta CSS-koderna till sidhuvudet, eller så kan du låta ett plugin göra jobbet.

Plugin Autoptimize, till exempel, tar ett allround-tillvägagångssätt: Här väljer du alternativ för alla CSS-filer som inte är undantagna från processen.

Det visar utdraget ur plug-in-alternativet: Även plug-in-varianten kan inte implementeras utan en grundläggande förståelse för processen. Därför måste du också bekanta dig med plugins.

"*" visar obligatoriska fält

Jag vill prenumerera på nyhetsbrevet för att få information om nya bloggartiklar, e-böcker, funktioner och nyheter om WordPress. Jag kan återkalla mitt samtycke när som helst. Observera vår integritetspolicy.
Det här fältet är avsett för validering och bör inte ändras.

Felmeddelande 3: Koda bilder effektivt

Även vid denna tidpunkt klagar PageSpeed Insights ofta runt. Detta fall är dock nästan alltid snabbt och enkelt att implementera och ger vanligtvis också påtagliga laddningstidsfördelar.

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

Betydelse: Många underskattar betydelsen av bildstorleken för laddningstiden på deras webbplats. Ändå är bilder ofta en av de största bromsklossarna för laddningstiden. Även om endast små mängder data sparas för enskilda bilder, kan den totala mängden sparad data uppgå till en avsevärd mängd data.

För en bild är sällan bara en bild. WordPress genererar automatiskt flera miniatyrbilder av bilden när du laddar upp. Så om du inte använder originalen på din hemsida, men mindre versioner av dem, dvs miniatyrbilder eller presenterade bilder, bör dessa naturligtvis också optimeras. En bild blir snabbt flera filer, vilket också innebär en flera datainläsningar.

Genomförande: I princip har du två alternativ för att optimera dina bilder. Antingen optimerar du bilderna före uppladdningen eller efter eller under uppladdningen. Den förra kan du göra via online- eller offlineverktyg, det senare gör du via motsvarande WordPress bildoptimeringsplugins.

Om du kan integrera komprimering i ditt arbetsflöde är det vettigt att optimera bilderna innan du laddar upp dem. För detta finns det onlineverktyg som Kraken.io. Eller så kan du minska kvaliteten och därmed filstorleken på dina bilder offline, t.ex. direkt i Photoshop. På så sätt slipper du extra plugin och din webbplats förblir slimmad.

Den bekvämare lösningen är naturligtvis ett plugin. Plugins som Optimus eller Smush optimerar inte bara huvudbilden, utan även alla varianter av den. Smush kan dessutom optimera alla dina befintliga bilder i efterhand.

Bland annat fungerar plugins med en så kallad "förlustfri komprimering". Detta innebär att bildernas filstorlek minskas, men deras synliga kvalitet minskar inte.

Felmeddelande 4: Aktivera textkomprimering

Detta felmeddelande från Google PageSpeed är mycket snabbt att åtgärda och kan avsevärt minska laddningstiden för din webbplats.

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

Betydelse: Du har redan minskat storleken på bilder och CSS på din webbplats så mycket som möjligt. Det är bra! Men det är inte allt. För nu kan du använda en annan komprimeringsmekanism. Du känner förmodligen till den här processen från nedladdning av stora datapaket: Vanligtvis har du dem i zippad, dvs. komprimerad, form. Det gör datan mindre och nedladdningen snabbare. Datapaketen måste dock fortfarande packas upp efter nedladdningen. Exakt samma sak händer när en sida laddas: Webbservern levererar datapaketen komprimerade, webbservern packar upp dem. Detta gör dataöverföringen snabbare och minskar sidans laddningstid.

Implementering: Antingen är datakomprimeringen redan inställd på servern eller så måste du aktivera den själv. Raidboxes Hos oss behöver du inte oroa dig för någonting. Vi har aktiverat den särskilt starkaBrotli-komprimeringen som standard.

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

<ifModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
 </ifModule>
 
 <IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 </IfModule>

Felmeddelande 5: Leverera statiskt innehåll med en effektiv cache-policy 

PageSpeed InsightsEnligt min mening är hänvisningen till webbläsarcachning den absolut mest irriterande i Google . Det beror på att du bara kan ställa in webbläsarcachning för dina egna resurser. För externa resurser är webbläsarcaching inte möjligt.

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

Betydelse: Browser caching innebär att webbläsaren sparar en statisk version av din webbplats och inte behöver begära den från webbservern när du besöker den igen, men webbplatsen är redan laddad.

Genomförande: Antingen har ditt webbhotell redan aktiverat webbläsarcache på serversidan, eller så kan du ställa in det genom att manipulera .htaccess-filen (kom ihåg: den här inställningen fungerar bara på Apache-webbservrar). Exempelkoden nedan ställer in webbläsarcachen på en månad, dvs. den statiska versionen av din webbplats lagras i besökarens webbläsare i en månad.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>

Raidboxes Följande gäller även här: Om du är kund är webbläsarens cachning redan aktiverad som standard.

Mina 2 cent: Utan cache är allt ingenting

Bra, nu har du optimerat bilderna på din webbplats, minskat CSS, komprimerat det och lagt det i rätt ordning och fått dina besökares webbläsare att cacha webbplatsen. Alla dessa åtgärder förkortar laddningstiden för din webbplats.

Betydelse: Utan en ordentlig cache ger du dock bort en stor del av denna potential. Cachning är och förblir den absolut viktigaste prestandafaktorn. En cache lagrar innehållet på din WordPress-webbplats temporärt och ser till att hela webbplatsen inte behöver laddas om varje gång. Istället levereras en statisk, dvs. redan renderad version av din webbplats från en cache. På så sätt kringgås den långsamma PHP och i synnerhet databasen.

Implementering: Antingen har ditt webbhotell redan skapat en cache på serversidan eller så använder du ett cache-plugin. Det finns några mycket kraftfulla plugins som cachar stora delar av din webbplats och leder till en betydande minskning av laddningstiden för återkommande besök på webbplatsen.

Den stora styrkan hos cachningsplugins är också deras största svaghet. Det kan mycket väl vara så att ett cachningsplugin i början gör din webbplats långsammare för förstagångsbesökare. För ju mer komplicerad din blogg eller webbplats är, desto mer komplicerad och omfattande måste cachemotorn som cachelagrar din blogg vara. Detta är särskilt relevant för butiker.

Om du driver en förhållandevis enkel webbplats kan minimalistiska lösningar vara bättre än cachelagring med allt-i-allo. Ett av dessa smidiga plugins är till exempel Cache Enabler.

Observera att cachningsplugins vanligtvis också tar över reduceringen och sammanslagningen av CSS eller JavaScript. Därför bör du kontrollera om ditt cachningsplugin inte redan gör pluginsen för CSS-optimering överflödiga.

Om du använder cachelagring på serversidan bör du avaktivera cachelagringsfunktionerna i plug-ins som Autoptimize eller testa om de ger några ytterligare prestandafördelar överhuvudtaget.

Slutsats: Flytta mycket med bara några plugins

Du har redan märkt det när du läser: För optimering av CSS, bilder och optimering av laddningsordningen finns det plugins som tar bort mycket arbete från dina händer. Men inte allt arbete. Caching-plugins ger också snabbt en märkbar effekt, men är ibland mycket omfattande och erbjuder många konfigurationsalternativ och ibland överflödiga funktioner.

I vilket fall som helst bör du titta närmare på de plug-ins du använder. Endast om du vet vad som händer när du använder vissa funktioner kan du optimera på ett förnuftigt sätt. Att överbelasta webbplatsen med optimeringsplugins brukar inte göra någon nytta.

Och när du optimerar bör du se till att mäta din framgång ordentligt. Det spelar ingen roll om du optimerar manuellt eller via ett plugin. PageSpeed Insights Använd som en första referenspunkt för att identifiera de svaga punkterna på din webbplats. Mät sedan laddningstiden för din webbplats före optimeringen. Först när du har registrerat utgångsläget är det verkligen meningsfullt att optimera din webbplats steg för steg. För det är först när du känner till laddningstiden före optimeringen och efter varje optimeringssteg som du kan avgöra vad de enskilda optimeringsåtgärderna har lett till.

Tyckte du om artikeln?

Med din recension hjälper du oss att förbättra vårt innehåll ytterligare.

En kommentar till"Tyst med Google PageSpeed! Fixa de viktigaste felmeddelandena"

  1. Hi Martin,
    du hast total Recht, dass es auf unserer Website noch einiges an Optimierungsbedarf gibt. Durch unseren Website Relaunch und unser Mehrsprachigkeitsplugin haben wir leider einige 404er und andere Errors, die Google zurecht schlecht bewertet. Wir sind aber dran 😁
    VG aus Münster
    Leefke

Skriva en kommentar

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