Välkommen till min tredje handledning om hur du optimerar din Google Page Speed. För de som inte vet är Google PageSpeed ett gratis verktyg som bedömer prestandan och användbarheten för din webbplats för mobila och stationära plattformar. Det är extra viktigt eftersom Google använder det för att bestämma viktiga delar av vår SEO-rankning, dvs hur hög vi visas i sökresultaten.
Så webmasters vet att det är något viktigt att ha en bra PageSpeed, även om det finns debatt över detta. Till exempel är New York Times sidhastighet 60 och 68 av 100.
I det första avsnittet gick jag igenom dig genom att försöka förbättra min PageSpeed med ett tema som gjorts av en nu avvecklad leverantör, Hands On Improving Google PageSpeed (Envato Tuts +). I slutändan gjorde jag det till en PageSpeed för mobil på 70 och skrivbordet 86.
I det andra avsnittet gjorde jag min blogg en fokuserad utvecklingswebbplats och anpassade min WordPress-kod på sätt att nå PageSpeed 100 på både mobil och skrivbord. Se Optimera Google PageSpeed till 100 i WordPress (Envato Tuts +).
Och jag lyckades med det här en gång:
Idag kommer jag att berätta mer om min erfarenhet av PageSpeed-optimering och ett mindre känt alternativ till att göra det själv, Googles egen PageSpeed-modul. Du kan installera den för Apache och nginx.
PageSpeed kan integrera med din Apache eller Nginx webbserver för att automatiskt optimera din webbplats. - Google
Innan vi börjar, kom ihåg, jag försöker delta i diskussionerna nedan. Om du har en fråga eller ett ämnesförslag, vänligen skriv en kommentar nedan eller kontakta mig på Twitter @ reifman. Jag är intresserad av din erfarenhet av WordPress och PageSpeed.
Om min blogg var min heltidsfokus, kanske det inte skulle ha varit för svårt att behålla den optimerade koden för PageSpeed som WordPress-plugin uppdateringar och teman uppdateringar kom med. Men det är inte. Och uppriktigt sagt var detta arbete alltför tidskrävande.
Jag längtade efter att återvända till de gamla dagarna med uppdateringar av musklick.
Jag märkte också att när jag bytte till ett nytt tema och optimerade min PageSpeed till 100, gick trafiken faktiskt ner och stannade nere. Visst, den responsiva tematlayouten hade något att göra med det, men Google belönade mig aldrig för att nå 100 PageSpeed.
På samma sätt, som jag diskuterade i Installera AMP i WordPress (Envato Tuts +), skapades AMP för att fånga uppmärksamhet från medieförlag, men lägger inte mycket till för små utgivare. Google gav aldrig ytterligare trafik till min blogg efter att jag tillhandahöll AMP-support.
Så jag bestämde mig för att lägga ner mitt fokus på PageSpeed och byta till ett nytt tema som skulle hjälpa användarna att navigera på min sida lättare. Jag har också avinstallerat AMP för tillfället.
Det verkade som det perfekta tillfället att avaktivera alla mina anpassade JavaScript- och CSS-buntningar och experimentera med Googles PageSpeed-modul, som fungerar på servernivå för att göra det för dig.
I grund och botten automatiserar Google PageSpeed-modulen många prestationsoptimeringar som dess PageSpeed-rankningar söker efter. Och den är tillgänglig på populära open source-servrar Apache och nginx.
PageSpeed Module komprimerar och kombinerar inkluderade filer som JavaScript och CSS stylesheets men kommer också att ersätta bilder med komprimerade, progressiva filformat (.webp).
Efter att ha installerat mitt nya tema tog jag "för" snapshots av min PageSpeed-poäng. Jag fick en 83 för skrivbordet:
Och en lägre 64 för mobil:
För denna handledning guidar jag dig genom installationen för Apache. Google erbjuder också nginx installationsinstruktioner.
PageSpeed-modulen ingår inte i Ubuntu-paketkataloger, så du måste manuellt ladda ner den via wget
:
$ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb --2016-10-02 15: 10: 54-- https://dl-ssl.google .com / dl / linux / direct / mod-pagespeed-stable_current_amd64.deb Lösning dl-ssl.google.com (dl-ssl.google.com) ... 74.125.22.136, 74.125.22.91, 74.125.22.190, ... Anslutning till dl -ssl.google.com (dl-ssl.google.com) | 74.125.22.136 |: 443 ... ansluten. HTTP-förfrågan skickad, väntar på svar ... 200 OK Längd: 7009850 (6.7M) [application / x-debian-paket] Spara till: 'mod-pagespeed-stable_current_amd64.deb' 100% [========== ================================================== ========] 7,009,850 38,6MB / s i 0,2s 2016-10-02 15:10:54 (38,6 MB / s) - 'mod-sidespeed-stable_current_amd64.deb' sparad [7009850/7009850]
Använd sedan dpkg
för att installera modulen:
$ sudo dpkg -i mod-sidespeed - *. deb Väljer tidigare ej valt paket mod-sidespeed-stable. (Läsdatabas ... 668500 filer och kataloger som för tillfället installeras.) Förberedelser för att packa upp mod-sidespeed-stable_current_amd64.deb ... Packa upp mod-sidospetsstabila (1.11.33.2-r0) ... Ställa in modspeglingsstabil (1.11.33.2-r0) ) ... Aktivera sidor för moduler. För att aktivera den nya konfigurationen måste du köra: service apache2 omstart
Och slutligen, apt-get -f installera
för att åtgärda eventuella beroenden:
$ sudo apt-get -f installera [sudo] lösenord för ...: Läsning av paketlistor ... Klar Building dependence tree Uppläst tillståndsinformation ... Klar Följande paket installerades automatiskt och behövs inte längre: ca-certificates-java default-jre default- jr-huvudlösa teckensnitt-dejavu-extra gconf-service gconf-service-backend gconf2 gconf2-vanlig icedtea-6-jakacacao icedtea-6-jre-jamvm icedtea-netx icedtea-netx-vanlig java-vanlig java-wrappers libasyncns0 libatk -wrapper-java libatk-wrapper-java-jni ... openjdk-7-jre openjdk-7-jre-headless ljudtema-freedesktop ttf-dejavu-extra tzdata-java Använd 'apt-get autoremove' för att ta bort dem. 0 uppgraderad, 0 installerad, 0 för att ta bort och 0 inte uppgraderad.
Starta sedan Apache-servern igen:
$ sudo service apache2 omstart * Starta om webserver apache2
Tidigare skrev jag ett sponsrat inlägg Accelerera ditt innehållsleverans med KeyCDN och använd det fortfarande. Om du använder en CDN för din webbplats måste du berätta för sidanSpeed-modulen om den.
Så här visar och redigerar du modulens konfigurationsfil:
$ sudo nano /etc/apache2/mods-available/pagespeed.conf
Och här är den grundläggande konfigurationen:
# Slå på mod_pagespeed. För att helt avaktivera mod_pagespeed kan du # ställa in detta till "av". ModPagespeed på # Vi vill att VHosts ska få en global konfiguration. # Om detta inte ingår kommer de att vara oberoende (utom för iboende # globala alternativ), åtminstone för bakåtkompatibilitet. ModPagespeedInheritVHostConfig på
Alla dina webbplatser fungerar som standard. Men du måste lägga till CDN-underdomänerna manuellt:
# ModPagespeedDomain # tillåter omskrivning av JS, CSS och bildfiler som finns i denna # domän. Som standard skrivs endast resurser med samma ursprung som # HTML-filen. Till exempel: # # ModPagespeedDomain cdn.myhost.com # # Detta gör att resurser som hittades på http://cdn.myhost.com kan skrivas # omskrivna utöver dem som är i samma domän som HTML. # # Andra domänrelaterade direktiv (som ModPagespeedMapRewriteDomain # och ModPagespeedMapOriginDomain) kan också godkänna domäner. # # Vykort (* och?) Är tillåtna i domänspecifikationen. Var # försiktig när du använder dem som om du skriver om domäner som inte # skickar trafik, då kommer webbplatsen som tar emot trafiken inte # att veta hur man tjänar det omskrivna innehållet. ModPagespeedDomain c? .Jeffreifman.com
Mina CDN är på c1-, c2-, c3- och c4- .jeffreifman.com, så jag använde en ?
jokertecken tecken att referera till alla fyra ovan.
Då måste du naturligtvis starta Apache igen, som vi gjorde tidigare.
Du kan kolla källkoden på din webbplats för att se om PageSpeed-modulen fungerar. Här är ett exempel från början av sidan på JeffReifman.com:
Observera att URL-adressen är nu:
568f4.js.pagespeed.jm.7B4hJGmADB.js
Här är en större, manuellt placerad bild (för övrigt en av mina husannonser) vilken PageSpeed konverterar till .webp:
Allt detta händer automatiskt.
Underwhelming Changes to PageSpeed
Sammantaget var resultaten från att använda PageSpeed-modulen underväldigande på egen hand. Jag fick 4 poäng på skrivbordet och (bättre) 8 poäng på mobilen.
Här är efter poängen för skrivbordet:
Här är efterföljande poäng för mobilen:
I stängning
Om du är systemadministratör kommer Google PageSpeed-modulen att vara till stor hjälp. Det är fullt konfigurerbart, och du kan anpassa det på olika sätt för bättre inverkan. Men för den genomsnittliga utvecklaren tvivlar jag på dess effektivitet:
Jag är glad att Google erbjuder modulen, och den är utformad för att fungera inom komplexa system, men dess inverkan för dagliga DIY systemadministratörer är begränsad.
Om du har frågor, vänligen posta dem nedan. Eller du kan kontakta mig på Twitter @ reifman. Vänligen kolla in min Envato Tuts + instruktörssida för att se andra handledningar jag har skrivit, till exempel Kloning WordPress på Linux (på 90 sekunder.) Och jag uppmanar dig att kolla in mina två programmeringsserier här: Hur man programmerar med Yii2 och bygger din Starta med PHP.