Share
Ce veți creaGoogle 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.
Dacă doriți mai multă informație despre avantajele vitezei sporite a site-ului, citiți Moz's De ce optimizarea vitezei site-ului ar trebui să fie parte a strategiei dvs. de SEO, care evidențiază: "... mai multe studii de caz au arătat că paginile de încărcare mai rapide se corelează cu veniturile mai mari".
În acest tutorial, vă voi trece prin câteva abordări tehnice pentru optimizarea paginii dvs. WordPress, PageSpeed. În timp ce schimbările de bază pot fi destul de simple și ușoare, actualizările mai cuprinzătoare pot fi destul de dificile.
Interesant este faptul că site-urile personalizate pot fi mai ușor de optimizat decât site-urile WordPress - este datorită utilizării extensive a temelor și pluginurilor de către terți. De asemenea, se bazează pe o arhitectură care a fost proiectată înainte de popularitatea sa și se bazează pe o arhitectură imperfectă pentru compatibilitate înapoi.
Î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.
Pentru acest tutorial, mă voi concentra pe îmbunătățirea site-ului personal, JeffReifman.com.
Într-un timp în urmă, PageSpeed a fost Mobile 65 și Desktop 64 - nu atât de grozav:
Notă: Iată articolul pentru a citi dacă sunteți curios amuzant screenshot mobil cu Russell Wilson.
Înainte de a începe să facem optimizări, hai să vorbim despre câțiva dintre factorii de bază WordPress de performanță.
Există câteva modalități majore de a începe să vă optimizați site-ul WordPress pentru performanță și pentru a mări PageSpeed.
Scopul PageSpeed al diferitelor teme este puternic afectat de numărul și mărimea fișierelor JavaScript și de CSS pe care le folosesc, numărul de imagini folosite și mărimea acestora și abordarea implementării mobile a acestora, adică de obicei receptive în zilele noastre.
Dacă vă aflați pe piață pentru o nouă temă WordPress și doriți să evaluați PageSpeed, puteți fi surprins de faptul că scorurile pentru teme bine-cunoscute se desfășoară adesea în anii 60 și 70, dar și până în anii 90. Iată câteva articole care evaluează temele și PageSpeed prin intermediul ColorLib și WPMU. În orice caz, m-am așteptat mai mult.
Am folosit tema My Site My Way pentru mai mulți ani. Interesant, site-ul de suport al companiei a mers recent, și nu au lăsat nici o explicație pentru utilizatori.
Cu toate acestea, pentru că nu vor mai exista actualizări ale temei, este puțin mai ușor pentru mine să fac modificări radicale în ceea ce privește performanța pentru acest tutorial, fără a fi nevoie să se ocupe de viitoarele actualizări de cod ale companiei. O să ajung la asta în curând.
Utilizarea serverelor dedicate va avea cel mai probabil performanțe mai bune decât servere virtuale partajate din ce în ce mai comune și mai accesibile. În trecut, am scris despre cum să instalați WordPress la furnizori partajați, cum ar fi Digital Ocean. Există, de asemenea, între servicii cum ar fi WP Engine, care oferă o atenție dezvoltatorilor și atât serverelor comune, cât și dedicate.
Calitatea gazdei va conta foarte mult. O mulțime de furnizori de WordPress distribuit pe oase goale poate oferi performanțe incoerente.
De exemplu, folosesc tema KnowHow pe ambele publicații cu WordPress găzduite la un server virtual Digital Ocean și Flee the Jungle găzduit la WP Engine. Locațiile sunt destul de similare în greutatea conținutului, de ex. utilizarea textului și imaginii. PaginaSpeed pentru publicare cu PageSpeed din WordPress este Mobile 73 și Desktop 88, în timp ce Flee the Jungle la WP Engine a fost un pic mai rapid (Mobile 78 și Desktop 91); WP Engine's managed hosting este un pic mai rapid decât autoportamentul meu cu un server partajat.
De asemenea, am văzut performanțe slabe cu hostingul low-end AWS de la Amazon. Primesti ceea ce platesti.
Caching-ul WordPress este esențial pentru performanță și am scris în mod regulat despre preferințele mele: W3TC și Vache Cache, de ex. Optimizarea WordPress cu lac și W3 Total Cache.
Un alt serviciu care este critic este o rețea de difuzare a conținutului. Anterior am scris despre Accelerarea livrării conținutului cu KeyCDN pentru Envato Tuts + și apoi am decis să trecem la ele.
Reducerea periodică a dimensiunilor și a mărimii fișierelor imaginilor din WordPress necesită mult timp și este critică.
Eu folosesc în mod regulat Acorn ca un instrument ușor pentru a scala rapid imaginile pentru web. Am ras cand cineva a facut recent tweeting ca tocmai a deschis Photoshop-ul si va fi disponibil pentru apeluri telefonice pentru o perioada in care a fost incarcat - Acorn este mic si rapid. Acest model de abonament Adobe este atât de lent pentru încărcare - îmi pare rău, abonaților.
Există, de asemenea, pluginuri automate de optimizare a imaginii, cum ar fi WP-Smush. Recent am inceput sa experimentez cu noul Optimus al KeyCDN. De asemenea, iată rezumatul WPMU al celor mai bune 10 pluginuri de optimizare a imaginii pentru a vă accelera site-ul WordPress.
Tot mai mult, accesez și imagini pe postul meu extern de pe Flickr. De exemplu, când postul meu despre creșterea cartierului Amazon din Seattle a devenit viral pe Slashdot, nu au existat probleme de performanță sau costuri de lățime de bandă pentru toate fotografiile, deoarece Flickr a tratat-o.
Puteți citi Ghidul de optimizare a imaginii Google PageSpeed, dar am constatat din ce în ce mai mult că ajutorul Google este orientat prea mult spre cercetare (ceea ce este frumos să aibă o resursă), dar nu este foarte util pentru rezolvarea problemelor pe cont propriu. Pot exista un număr prea mare de doctori și un număr prea mic de utilizatori efectivi.
În timp ce am avut întotdeauna W3TC și Varnish, adăugând KeyCDN și Optimus mi-a mărit pagina PageSpeed la Mobile 72 și Desktop 82, o îmbunătățire bună de la 65 și 64:
Interesant este faptul că plângerile Google privind stocarea imaginilor în cache par a fi pe termen nelimitat, indiferent de ce vă îmbunătățiți. Pentru acest tutorial, am experimentat optimizarea unora dintre infractorii rămași identificați pentru a vedea ce s-ar întâmpla. Rezultatul a fost interesant și îți voi spune mai multe despre el în curând.
Dacă ați făcut toate elementele de bază de mai sus, îmbunătățirea paginii dvs. PageSpeed cu WordPress se dovedește a necesita eforturi semnificative și poate dura destul de mult timp.
Un site static are, de obicei, un singur fișier cu CSS și JS include care poate fi ușor minificat și combinat. WordPress este mult mai complex.
Atât de mult este creat dinamic prin WordPress-ahem-mai puțin decât arhitectura perfectă. Poate fi nevoie de timp pentru a găsi unde sunt create fișierele, indiferent dacă acestea se află în temele sau pluginurile și cum să remediați aceste probleme. Se pare că atunci când aveți șapte pluginuri care includ fișiere JavaScript și doriți să le minimizați și să le combinați într-o singură includând în același timp permițând upgrade-uri obișnuite ale pluginurilor, este o provocare destul de mare.
Actualizarea setărilor mele miniatură W3TC HTML a rezolvat rapid reclamația PageSpeed despre asta.
Pentru CSS, a trebuit să adaug în mod individual fișierele pe care PageSpeed le-a alertat în legătură cu gestionarea fișierelor CSS a W3TC. W3TC a început apoi să minimeze CSS-ul meu și să combine fișierele numite într-un singur fișier pentru a include.
Această cerință de minimizare a CSS a site-ului.
De asemenea, a fost redus numărul de fișiere CSS care au fost raportate pentru blocarea renderei de la șapte la patru fișiere legate de tema (listate mai întâi sub Optimizarea livrării CSS):
Cele trei fișiere rămase au fost din directoarele plugin-urilor din afara temei mele (pe care o vom explora mai târziu):
Sper că acest lucru vă oferă un sentiment al gaurii iepurelui că optimizarea WordPress PageSpeed devine repede.
În timp ce minimizarea și fuzionarea CSS este, în general, destul de ușoară, JavaScript tinde să eșueze mult atunci când încercați să faceți acest lucru, creând bug-uri importante.
Interesant este faptul că PageSpeed oferă acum descărcări complete ale versiunilor comprimate ale fișierelor pe care nu le place.
S-a enumerat zece dintre fișierele mele JS pe care dorea să le reparăm:
Pentru referință, aici sunt mai multe resurse de minimizare pentru HTML, CSS și JS ale Google PageSpeed. De asemenea, am folosit Refresh SF, care oferă acces ușor la web la diverse instrumente de compresie.
Comprimarea și combinarea JavaScript poate crea cu siguranță bug-uri, așa că a trebuit să iau lucrurile pas cu pas. Folosind JS File Management W3TC, am miniat și combinat cele șapte fișiere JS din tema Construct:
Acest lucru nu mi-a permis să mă adresez fișierelor JS ale plugin-urilor mele sau problemele pe care le văzusem cu un fișier base.js găzduit misterios. Să trecem la problemele de Render Blocking și apoi să ne întoarcem la minifierea JS după.
Dacă aveți o mare varietate de fișiere care trebuie să fie încărcate în stil (CSS) și să activați (JS) funcționalitatea paginii dvs. web, majoritatea browserelor vor încetini după ce patru resurse sunt solicitate în paralel.
Iată un exemplu de reclamație privind blocarea reclamei CSS în PageSpeed:
În timp ce W3TC combinase multe dintre ele în include.c46b63.css, următoarele trei au fost de la pluginurile mele.
Blogger-ul Justin Tadlock a oferit niște îndrumări care explică cum să ceară WordPress să nu încarce fișierele CSS pe care pluginurile mele le-au încărcat pentru încărcare. Răspunsul este să le deregistrezi și apoi să încarci un fișier combinat pe cont propriu.
Iată pluginul meu de Cuprins care enumeră fișierele JS și CSS:
Accentsconagua
/ ** * Înregistrați și încărcați fișierele CSS și javascript pentru frontend. * / funcția wp_enqueue_scripts () $ js_vars = array (); // înregistrați CSS și scripturile wp_register_style ('toc-screen', $ this-> cale. '/screen.min.css', array (), TOC_VERSION); wp_register_script ('toc-front', $ this-> cale. '/front.min.js', array ('jquery'), TOC_VERSION, true); // enqueue them! dacă (! $ this-> options ['exclude_css']) wp_enqueue_style ("toc-screen"); dacă ($ this-> options ['smooth_scroll']) $ js_vars ['smooth_scroll'] = adevărat; wp_enqueue_script ("toc-front");După sugestia lui Tadlock, am deregistrat plugin-ul meu include în funcțiile temei my.php, mai întâi CSS - trebuie să găsești referințele utilizate de dezvoltatorul plugin-ului:
add_action ('wp_print_styles', 'my_deregister_styles', 100); funcția my_deregister_styles () wp_deregister_style ('toc-screen'); wp_deregister_style ('blogsynthesis_jss_css'); wp_deregister_style ('stiluri edd'); Am creat manual o combinație de fișiere CSS cu aceste trei stiluri de plugin-uri. Apoi, l-am rugat pe W3TC să minimalizeze și să combine acel fișier în propria foaie de mega-stiluri:
Există o problemă majoră aici, când când actualizez pluginurile mele, poate fi necesar să actualizez acest fișier CSS combinat și fișierele JS însoțitoare.
Iată un post pe blog cu alte abordări pe care le puteți folosi pentru aceste provocări.
Folosind abordarea lui Tadlock, iată cum arată aspectul de blocare al PageSpeed după aceea:
Am urmat aceiași pași pentru fișierele JS, doar puțin mai atent. Treptat, reclamația JS a lui PageSpeed pentru site-ul meu a devenit destul de mică:
Cu toate acestea, după cum puteți vedea mai jos, se plânge, de asemenea, despre problemele legate de cache-ul browserului cu fișierele JS pe care nu le-am putut găsi în codul meu, cum ar fi ad_status.js de la Doubleclick.
Îndepărtarea unui embedded player YouTube legacy
În cele din urmă, mi-am dat seama că atât problema minimizării JS, cât și problema de caching se refereau la utilizarea de către mine a unui player video extern YouTube.
În timp ce eram curios să încerc o mică remediere sugerată aici pentru a împiedica încărcarea videoclipului fără acțiunea utilizatorului, am decis să eliminăm videoclipul din slideshow-ul paginii de pornire.
Este foarte probabil că modul în care tema mea Construct a încorporat fișiere YouTube a fost o soluție moștenită. Suportul HTML5 al YouTube poate funcționa mult mai bine acum. Cu toate acestea, este cam amuzant cum impactul unui serviciu Google afectează performanța unui alt serviciu Google.
Îndepărtarea uneia dintre funcțiile din pagina mea de pornire care încorporează un videoclip YouTube a rezolvat câteva probleme:
Deoarece nu vreau să pierdeți că ați văzut jumătatea mea mai bună înainte de a fi corupt de WordPress, voi include videoclipul aici. Am fost un tip drăguț.
Iată ce se întâmplă:
După ce s-au efectuat modificările JS anterioare și s-a eliminat videoclipul, problema de minimizare a JavaScript a fost rezolvată pentru maestrul meu PageSpeed:
Eroarea de cache a browserului cu DoubleClick afișată mai jos a dispărut.
Acum, de fapt, am nevoie doar de cache-ul gpt.js și ga.js, alte două servicii Google găzduite extern:
Acest lucru sa dovedit a fi un obstacol destul de mare și a necesitat o mare complexitate pentru a rezolva pe deplin aceste probleme. Cea mai bună soluție este găzduirea la nivel local a unei copii a scripturilor Google pentru Google Analytics și DFP și utilizarea scripturilor cron pentru a le actualiza în mod regulat pe serverul dvs. Alice a început să se plictisească cu mine - sper că încă mai urmărești.
M-am uitat la alte teme pe care le folosesc cu pluginul Google Analytics (Construct are setări pentru Google Analytics) și nici nu au abordat acest lucru.
Deci, am făcut copii locale ale scripturilor pentru Google Analytics și Google DFP, iar la scurt timp după aceea, cache-ul meu de browser a fost rezolvat în PageSpeed:
Iată mai multe informații de la Google în browserul Caching, din nou o resursă tehnică foarte profundă fără prea multe îndrumări pentru administratorii WordPress.
Google ar putea oferi grupări comune ale fișierelor JavaScript populare miniaturi și combinate pentru a sprijini mai bine PageSpeed-ul editorilor. Ar fi de ajutor și în cazul în care nu ar fi încărcat fișierele lor individual și obscur în scripturi.
Să revenim pe scurt la plângerile referitoare la mărimea imaginii de tip PageSpeed înainte de încheierea procesului.
Sugestiile imaginii Google PageSpeed pot slăbi efectiv gradul de utilizare al site-ului dvs. Iată un exemplu, o imagine prezentată pe care am găzduit-o în pagina mea de pornire.
Pentru ca postările mele să apară pe Facebook cu o imagine miniaturală, rețeaua socială necesită dimensiuni minime de 200 de pixeli pe partea cea mai scurtă. Versiunea mea este de 281 x 200 (afișat aici ușor ajustat pentru cerințele Tuts +):
Și, iată versiunea furnizată de PageSpeed în descărcarea de pe zip:
Puteți vedea că calitatea este chiar mai proastă, dar, mai important, PageSpeed vrea să mă răsturna imaginea la o dimensiune pe care Facebook nu ar accepta să o arate în postările sale.
În cele din urmă, am ales să părăsesc site-ul meu cu o mână de plângeri de optimizare a imaginii prin PageSpeed, scăzând scorurile mele.
După toate aceste lucrări, unde a ajuns site-ul meu??
Scorurile finale ale paginii incluse includ Mobile 70, care arată unele dintre plângerile rămase de mai jos:
Iată optimizările de imagine rămase:
Iată un rezumat al tuturor regulilor:
De asemenea, aici sunt scorurile finale UX. Majoritatea site-urilor nu au mari probleme cu acestea, așa că nu le-am abordat astăzi:
Scorul final al calculatorului a fost de 86, nu rău:
JavaScript este înșelător. Niciodată nu am reușit să minifrez și să combin cu succes ultimele două fișiere în prima. Chiar lăsându-le necomprimate nu au funcționat niciodată. Lucrul cu temele și pluginurile este greu. Ar fi fost nevoie de câteva zile de muncă dedicată pentru a rezolva acest lucru.
Iată detaliile privind dimensiunea fișierului imaginii:
În cele din urmă, optimizarea paginii mele PageSpeed a avut mult timp și efort și a lăsat site-ul meu vulnerabil la plugin-ul viitor și la actualizările de script Google. O mulțime de lucruri sunt destul de confuze, orientate spre detalii și consumatoare de timp. Este, de asemenea, un pic nebun-making și mintea-numbing. Mulțumesc Google.
PageSpeed nu este totul. Conținutul contează prea. Iată câteva site-uri bine cunoscute și pagina lor de pagini. Rezultatele te vor surprinde.
Daring Fireball (DF) este unul dintre cele mai rapide blog-uri concentrate pe conținut. Promovează agenții de publicitate într-un mod minim. Paginile rulează ușor și rapid. Gruber's CMS este o versiune personalizată a tipului Movable. Scorurile sunt doar un pic mai bune decât site-ul meu. DF generează, de asemenea, o tona de venit cu o publicitate minimă.
Evident, o organizație de știri majoră, au scoruri teribile ale PageSpeed:
În mod surprinzător, cârpul nostru local, cu modelul său îngrozitor de publicitate și abonament, este mult mai rău:
Un site popular de e-commerce, B & H Photo, are un scor mobil teribil și un scor pe desktop chiar sub a mea:
S-ar putea să fi auzit de această companie în eseul meu recent Cum să faci site-uri WordPress diferite de geografie-ei vinde o mulțime de lucruri online. Scorurile mele pentru PageSpeed sunt semnificativ mai mari decât ale lor:
În viitor, mă voi uita la câteva îmbunătățiri pentru a îmbunătăți PageSpeed-ul site-ului meu:
Dacă nu migrez temele în scurt timp, va trebui să pun în aplicare acel script cron pentru a sincroniza scripturile Google găzduite de Google Analytics și DFP și să îmi dau seama cum să monitorizez actualizările pluginurilor pentru modificările JS și CSS. S-ar putea să trebuiască să revin aceste câștiguri specifice ale paginii, sincer.
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ă consultați pagina de instructor Envato Tuts + pentru a vedea alte tutoriale pe care le-am scris, cum ar fi seria de pornire (Building Your Startup With PHP).
