Accelerarea WordPress: Cum am optimizat performanța List25 cu 256%

Doriți să vă accelerați site-ul WordPress? Doriți să cunoașteți trucurile de optimizare WordPress care vă pot ajuta să reduceți timpul de încărcare al site-ului? În acest articol, vă vom arăta cum să accelerați WordPress partajând cum am optimizat site-ul nostru List25 pentru a crește performanța.

Probabil ați auzit că viteza WordPress este importantă pentru SEO. Un site mai rapid are un angajament mai bun al utilizatorilor, mai multe vizualizări de pagină și vânzări mai bune. Într-un studiu de caz strangeloop, au descoperit că o întârziere de o secundă vă poate costa 7% din vânzări, cu 11% mai puține vizualizări de pagină și o scădere de 16% a satisfacției clienților.

Deci, cum accelerezi de fapt WordPress?

Ei bine, în loc să împărtășim doar o listă de sfaturi de viteză, am decis să facem un studiu de caz complet pentru a vă arăta rezultatele de pe site-ul nostru List25, împreună cu modul în care am realizat totul.

Prezentare generală

List25 este un blog de divertisment început de fondatorul nostru Syed Balkhi. Site-ul are peste 1,5 milioane de abonați, iar canalul de YouTube are peste un sfert de MILIARD de vizualizări.

Conținutul de pe site este în mare parte imagini și videoclipuri, care consumă terabytes de lățime de bandă, deci optimizarea generală a vitezei a fost crucială pentru noi pentru a reduce costurile, a scădea abandonul paginilor și a îmbunătăți timpul petrecut pe site.

Înainte de a începe optimizarea, pagina noastră principală a avut nevoie de 2,21 secunde pentru a se încărca conform Pingdom. După ce am terminat, timpul de încărcare a paginii noastre a scăzut la 1,21 secunde (~45% mai rapid).

În timpul acestei optimizări, am reușit să accelerăm timpul de răspuns al serverului, să îmbunătățim scorul de performanță al vitezei paginii, să reducem numărul total de solicitări și să îmbunătățim timpul general de încărcare.

Să aruncăm o privire la tehnicile de optimizare care ne-au ajutat să accelerăm site-ul nostru WordPress.

Găzduire WordPress

A avea un gazdă web bun este crucial pentru viteza site-ului dvs. Pe măsură ce site-ul nostru a devenit mai popular, pur și simplu am depășit compania noastră anterioară de hosting (HostGator).

Serverele lor pur și simplu nu au putut gestiona un site de această dimensiune, deoarece List25 primește zeci de milioane de vizualizări de pagină. HostGator este excelent pentru site-uri mai mici, dar nu pentru ceva de această magnitudine.

Am analizat diverse opțiuni de găzduire WordPress gestionată și, în cele din urmă, am ajuns să folosim SiteGround pentru găzduirea List25, deoarece au oferit cea mai bună valoare generală pentru acest site.

Puteți vedea imediat îmbunătățirea timpului de răspuns al serverului nostru. Am trecut de la un timp maxim de răspuns de 442 ms la 172 ms. Aceasta este o îmbunătățire de 256%.

Siteground a creat acceleratoare de performanță pentru platforme specifice precum WordPress, Joomla și Magento. În funcție de platforma site-ului dvs., aceștia vă optimizează în mod special serverele, ceea ce duce la o performanță generală mai bună.

Am scris un articol despre când ar trebui să vă schimbați găzduirea web, care vorbește despre cei 7 indicatori cheie.

Dacă doriți să schimbați gazda, atunci cu siguranță încercați SiteGround. Utilizatorii WPBeginner beneficiază de un discount exclusiv de 60% la găzduire + domeniu gratuit.

Plugin de Caching

Când vine vorba de accelerarea WordPress, caching-ul este al doilea cel mai important factor după găzduirea web.

În mod normal, atunci când un vizitator ajunge pe site-ul dvs. WordPress, serverul dvs. transmite cererea PHP către Baza de Date MySQL, care găsește pagina solicitată, o generează din mers și o afișează vizitatorului. Acest lucru consumă multe resurse. Când aveți caching, economisiți timp și resurse.

