Cum să vă faceți site-ul WordPress să se încarce mai rapid folosind pluginuri

Publicat: 2015-06-26

Este important să ai un site web frumos, cu mult conținut grozav, dacă vrei să captezi atenția cititorilor. Din păcate, dacă pagina dvs. se încarcă prea încet, cititorii s-ar putea să nu vă vadă niciodată conținutul. De ce? Ai la dispoziție doar câteva secunde pentru a le atrage atenția și a-i împiedica să treacă pe următorul site. Cititorii nu vor să aștepte ca conținutul dvs. să se încarce. Cu cât așteptarea este mai lungă, cu atât este mai probabil să le pierzi.

Din acest motiv este extrem de important să optimizați viteza de încărcare a paginii. Există mai multe instrumente bune online pentru a vă măsura viteza și a remedia problemele. Unul dintre cele mai populare instrumente este Google PageSpeed Insights.

PageSpeed Insights

Google PageSpeed Insights este un instrument online gratuit care va testa viteza de încărcare a oricărui site web, va identifica problemele, le va acorda prioritate și va oferi sugestii pentru remedierea acestor probleme.

Pentru acest articol folosesc propriul meu site care folosește Divi din Elegant Themes ca blog de bază. Vă arăt ce trebuie remediat, ce sugestii face instrumentul și cum le-am remediat. Scorul oferă rezultate atât pentru mobil, cât și pentru desktop. Mă concentrez pe desktop. Unele dintre problemele mobile vor fi rezolvate pe parcurs.

Majoritatea acestor probleme vor fi rezolvate prin utilizarea pluginurilor. Când decideți asupra unui plugin, rămâneți cu pluginurile care au fost actualizate recent și au o reputație bună. Multe plugin-uri vor rezolva mai multe probleme.

Un cuvânt de precauție – unele plugin-uri nu se joacă bine cu altele, deoarece ambele încearcă să facă aceeași muncă. Acest lucru ar putea avea un efect diferit de ceea ce doriți. Vă recomand să le încercați pe un site de testare înainte de a le folosi pe site-ul dvs. principal. Nu doar pluginurile în sine, ci și combinațiile de pluginuri. Înainte de a încerca pluginuri pe site-ul dvs. live, asigurați-vă că aveți o copie de rezervă recentă.

Scorul meu

Scorul meu este groaznic de 46 . Primul lucru de observat este că există trei secțiuni diferite în rezultate:

Ar trebui să remedieze (2 articole)
Luați în considerare remedierea (6 articole)
A trecut (2 articole)

Fiecare secțiune se extinde pentru a arăta care sunt problemele și oferă sfaturi despre cum să le remediați. Am descoperit că cel mai bine este să începi cu primul articol și să mergi în ordine. Rezolvarea lor în ordine va rezolva și alte probleme de pe listă.

Notă – am avut chiar și câteva eșecuri pe parcurs. Le-am inclus pentru a putea fi conștienți de posibilele probleme.

Ar trebui să remedieze

Am două articole care necesită atenție imediată:

Activați compresia
Eliminați JavaScript și CSS care blochează redarea în conținutul de deasupra paginii

Activați compresia

Problema mea cea mai importantă este că nu folosesc compresia. Arată că pot reduce dimensiunea transferului fișierelor cu 79%. Acest lucru se poate face folosind gzip sau deflate.

WP Performance Score Booster

Acest plugin gratuit are compresie gzip și va rezolva câteva alte probleme, cum ar fi problemele CSS și JavaScript, eliminând șirurile de interogări, adăugând antet Variable: accept-encoding și caching-ul set expires. L-am ales pentru că are un 4.7/5 cu peste 10.000 de instalări active. A fost dezvoltat pentru a accelera încărcarea paginii și pentru a îmbunătăți testele cu scorul paginii.

Acest lucru mi-a dat un scor de 78 cu un mesaj pentru a reduce timpul de răspuns al serverului. Acest lucru are mult de-a face cu planul meu de găzduire. Remediez acest lucru mutând site-ul meu la un nou plan de găzduire. Asta depășește scopul acestui articol.

Un lucru interesant este că a rezolvat unele dintre problemele majore cu următoarea problemă: Eliminați JavaScript și CSS care blochează redarea în conținutul de deasupra paginii. Această problemă a fost acum mutată în Luați în considerare remedierea. De asemenea, a remediat complet Leverage Browser Caching. Site-ul trece acum 4 reguli, unde înainte trecea doar 2.

Reduceți timpul de răspuns al serverului

Lucrul ciudat este că timpul de răspuns a serverului a crescut de la .96 la 1.4. Reduceți timpul de răspuns al serverului era acum în Ar trebui să remedieze. Acest lucru a necesitat un plugin de cache.

Cache total W3

