Share
Ce veți creaBine ați venit la cel de-al treilea tutorial despre optimizarea vitezei dvs. Google Page Speed. Pentru cei care nu știu, Google PageSpeed este un instrument gratuit care evaluează performanța și gradul de utilizare a site-ului dvs. web pentru platformele mobile și desktop. Este foarte important pentru că Google o folosește pentru a determina elementele cheie ale clasamentului SEO, adică cât de mari apar în rezultatele căutării.
Deci, webmasterii știu că este oarecum important să aibă un PageSpeed bun, deși există o dezbatere în acest sens. De exemplu, viteza paginii The New York Times este în prezent la 60 și 68 din 100.
În primul episod, te-am urmărit prin încercarea de a-mi îmbunătăți PageSpeed-ul cu o temă făcută de un furnizor defunct acum, Hands On Improving Google PageSpeed (Envato Tuts +). În cele din urmă, am ajuns la un PageSpeed pentru mobil de 70 și desktop 86.
În cel de-al doilea episod, mi-am făcut blog-ul un site dedicat dezvoltării și mi-am personalizat codul WordPress în moduri de a ajunge la PageSpeed 100 atât pe mobile, cât și pe desktop. Vedeți Optimizarea Google PageSpeed la 100 în WordPress (Envato Tuts +).
Și am avut succes pentru asta o dată:
Astăzi, vă voi spune mai multe despre experiența mea cu optimizarea PageSpeed și o alternativă mai puțin cunoscută de a face acest lucru singur, modulul PageSpeed propriu Google. Puteți să-l instalați pentru Apache și nginx.
PageSpeed se poate integra cu serverul Web Apache sau Nginx pentru a vă optimiza automat site-ul. - Google
Înainte de a începe, amintiți-vă, încerc să particip la discuțiile de mai jos. Dacă aveți o întrebare sau o sugestie de subiect, vă rugăm să postați un comentariu de mai jos sau să mă contactați pe Twitter @reifman. Sunt interesat de experiența dvs. cu WordPress și PageSpeed.
În cazul în care blogul meu a fost focalizarea mea pe întregul timp, atunci probabil că nu ar fi fost prea greu pentru a menține codul optimizat pentru PageSpeed ca plugin-uri WordPress și actualizări tematice au venit de-a lungul. Dar nu este. Și, sincer, menținerea acestei lucrări sa dovedit a fi prea consumatoare de timp.
Am dorit să mă întorc la vechile zile ale actualizărilor de pe mouse-clic.
De asemenea, am observat că, după ce am trecut la o nouă temă și mi-am optimizat pagina PageSpeed la 100, traficul a coborât și a rămas în jos. Desigur, aspectul tematic receptiv a avut ceva de-a face cu el, dar Google nu ma răsplătit niciodată pentru atingerea a 100 de pagini.
În mod similar, așa cum am discutat în Instalarea AMP în WordPress (Envato Tuts +), AMP a fost creat pentru a capta atenția editorilor media, dar nu adaugă prea mult editorilor mici. Google nu a oferit niciodată un trafic suplimentar pe blogul meu, după ce am oferit suport pentru AMP.
Așadar, am decis să renunț la focalizarea pe PageSpeed și să trec la o nouă temă care ar ajuta utilizatorii să navigheze mai ușor pe site-ul meu. De asemenea, am dezinstalat AMP pentru moment.
Părea ca o oportunitate perfectă de a dezactiva toate pachetele personalizate de JavaScript și CSS asociate și de a experimenta cu modulul PageSpeed al Google, care funcționează la nivelul serverului pentru a face acest lucru pentru dvs..
Practic, modulul PageSpeed Google automatizează multe dintre optimizările de performanță pe care le caută clasamentele PageSpeed. Și este disponibil pe serverele populare open-source Apache și nginx.
Modulul PageSpeed comprimă și combină fișierele incluse, cum ar fi foile de stil JavaScript și CSS, dar va înlocui, de asemenea, imaginile cu formate de fișiere comprimate, progresive (.webp).
După ce am instalat noua mea temă, am luat "înainte" instantanee ale scorului meu PageSpeed. Am primit un 83 pentru desktop:
Și un 64 mai mic pentru mobil:
Pentru acest tutorial, vă voi îndruma prin instalarea pentru Apache. Google oferă și instrucțiuni de instalare nginx.
Modulul PageSpeed nu este inclus în directoarele de pachete Ubuntu, deci trebuie să îl descărcați manual 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 Rezolvarea dl-ssl.google.com (dl-ssl.google.com) ... 74.125.22.136, 74.125.22.91, 74.125.22.190, ... Conectarea la dl -ssl.google.com (dl-ssl.google.com) | 74.125.22.136 |: 443 ... conectat. Cererea HTTP trimisă, așteptând răspunsul ... 200 OK Lungime: 7009850 (6.7M) [application / x-debian-package] Salvare la: 'mod-pagespeed-stable_current_amd64.deb' 100% [========== ================================================== ==============>] 7,009,850 38.6MB / s în 0.2s 2016-10-02 15:10:54 (38.6 MB / s) - 'mod-pagespeed-stable_current_amd64.deb' salvat [7009850/7009850]
Apoi, utilizați dpkg pentru a instala modulul:
$ sudo dpkg -i mod-pagespeed - *. deb Selectarea pachetului unselected anterior mod-pagespeed-stable. (Reading database ... 668500 fișiere și directoare instalate în prezent) Pregătirea pentru despachetarea mod-pagespeed-stable_current_amd64.deb ... Dezinstalarea mod-pagespeed-stable (1.11.33.2-r0) ... Configurarea mod-pagespeed-stable (1.11.33.2-r0 ) ... Activarea paginilor modulului. Pentru a activa noua configurație, trebuie să executați: restartarea serviciului apache2
Și, în sfârșit, apt-get -f install pentru a remedia orice dependențe:
$ sudo apt-get -f instalarea parolei [sudo] pentru ...: citirea listelor de pachete ... Terminarea construirii arborelui de dependență Citirea informațiilor de stare ... Terminate Următoarele pachete au fost instalate automat și nu mai sunt necesare: ca-certificates-java default-jre default- jre-headless fonts-dejavu-extra gconf-service gconf-service-backend gconf2 gconf2-comun icedtea-6-jre-cacao icedtea-6-jre-jamvm icedtea-netx libdyncns0 libatk -wrapper-java libatk-wrapper-java-jni ... openjdk-7-jre openjdk-7-jre-headless sunet-theme-freedesktop ttf-dejavu-extra tzdata-java Utilizați 'apt-get autoremove' 0 actualizate, 0 nou instalate, 0 pentru a elimina și 0 nu au fost actualizate.
Apoi, reporniți serverul Apache:
$ sudo service apache2 restart * Repornirea serverului web apache2
Anterior, am scris un post sponsorizat Accelerați livrarea conținutului cu KeyCDN și continuați să îl utilizați. Dacă utilizați un CDN pentru site-ul dvs., atunci trebuie să spuneți modulului PageSpeed despre el.
Iată cum puteți vizualiza și edita fișierul de configurare al modulului:
$ sudo nano /etc/apache2/mods-available/pagespeed.conf
Iată configurația de bază:
# Activați mod_pagespeed. Pentru a dezactiva complet mod_pagespeed, puteți # să-l setați pe "off". ModPagespeed on # Vrem ca VHosts să moștenească configurația globală. # Dacă acest lucru nu este inclus, ele vor fi independente (cu excepția opțiunilor globale inerent), cel puțin pentru compatibilitate înapoi. ModPagespeedInheritVHostConfig activat
Toate site-urile dvs. vor funcționa implicit. Dar trebuie să adăugați manual subdomeniile CDN:
# ModPagespeedDomain # autorizează rescrierea fișierelor JS, CSS și Image din acest domeniu #. În mod implicit, numai resursele cu aceeași origine ca și fișierul # HTML sunt rescrise. De exemplu: # # ModPagespeedDomain cdn.myhost.com # # Acest lucru va permite ca resursele găsite pe http://cdn.myhost.com să fie # rescrise în plus față de cele din același domeniu ca HTML. # # Alte directive referitoare la domenii (cum ar fi ModPagespeedMapRewriteDomain # și ModPagespeedMapOriginDomain) pot, de asemenea, să autorizeze domenii. # # Wildcards (* și?) Sunt permise în specificația domeniului. Fiți atenți atunci când le folosiți ca și cum ați rescrie domeniile care nu vă trimit # trafic, atunci site-ul care primește traficul nu va # cunoaște cum să difuzeze conținutul rescris. ModPagespeedDomain c? .Jeffreifman.com
CDN-urile mele sunt la c1-, c2-, c3- și c4- .jeffreifman.com, așa că am folosit o ? caracterul wildcard pentru a se referi la toate cele patru de mai sus.
Apoi, desigur, trebuie să reporniți din nou Apache, așa cum am făcut-o mai devreme.
Puteți verifica codul sursă pe site-ul dvs. pentru a vedea dacă modulul PageSpeed funcționează. Iată un exemplu din partea de sus a paginii la JeffReifman.com:
Observați că URL-ul src este acum:
568f4.js.pagespeed.jm.7B4hJGmADB.js
Iată o imagine mai mare, plasată manual (întâmplător una dintre anunțurile de la casa mea) pe care PageSpeed le transformă în .webp:
Toate acestea se întâmplă automat.
Modificări copleșitoare la PageSpeed
În ansamblu, rezultatele obținute în urma utilizării modulului PageSpeed au fost destul de copleșitoare. Am câștigat 4 puncte pe desktop și (mai bine) 8 puncte pe mobil.
Iată scorul după desktop:
Iată scorul după pentru mobil:
În încheiere
Dacă sunteți administrator de sistem, modulul PageSpeed Google va fi foarte util. Este complet configurabil și îl puteți personaliza într-o varietate de moduri, pentru un impact mai bun. Cu toate acestea, pentru dezvoltatorul mediu, am îndoieli cu privire la eficacitatea acestuia:
Mă bucur că Google oferă modulul și este proiectat să funcționeze în cadrul unor sisteme complexe, însă impactul său pentru administratorii de sisteme DIY de zi cu zi este limitat.
Dacă aveți întrebări, vă rugăm să le postați mai jos. Sau puteți să mă contactați pe Twitter @reifman. Vă rugăm să verificați pagina de instructor Envato Tuts + pentru a vedea alte tutoriale pe care le-am scris, cum ar fi Cloning WordPress în Linux (în 90 de secunde.) Și vă încurajez să verificați cele două serii de programare aici: Cum să programați cu Yii2 și construirea Pornire cu PHP.
Accentsconagua