Diagrama de mai jos evidențiază procesul. În termeni simpli, gândiți-vă la caching ca la crearea unei scurtături pe desktop, care vă ajută să accesați fișierul mai rapid.

Pentru site-ul List25, folosim SiteGround SuperCacher, un plugin pe care l-au construit special pentru clienții lor. Pe lângă aceasta, au adăugat opțiuni avansate de caching dinamic folosind Varnish (parte a amplificatorului lor de performanță).

Dacă nu sunteți pe Siteground, atunci nu vă faceți griji. Puteți configura cache-ul pe site-ul dvs. WordPress folosind una dintre numeroasele soluții disponibile, cum ar fi W3 Total Cache sau WP Super Cache.

La WPBeginner, folosim W3 Total Cache, care oferă o serie de opțiuni de caching pentru pagini, caching pentru baze de date și caching pentru obiecte.

Pe măsură ce tot mai multe companii de hosting se specializează pentru WordPress, vom vedea mai multe soluții de caching personalizate construite. Pagely și WPEngine oferă, de asemenea, propriul sistem de caching încorporat.

CDN

Rețelele de livrare de conținut (CDN) vă pot ajuta să accelerați site-ul web. Noi folosim MaxCDN de la începutul List25, așa că această parte nu s-a schimbat.

Am scris un articol complet despre ce este un CDN și de ce aveți nevoie de el, împreună cu un infografic.

CDN ne permite să servim tot CSS, Javascript și imaginile de pe o Rețea de Livrare de Conținut. Acest lucru funcționează prin determinarea locației vizitatorului site-ului și servirea conținutului de pe un server cel mai apropiat de vizitator.

Dacă nu sunteți în căutarea unei soluții CDN premium, atunci puteți folosi Cloudflare.

Combinarea fișierelor pentru a reduce cererile HTTP

Pe măsură ce adăugați mai multe pluginuri, acestea adaugă adesea propriile fișiere JavaScript și CSS. Fiecare fișier suplimentar reprezintă o nouă cerere HTTP.

Am combinat aceste fișiere JavaScript și CSS într-un singur fișier pentru fiecare, pentru a reduce cererile și a accelera timpul de încărcare. Puteți vedea mai multe detalii despre acest lucru în cum afectează pluginurile WordPress timpul de încărcare.

Deși acum încărcăm o mică funcționalitate de care s-ar putea să nu avem nevoie într-o anumită secțiune a site-ului, acest cod este stocat în cache pe CDN, iar rezultatele arată că mai puține solicitări de fișiere oferă o performanță mai bună decât încărcarea mai multor fișiere JS mai mici.

Acesta este un lucru pe care trebuie să-l faceți în mod regulat, deoarece pluginurile pe care le utilizați se schimbă în timp.

Image Sprites

Am folosit un sprite de imagini care a combinat mai multe pictograme sociale și de site într-o singură imagine:

Ori de câte ori am avut nevoie să afișăm o pictogramă anume, am folosit CSS pentru a:

1. Încărcați imaginea ca imagine de fundal
2. Definiți lățimea și înălțimea elementului pentru care avem nevoie de pictogramă
3. Setați poziția fundalului pentru ca imaginea noastră să încarce pictograma necesară

De exemplu, pentru a încărca pictogramele de social media din bara laterală, folosim:

li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

Proprietățile CSS background-position, width și height ne ajută să țintim secțiunea specifică a imaginii pe care dorim să o afișăm:

Ca rezultat, doar prima cerere pentru acest fișier imagine utilizează lățimea de bandă. Cererile ulterioare către CDN pentru imagine vor rezulta în încărcarea versiunii cache (de obicei locală), precum și necesitatea de a solicita o singură imagine în loc de 6 pictograme sociale diferite.

Prin combinarea JavaScript, CSS și a imaginilor, am redus semnificativ numărul de solicitări.

Minimizarea codului

Minificarea codului implică eliminarea spațiilor albe și a întreruperilor de linie pentru a reduce dimensiunea fișierului, făcându-l mai rapid la încărcare atunci când este solicitat.