W3 Total Cache este de departe cel mai popular plugin pentru accelerarea performanței serverului site-ului dvs. Are aproape un milion de instalări active și un rating de 4,4/5. Îți optimizează site-ul prin cache. Puteți alege diferitele opțiuni de stocare în cache individual. Acestea includ pagina, baza de date, obiectul și browserul. Va stoca în cache anteturile și etichetele de entități, feedurile și rezultatele căutării care expiră în viitor. Are, de asemenea, funcții pentru reducerea JS, CSS și HTML. Acesta vă va accelera scorul Google PageSpeed de cel puțin 10 ori când este complet configurat.

Am încercat cu toate funcțiile de cache activate. Acest lucru mi-a dus scorul la 86 . Pentru prima dată, site-ul meu este acum în verde și toate problemele pe care le-am avut au fost în soluționare. Acum trece de 5 reguli, inclusiv timpul de răspuns al serverului, care spune acum „serverul a răspuns rapid”.

Luați în considerare repararea

Când am rulat pentru prima dată testul, această secțiune a avut mai multe probleme decât atunci când am ajuns în sfârșit la ea. Multe dintre aceste probleme au fost rezolvate când am remediat problemele din zona Ar trebui să remedieze.

Problemele au inclus inițial:

Utilizați memorarea în cache a browserului
Timpul de răspuns al serverului
Reduceți JavaScript
Optimizați imaginile
Minimizează CSS
Minimizează HTML

Iată o privire asupra problemelor actuale.

Eliminați Javascript și Css care blochează randarea din conținutul de deasupra paginii

JavaScript și CSS care se află deasupra pliului pot încetini încărcarea paginii prin plasarea unei încărcări prea mari a browserului. Trebuie să se încarce înainte ca orice altceva de deasupra pliului să se poată încărca.

Există mai multe moduri de a o remedia:

Amână încărcarea
Încărcați asincron
Introduceți-le direct în HTML

Iată pluginurile pe care le-am folosit pentru a remedia această problemă.

Optimizați automat

Acest plugin va reduce (elimina toate formatările inutile și va reduce dimensiunea fișierului și va încărca în browser) și va comprima JavaScript, CSS și HTML. Va adăuga anteturi de expirare și le va stoca în cache. Acesta vă va muta stilurile în capul paginii și scripturile în subsol. Folosind setările avansate, îl puteți ajusta pentru nevoile dvs. specifice.

Acest lucru va rezolva, de asemenea, câteva probleme, cum ar fi minimizarea JS și CSS în josul listei.

La început doar am activat setările de bază pentru HTML, JS și CSS. Acest lucru mi-a dus scorul la 88 și a redus problemele la 3 resurse CSS. Unul a fost creat de pluginul în sine, iar celelalte două sunt fonturi Google. Acum trece de 7 reguli. A rezolvat Minify CSS și Minify HTML.

Mai bine WordPress Minify

Scopul principal al acestui plugin este să vă minimizeze CSS și JS, dar are și o caracteristică grozavă care vă permite să vă mutați fișierele în subsol sau în alte locații (de aceea l-am ales). Folosește un sistem de așteptare pentru a îmbunătăți compatibilitatea cu browsere, pluginuri și teme.

Când l-am instalat, toate setările de aspect pentru tema mea au fost eliminate și toate meniurile, imaginile, linkurile, etc., au apărut în partea stângă a ecranului. Din fericire, formatarea a revenit când am dezinstalat-o. S-ar putea să fi fost ceva în setări care trebuia ajustat. Sunt sigur că acesta este un plugin bun, deoarece are peste 60.000 de instalări active și o evaluare de 4,4/5. L-am inclus pe acesta doar ca un avertisment că s-ar putea să nu funcționeze așa cum aveți nevoie fără o anumită configurare.

Deoarece scorul meu era 88 și știam care sunt cele 3 probleme, am decis să trec la următoarea problemă.

Optimizați imaginile

Dimensiunea imaginii joacă un rol important în viteza de încărcare a paginii. Uneori, puteți utiliza o dimensiune mult mai mică a imaginii și o calitate mai scăzută, fără prea multe diferențe vizuale atunci când sunt vizualizate pe web. Acest lucru nu numai că accelerează timpul de încărcare și folosește mai puțină lățime de bandă, dar accelerează și timpul de rezervă și reduce spațiul de stocare pe server.

EWWW Image Optimizer

Acest plugin vă va optimiza automat imaginile pe măsură ce le încărcați și vă va converti imaginile în formatul care produce cea mai mică dimensiune. De asemenea, va optimiza imaginile pe care le-ați încărcat deja. De asemenea, îl puteți folosi pentru a aplica reduceri de pierderi pentru imaginile PNG și JPG.

