Share
Ce veți creaBine ați venit în partea a doua a seriei noastre pe Google PageSpeed. În primul episod, am optimizat pagina PageSpeed a temei site-ului meu, MySiteMyWay's Construct. Am reușit să ajung la 70 Mobile și 86 Desktop.
Cu toate acestea, odată cu închiderea MySite, am ales o temă nouă și am ajuns la un 100 PageSpeed pentru mobil și desktop. Mi-a luat aproximativ 12 ore de efort suplimentar pentru a realiza acest lucru. Acum, performanța site-ului meu este unul dintre cele mai rapide site-uri WordPress pe care le-am văzut de multă vreme - verificați-l. Navigarea este aproape instantanee.
În acest tutorial, vă voi învăța cum am realizat acest lucru și ce am învățat despre WordPress și Google PageSpeed. În cea mai mare parte a zilei în care am lucrat, m-am gândit că s-ar putea să mă descurc în anii '90. Am fost surprins un pic când a sărit brusc la 100 pentru Desktop - și au rămas doar câteva detalii pentru a maximiza Mobile.
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.
Dacă doriți mai multe fundaluri despre beneficiile creșterii vitezei site-ului, citiți Moz's De ce optimizarea vitezei site-ului ar trebui să facă parte din strategia SEO. Se subliniază că "... mai multe studii de caz au arătat că paginile de încărcare mai rapide se corelează cu veniturile mai mari".
Î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.
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, inclusiv 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 plugin-urilor, este o provocare destul de mare în lumea WordPress de schimbare continuă a temelor și pluginurilor.
Acest lucru face o mulțime de dezvoltatori trist:
Image credit: Fotografia mea de la Picasso Museo din Paris. Ar putea fi acum numit "Dezvoltator tare confruntandu-se cu viteza PageSpeed Mobile 55 / Desktop 62"
Acestea fiind spuse, permiteți-mi să vă încurajez prezentând modul în care am făcut-o (nu aveți nimic de făcut astăzi, nu?). Rețineți că nevoile site-ului dvs. pot diferi puțin de a mea.
Î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.
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.
Ca un exemplu de așteptări din industrie, site-ul Web al New York Times scor 53/55 pentru mine, mult sub 100.
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 utilizate și mărimea acestora și abordarea implementării mobile a acestora, adică, de obicei, receptive în zilele noastre. Unii creatori nu par să se uite la viteza lor de pagină pe măsură ce construiesc.
Pentru acest tutorial, mă voi concentra pe îmbunătățirea site-ului personal, JeffReifman.com. Am ales Medium by Array Topics pentru câteva motive.
Prima a fost viteza de bază. Rezultatele medii Mobile 74 și Desktop 89 pentru a porni de la serverul demo. În timp ce acest lucru era deja puțin mai bun decât cel pe care l-am construit la maxim, era o temă mai modernă și au existat o mulțime de pași de optimizare rămași pe care aș putea încerca. Speram să aducem PageSpeed în anii 80 sau 90.
De asemenea, având în vedere creșterea numărului de cititori mobili, am vrut să mă deplasez de la utilizarea barelor laterale - în special pentru plasarea publicitară (Sper să scriu despre noile mele direcții de venit în cadrul nostru seria DFP Google). Tema Medie face o treabă bună de a plia bara laterală din stânga într-un meniu receptiv și a ascunde bara laterală dreaptă.
Aici a fost inițial PageSpeed pentru demo-ul Medium (demo hostingul nu este niciodată bine optimizat). De fapt, a fost încurajator să văd că a avut o mulțime de probleme neadresate, deoarece a arătat că era mai bine decât Constructul meu optimizat înainte de a fi aplicat efort suplimentar și sarcini similare pe care am știut să le efectuez pentru a maximiza scorul:
Iată mai multe aspecte:
Și altele:
Și provocările utilizatorului experiență, care au fost mai localizate:
În cele din urmă, aici este scorul său Demo Desktop:
Încurajată de scorul fundației, am cumpărat și instalat tema Medium pe serverul meu și am ajuns să lucrez.
Rețineți că schimbarea temelor poate fi destul de complicată. Pentru mine, înlocuirea, eliminarea și actualizarea codurilor scurte încorporate din tema Construct au avut cel mai mult timp, și nu am făcut-o complet, de ex. dropcaps, variații, butoane, file și meniuri de navigare bazate pe pagină. Călătoria mea pentru 100 ma împins să-mi dau drumul înainte, indiferent. Cum de a efectua căutare în masă și înlocuire în WordPress oferă câteva soluții bune pentru găsirea și înlocuirea codurilor scurte.
În timp ce acest tutorial nu vă va ghida prin pașii exacți pentru creșterea paginii dvs. de pagină cu până la 100 de pagini, vă va ghida prin multe soluții posibile și veți identifica blocajele comune. Există o altă mare resursă generalizată pe care o voi împărtăși la sfârșit.
Am contactat ArrayThemes un pic despre performanța demo sub-100 a temei Medium. Ei au trimis un răspuns excelent:
Testul de optimizare PageSpeed ar trebui să fie luat cu un șir de sare ... demo-ul nostru este dinged pentru că nu caching-ul, dar nu avem de fapt nevoie de caching pe demo-urile noastre ... Sugestiile PageSpeed nu sunt exacte sau exemplificatoare ale performanței unei teme. Aceasta va depinde în întregime de configurarea, serverul, cache-ul și alte optimizări pe care vă decideți să le faceți.
Acesta este un punct de lansare perfect pentru a revizui elementele fundamentale comune pentru performanța WordPress. Toate domeniile de performanță de mai jos se referă la scorurile subiacente ale paginii, nu complet, ci la elementele de bază.
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.
Se pare că există o mână de plugin-uri concepute pentru a vă ajuta să faceți față provocării unei cache-uri eficiente. Iată două dintre cele mai bune pe care le-am încercat:
Creditul imagine: WordPress Tavern
Ambele au fost de ajutor, dar nici măcar nu am eliminat barierele legate de PageSpeed, cum ar fi încorporarea CSS în interiorul meu etichetă pentru a elimina problemele de PageSpeed; cu alte cuvinte, acest plugin nu va ajunge probabil până la 100 de pagini. Mi-am găsit Minifiantul de dependență ca fiind eficient și de ajutor, dar lipsa mea de flexibilitate ma făcut să plec.
În cele din urmă, m-aș întoarce în mod repetat la W3 Total Cache și găsesc noi modalități mai puternice de ao apăsa pentru performanță. Nu este perfectă și cu siguranță are unele bug-uri UX, a funcționat bine în moduri suficiente pentru ca mine să-mi găsesc calea cu alte abordări ale PageSpeed 100.
În cele din urmă, am ales doar un plugin nou care a facilitat eliminarea problemelor de la PageSpeed cu Disqus-Voi examina mai departe mai jos.
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 la Envato Tuts + și apoi am decis să trecem la ele ca pe un client.
În cele din urmă, există o varietate de CDN-uri pe care le puteți alege, cum ar fi CloudFlare și RackSpace pentru a numi câteva.
Recent am inceput sa experimentez noul serviciu Optimization de optimizare a imaginilor si pluginul WordPress de la KeyCDN. Există o mică posibilitate pe care o conduc roboții construiți cu vechile Apple Lisas și Mac:
Funcționează bine, dar o altă alternativă populară este WP-Smush, un plugin mai vechi, cu peste 300.000 de utilizatori.
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:
Acest lucru poate fi un element WordPress greu de eliminat datorită temei și arhitecturii pluginului. Vom reveni la asta.
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.
Să mergem pas cu pas prin domeniile problematice identificate și prin căile pe care le-am rezolvat. În adevăr, am făcut o mare varietate de experimente cu diferite instrumente și abordări. Am renunțat în mod regulat la o abordare și am revenit la alta. Soluția mea sa dovedit a fi o grămadă de soluții bine gestionate. Calea nu era direct Yoda.
De exemplu, iată cum minimalizați codul HTML în W3 Total Cache:
În mod similar, este ușor să minimizați JavaScript în W3 Total Cache. Rețineți mai jos că instruiesc W3TC să încorporeze fișierul comprimat care nu este în ci mai degrabă înainte . Întârzierea JavaScript poate îmbunătăți scorul dvs. de PageSpeed.
Deoarece ambele teme și pluginuri utilizează JavaScript și CSS, este nevoie de un pic de lucru pentru a le minimiza împreună și a le combina într-un singur fișier (și acest lucru nu este suficient pentru PageSpeed, despre care voi discuta mai jos).
Pentru a bloca pluginurile de la încărcarea propriului CSS și pentru a instrui W3TC să încarce versiuni combinate și combinate, trebuie să găsiți mânerul pluginului pentru fișierul CSS (diferit de numele de fișiere) și să adăugați codul temei pentru a întrerupe instrucțiunile de încărcare a pluginului. Apoi, introduceți calea către fiecare fișier CSS din caseta de dialog W3TC de mai sus pentru a fi încărcată cu celelalte.
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 funcțiile din tema mea, începând cu 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'); 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, după cum se arată mai sus.
W3TC poate combina toate temele mele și fișierele plugin, dar PageSpeed încă nu le place să vadă chiar și un CSS (atât de mult pentru practicile bune de dezvoltare HTML):
Am încărcat în cele din urmă nouă fișiere CSS (doar șapte arătat mai jos). În primul rând, trebuie să găsiți mânere de plugin pentru CSS și să le dezarhivezi în tema dvs., așa cum este descris mai sus. Apoi, trebuie să le indicați pe toți la W3TC.
În timp ce există mai multe modalități de a obține o versiune minimizată a tuturor acestor elemente, de fapt, am apucat doar fișierul comprimat al W3TC. Am eliminat toate argumentele interogării de cache, de ex. ?cbe3w2, cu căutare și înlocuire în TextEditor. Sunt încă un utilizator loial TextMate, dar de fapt a avut întârzieri uriașe și se blochează ori de câte ori am încercat să navighez un fișier CSS miniaturizat. Deci TextEditor ma ajutat să editez individual aceste fișiere. Îmi cer scuze la puristi, nu m-am mutat încă la Sublime.
În timp ce a lucrat pentru mine să-mi lipesc CSS miniaturi în antetul meu, mai târziu am trebuit să-l schimbe pentru a obține dinamic conținutul fișierelor CSS și pentru a le echivala în loc.
Odată ce am adăugat un alt plugin pentru partajare socială, pastrarea nu mai funcționa și a trebuit să despart fișierele de mecanismul de mai sus. Acest lucru oferă, de asemenea, o mai mare flexibilitate pentru viitor. Google PageSpeed nu vede niciodată acest lucru, iar memoria cache a Lacului meu ascunde orice încetinire a includerii a două fișiere.
În cele din urmă, am configurat toate fișierele mele CSS în W3TC, am făcut copii ale fișierelor comprimate și apoi am dezactivat această caracteristică include:
Unul dintre neajunsurile W3TC este că acesta afișează în mod repetat mesaje de eroare enervante, chiar dacă îl folosiți în mod deliberat într-un mod neobișnuit.
Atunci când mutați fișierele CSS din directoarele plugin-urilor, asigurați-vă că setați căi relative corecte la imagini și așa mai departe pentru a operează din directorul rădăcină al site-ului. Am avut o mulțime de situații în care imaginile nu s-ar fi încărcat până nu am găsit unde să rezolv aceste lucruri. Voi împărtăși un exemplu în Depanare mai jos.
Cu amabilitate, PageSpeed de Google se plânge dacă încărcați din bibliotecile JavaScript extern. Am primit demersuri pentru scripturile externe legate de Flickr, Disqus și Google Analytics:
Acest lucru sa dovedit a fi un obstacol destul de mare și necesită mult timp și complexitate pentru a rezolva pe deplin aceste probleme.
În primul rând, m-am întors recent de la o excursie în India și am plasat postări individuale pe blog cu fotografii încorporate în Flickr pe pagina de pornire. Tema mea medie se derulează rapid prin mai multe postări, astfel încât PageSpeed sa plâns de toate.
După ce am observat că PageSpeed sa plâns atât de dimensiunile imaginilor încorporate găzduite de Flickr (la numărătoare diferite de pixeli), cât și de a vedea aceste dezavantaje JavaScript externe, m-am întors la imagini optimizate de pe site-ul meu. Încă se leagă de Flickr pentru albumul meu din India.
Acesta este un bun exemplu în care încercarea de a utiliza un serviciu terț puternic în scopul simplu de a încorpora fotografii distruge scorul dvs. de PageSpeed. Flickr nu a făcut o lucrare optimă de a ajuta utilizatorii WordPress să rezolve acest lucru. Ca exemplu, ei ar trebui:
Cu restul fișierelor Google, cea mai bună soluție a fost găzduirea pe loc a unei copii de scripturi pentru Google Analytics și DFP și utilizarea scripturilor cron pentru actualizarea regulată a acestora pe un server.
Mai întâi, am oprit utilizarea pluginului Google Analytics și am adăugat manual codul modificat în antetul temei:
// ...
Observați că am schimbat căile spre copiile mele locale ale scripturilor. Apoi, am făcut copii locale ale scripturilor pentru Google Analytics și Google DFP și, la scurt timp după ce cache-ul meu de browser a fost rezolvat în PageSpeed, cu excepția cazului Disqus.
Nu sunt sigur dacă este vorba de securitate sau suport multi-platformă sau "inteligență" pură, dar Disqus și alți furnizori precum Flickr par să ascundă fișierele pe care le încarcă cu alte fișiere. Acest lucru face ca optimizarea PageSpeed-ului să fie mult mai dificilă și deseori de nerezolvat.
Desigur, am petrecut două-trei ore încercând diferite abordări pentru a optimiza pluginul Disqus - nimic nu a lucrat pentru mine.
În final, am dezinstalat pluginul Disqus și am instalat Disqus Load Conditional:
În timp ce aceasta are scopul de a face multe lucruri, aceasta face de asemenea posibilă optimizarea PageSpeed cu instalarea.
Dintr-o dată, paginile PageSpeed's Leverage Browser Caching au dispărut. Kudos la DCL!
PageSpeed se plânge deseori de legături prea apropiate de dispozitivele mobile. Am experimentat câteva abordări și, în cele din urmă, am oprit afișarea etichetelor pe dispozitivele mobile.
Dacă petrec mai mult timp, probabil îmi pot îmbunătăți UX-ul și pot trece cu PageSpeed.
Pluginul ArrayToolkit, care afișează pictogramele din bara laterală dreaptă, nu mai funcționează pentru mine. Mi-a trebuit un timp să-ți dau seama care sunt căile necesare pentru a fi codificate cu căi absolute pentru a face să funcționeze.
În cele din urmă, am găsit și am înlocuit aceste căi cu căi relative corelate cu directorul original de pluginuri:
// A trebuit să punem calea în plugin-ul css @ font-face font-family: 'array'; src: url ('./ fontello / array.eot'); src: url ('./ fontello / array.eot # iefix') format ('embedded-opentype'), url ('./ fontello / array.woff' /array.ttf '' format '(' truetype '), url (' ./ fontello / array.svg # array ') format (' svg '); font-weight: normal; font-style: normal; Mai am o problemă pe care trebuie să o rezolv. Plugin-ul meu nou de file (Construct avea tab-uri încorporate) a încetat să lucreze de-a lungul drumului. Trebuie doar să-mi petrec timpul depanându-l, dar ar trebui să fie destul de ușor de rezolvat.
Am experimentat compresorul YUI cu W3TC pentru a comprima fișierele JavaScript și CSS. În loc să conducă la o viteză sporită, totul a izbucnit.
Dacă sunteți interesat să aflați ce am făcut greșit, puteți instala Java și YUICompressor astfel:
#good luck sudo apt-get instalare openjdk-6-jre cd / usr / local / lib sudo wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar
Vă rugăm să postați în comentarii, dacă știți cum să se joace bine cu WordPress.
După această a doua rundă de lucru pe noua temă, totul a funcționat mai bine decât am sperat. Nu am fost niciodată sigur că mi-aș atinge scopul optim.
Am marcat 100 de pagini pentru atât pentru mobil, cât și pentru desktop. Cu atât mai mult, site-ul meu se desfășura foarte repede și mai repede decât am mai avut vreodată un blog. Sunt foarte curios să văd cum traficul de căutare în trafic și activitatea de citire reacționează la scorurile și performanțele mai rapide în următoarele câteva luni.
Iată scorurile mele finale ale paginii, în primul rând mobil:
Și acum Desktop:
Desktop-ul a ajuns la 100 de ori mai întâi și a trebuit să mă întorc și să finalizez câteva ajustări (adresându-mă țintelor țintă) pentru a obține Mobile acolo.
Și din nou, viteza site-ului face să merite o vizită rapidă. Dacă știți despre alte site-uri comerciale care rulează la 100 de pagini, vă rugăm să le distribuiți în comentarii. Mi-ar plăcea să le văd.
La fel ca un exemplu de schimbări SEO, eseul meu popular despre întâlniri a sărit la locul al treilea pe baza rezultatelor mobile în cadrul "Seattle dating"(nu pe desktop încă.) Acest lucru îmi spune că, probabil, povestiri pe site-uri majore care îi bate au pagini mobile scazute, deoarece nu este ușor.
Pentru a maximiza PageSpeed-ul site-ului meu, a trebuit să fac o serie de ajustări temei mele, care va crea acum dependențe de schimbări ale scripturilor externe și actualizări ale temei și pluginurilor. Acum că am terminat cu obiectivul meu pe termen scurt, am de lucru pentru a-mi organiza sistemele pentru a gestiona mai ușor acest lucru.
În curând va trebui să pun în aplicare acest script cron pentru a sincroniza scripturile Google găzduite de Google Analytics și DFP.
Iată o companie care oferă o abordare mai simplă a utilizării Google Analytics fără a fi penalizată PageSpeed, fixând ultimul punct pe Google PageSpeed Insights. Prefer să nu mă bazez pe alte terțe părți.
De asemenea, trebuie să urmăresc mai bine actualizările temelor pentru Medium și să integrez schimbările. Construirea unei teme tematice din modificările mele ar putea, de asemenea, să ușureze acest proces. De cele mai multe ori voi căuta modificări care suprascriu fișierele JavaScript, JavaScript și CSS actualizate (sau suplimentare).
În mod similar, atunci când plugin-urile se actualizează, va trebui să mă uit la aceleași tipuri de actualizări. S-ar putea să mă ajute să îmi organizez mai bine utilizarea GitHub cu pluginurile WordPress. Îl folosesc deja pentru tema mea.
S-ar putea să vreau să petrec ceva timp scriind scripturi pentru a urmări care fișiere JavaScript și CSS sunt în uz cu tema actualizată și pluginurile, le descarcă pe serverul meu și minimizează și împachetează fișierele corespunzătoare pentru a le lega sau include.
În cele din urmă, una dintre surprizele mele este că SSL nu este obligat să atingă un PageSpeed de 100. Acest lucru are sens, dar subliniază faptul că o varietate de componente diferite pot afecta clasamentul dvs. de căutare Google. Voi scrie despre punerea în aplicare a Let's Criptarea lui SSL gratuit cu WordPress în curând.
Dacă v-ați bucurat de acest lucru, dar doriți să citiți un tutorial mai general care nu merge atât de adânc în specificul care poate sau nu să se aplice în cazul dvs., Google PageSpeed ScoreCDN 100/100 cu WordPress este o piesă complementară excelentă. Am scris, de asemenea, o piesă sponsorizată despre CDN-ul lor la Envato Tuts + (Accelerarea livrării conținutului cu KeyCDN) și a continuat să le convingă ca pe un client.
Între timp, dacă sunteți în căutarea pentru alte utilități pentru a vă ajuta să construi setul tot mai mare de instrumente pentru WordPress sau de cod pentru a studia și de a deveni mai bine versat în WordPress, nu uitați să vedem ce avem la dispoziție în Envato Piaţă.În viitor, mă voi uita la câteva îmbunătățiri pentru a îmbunătăți performanța generală a site-ului meu. Acestea includ:
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ă vizitaț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).