Pentru List25, folosim SCSS, o foaie de stil bazată pe sintaxă (Introducere în Sass). Acest lucru ne permite să ne structurăm fișierele CSS pe mai multe zone de dezvoltare într-un format ușor de citit:

Folosim CodeKit pentru a compila apoi fișierele SCSS într-un singur fișier CSS. CodeKit elimină, de asemenea, spațiile albe și liniile noi pentru a se asigura că fișierul este cât mai mic posibil:

Ca rezultat, am reușit să reducem dimensiunea fișierului nostru CSS cu 28%.

Optimizarea imaginilor

Ne-am optimizat imaginile în două domenii: tema noastră WordPress și conținutul încărcat.

Pentru tema noastră WordPress, am folosit CodeKit pentru a ne asigura că toate imaginile au fost comprimate fără pierderi. Acest lucru asigură că dimensiunile fișierelor sunt cât mai mici posibil, fără pierderi de calitate.

De asemenea, i-am educat pe toți scriitorii noștri cu privire la importanța salvării imaginilor optimizate pentru web. Consultați ghidul nostru despre cum să salvați imagini optimizate pentru web.

Partajare socială fără Javascript

Partajarea socială pentru List25 este foarte importantă, la fel ca pentru orice alt site web. Cu toate acestea, pluginurile de partajare socială pot încetini semnificativ site-ul dvs.

Deși integrarea scripturilor acestor patru rețele sociale nu a afectat timpul de încărcare a paginii în testele noastre, a încetinit vizibil site-ul web atunci când este vizualizat pe un dispozitiv mobil. Butoanele de partajare socială au apărut după câteva secunde, deși scripturile s-au încărcat asincron, rezultând în conținutul postării mișcându-se pe măsură ce butoanele apăreau.

Pentru a rezolva această problemă, am trecut la o soluție (aproape) fără Javascript. Fiecare dintre butoanele de partajare ale rețelei sociale este redată de pluginul nostru WordPress personalizat, iar Javascript-ul temei este folosit doar pentru a deschide fereastra browserului web atunci când utilizatorul face clic pe un buton.

Cu toate acestea, am dorit în continuare să afișăm numărul total de distribuiri pe care le avea o postare pe toate rețelele sociale. Pentru a face acest lucru, am produs un mic plugin WordPress personalizat pentru a prelua și a pune în cache numărul de distribuiri sociale de pe fiecare rețea socială în tabelul meta al postării. Aceste numere sunt actualizate la fiecare 24 de ore, asigurând că interogările consumatoare de timp nu rulează constant.

Puteți folosi fie un API precum Sharre, fie puteți diseca Floating Social Bar pentru personalizare.

Folosind RUM (Real User Monitoring) de la Pingdom, acest nou plugin de partajare a redus timpul de încărcare „real” al paginii de la 6 secunde la puțin peste 2 secunde. De asemenea, a asigurat reducerea numărului de cereri făcute pentru scripturi terțe.

Rezultat

Ne-am îmbunătățit semnificativ viteza site-ului. Timpul de încărcare a scăzut de la 2,2 secunde la 1,22 secunde.

Am reușit să reducem semnificativ timpul de răspuns al serverului nostru.

Acest lucru a ajutat la reducerea timpului petrecut pentru descărcarea unei pagini de către bot-ul Google, ceea ce a ajutat rata noastră de crawl.

Rata noastră generală de respingere a scăzut cu 7% deoarece site-ul se încărca mai repede, iar prin schimbarea gazdelor am reușit să reducem erorile de server.

După cum vă puteți imagina, odată cu rata de respingere mai mică, timpul petrecut pe site a crescut, de asemenea, cu peste 30 de secunde.

Concluzie

După cum puteți vedea, un site web cu încărcare mai rapidă poate îmbunătăți implicarea vizitatorilor. Tehnicile pe care le-am discutat au acoperit o gamă de îmbunătățiri de bază și intermediare pe care le puteți implementa pentru a vă optimiza site-ul WordPress. 

Sperăm că acest articol v-a ajutat să vă accelerați site-ul WordPress. De asemenea, ați putea dori să consultați articolul nostru despre 20 de pluginuri WordPress obligatorii pentru 2015.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.