Când l-am instalat, erau câteva fișiere pe care dorea să le localizez și să le instalez. Cred că acest plugin ar funcționa grozav cu toate fișierele instalate, dar am decis să găsesc unul care să funcționeze imediat.

WP Smush

Acest plugin va reduce dimensiunea fișierului imaginilor fără a reduce calitatea. Face acest lucru prin eliminarea informațiilor ascunse. Acesta vă va analiza fișierele și vă va spune câte imagini trebuie să fie zdrobite. Le puteți zdrobi în vrac.

Versiunea gratuită nu reduce nimic mai mult de 1 MB și va reduce doar 50 la un moment dat. Pentru mai mult decât atât, veți avea nevoie de WP Smush Pro, care va distruge imagini de până la 32 MB fără limită de câte o dată. Face o copie de rezervă a originalelor dacă aveți nevoie de ele. Prețurile încep de la 19 USD pe lună.

Am avut 114 imagini care aveau nevoie de zdrobire. 8 dintre aceste imagini aveau peste 1 MB. Am decis să le repar manual. A zdrobit 98 de imagini și a redus dimensiunea fișierului cu 4,79 MB (8,82%).

Acest lucru mi-a dus scorul la 90 . Google Insights a identificat 5 imagini care nu le-au plăcut, dar niciuna nu avea peste 1 MB. Au variat de la .7 KB la 17 KB.

Optimizarea imaginilor manual

Puteți optimiza imaginile manual, redimensionând, reducând calitatea și schimbând formatul. Unul dintre instrumentele mele preferate și cele mai utilizate pentru manipularea imaginilor este Paint.NET. Este o aplicație gratuită de editare a imaginilor și a fotografiilor pentru Windows, care are o mulțime de funcții pentru a reduce dimensiunea fișierului. Care este preferatul tău?

Reduceți JavaScript, CSS și HTML

Credeam că am remediat asta...

În timp ce lucram la celelalte probleme, am văzut că singurul mesaj de minimizat era pentru JavaScript. Odată ce mi-am optimizat imaginile, toate cele trei probleme au revenit. Mi-am revenit pe pași pentru a-mi da seama ce s-a întâmplat.

Încercând Better WordPress Minify și apoi oprindu-l înapoi, mesajele mele pentru a reduce CSS și HTML au revenit. Scorul meu a scăzut la 88 și acum am revenit la 5 reguli aprobate. Am activat funcțiile de minimizare ale W3 Total Cache și acum a trecut toate problemele de minimizare. Acum aveam un scor de 88 și a trecut 8 reguli. De asemenea, avea șase fișiere deasupra pliului. Știam că am rezolvat câteva dintre acestea, așa că trebuie să fi schimbat ceva.

Am depanat câteva probleme și am constatat că am dezactivat Autoptimize când am avut mai devreme problema cu Better WordPress Minify. Am reactivat Autoptimize, am dezactivat minify din W3 Total Cache și am șters memoria cache (pas foarte important!). Acum aveam scorul meu de 90 și site-ul a trecut 8 reguli. Era înapoi la trei fișiere CSS deasupra pliului și un mesaj pentru optimizarea imaginilor.

Pe baza experienței mele anterioare, am decis să nu pierd timpul cu aceste fișiere. Cred că Google urăște imaginile de orice dimensiune (oricât de mici le primesc, tot primesc un mesaj pentru a reduce dimensiunea) și să treci de la un PageScore de 46 la 90 este un câștig în cartea mea. Am învățat cum să te oprești în timp ce tu ești înainte.

Scor final

Scorul meu final a fost 90/100. Pluginurile pe care le-am folosit pentru a obține acest scor sunt:

Optimizare automată (toate funcțiile activate)
W3 Total Cache (numai funcțiile de stocare în cache a paginii sunt activate)
WP Performance Score Booster (toate funcțiile sunt activate)
WP Smush (ediție gratuită)

Pentru înregistrare, scorul mobil a trecut de la 36 la 78. Pentru a-l remedia, ar trebui să-mi optimizez imaginile și fișierele pentru mobil.

Gânduri finale

Vizitatorii dvs., Google și alte motoare de căutare urăsc site-urile care se încarcă lent. Folosind Google PageSpeed Insights, puteți ști exact care sunt problemele și puteți obține sfaturi despre cum să le rezolvați. O mână de plugin-uri gratuite este tot ce aveți nevoie pentru a trece de la un site lent pe care Google îl urăște la un site rapid pe care Google îl iubește. Aveți grijă doar să experimentați – unele plugin-uri nu se joacă bine cu altele.

Aș dori să aud de la tine. Ți-ai optimizat site-ul WordPress folosind Google PageSpeed Insights? Experiența ta a fost ceva ca a mea? Ați folosit diferite pluginuri pentru a rezolva problemele? Aș dori să aud despre experiența ta în comentarii.