Accelerarea WordPress Cum am optimizat performanța list25 cu 256%

Doriți să vă grăbiț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 a site-ului dvs.? În acest articol, vă vom arăta cum să accelerați WordPress împărtășind modul în care 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 o implicare mai bună a utilizatorilor, mai multe afișări de pagină și vânzări mai bune. Într-un studiu de caz strangeloop, au constatat că o întârziere de o secundă vă poate costa 7% din vânzări, cu 11% mai puține afișări de pagină și o scădere cu 16% a satisfacției clienților.

Deci, cum de fapt accelerați WordPress?

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

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 YouTube are peste un sfert MILIARD vizualizari.

Conținutul site-ului este, în cea mai mare parte, imagini și videoclipuri care ocupă terabyte de lățime de bandă, astfel încât optimizarea generală a vitezei a fost crucială pentru a menține costurile în jos, pentru a reduce abandonarea paginilor și pentru a îmbunătăți timpul pe site.

Înainte de a începe optimizarea, pagina noastră de pornire a fost de 2,21 secunde pentru încărcare în funcție de Pingdom. După ce am terminat, timpul de încărcare a paginii a scăzut la 1,21 secunde (~ 45% mai rapid).

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

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

WordPress Hosting

Având o gazdă bună web este crucială pentru viteza site-ul dvs. Pe măsură ce site-ul nostru a devenit mai popular, am depășit pur și simplu compania noastră de găzduire anterioară (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.

Ne-am uitat la diversele opțiuni de găzduire WordPress gestionate și, în cele din urmă, am ajuns să folosim SiteGround pentru gazduirea List25 deoarece au oferit cea mai bună valoare globală pentru acest site.

Puteți vedea imediat îmbunătățirea timpului de răspuns al serverului. Am trecut de la timpul de răspuns de la 442ms până la 172ms. Aceasta este o îmbunătățire de 256%.

Siteground a construit suporturi de performanță pentru platforme specifice cum ar fi WordPress, Joomla și Magento. Bazându-se pe platforma site-ului dvs., acestea optimizează în mod special serverele dvs., ceea ce duce la o performanță globală mai bună.

Am scris un articol despre momentul în care ar trebui să vă schimbați gazduirea web, care vorbește despre cei 7 indicatori-cheie.

Dacă sunteți în căutarea de a schimba gazdele, atunci cu siguranta da SiteGround o încercare. Utilizatorii WPBeginner primesc o reducere exclusivă de 60% pe domeniul gazduire + gratuit.

Caching Plugin

Cand vine vorba de accelerarea WordPress, caching-ul este al doilea factor cel mai important dupa gazduirea web.

În mod normal, atunci când un vizitator ajunge la site-ul dvs. WordPress, serverul dvs. transmite cererea PHP către baza de date MySQL care găsește pagina solicitată, o generează în zbor și o arată vizitatorului. Acest lucru necesită o mulțime de resurse. Când aveți cache, economisiți timp și resurse.

Diagrama de mai jos evidențiază procesul. În termeni simpli, gândiți-vă la cache ca la crearea unei comenzi rapide pe desktop, care vă ajută să ajungeți la fișier mai repede.

Pentru site-ul List25, folosim SiteGround SuperCacher, un plugin pe care l-au construit special pentru clienții lor. În plus, au adăugat opțiuni avansate de cache dinamice folosind Varnish (parte a booster-ului 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 multele soluții disponibile cum ar fi W3 Total Cache sau WP Super Cache.

La WPBeginner, folosim W3 Total Cache care oferă un număr de opțiuni de cache în pagină, cache de baze de date și cache de obiecte.

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

CDN

Rețelele de difuzare a conținutului (CDN) vă pot ajuta să creșteți viteza site-ului. Am folosit MaxCDN de la începutul listei25, deci această parte nu sa schimbat.

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

CDN ne permite să deservim toate CSS, Javascript și imagini dintr-o rețea de distribuire a conținutului. Aceasta funcționează determinând locația vizitatorului site-ului și difuzând conținut de pe un server cel mai apropiat de vizitator.

Dacă nu sunteți pe piață pentru o soluție CDN premium, puteți utiliza Cloudflare.

Combinarea fișierelor pentru a reduce cererile HTTP

Pe măsură ce adăugați mai multe pluginuri, adesea adaugă propriile fișiere JavaScript și CSS. Fiecare fișier suplimentar este 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 modul în care pluginurile WordPress afectează timpul de încărcare.

În timp ce încărcăm acum câteva funcționalități mici pe care nu le-am putea avea nevoie într-o anumită secțiune a site-ului, acest cod este stocat în cache pe CDN, iar rezultatele arată că mai puține cereri de fișiere oferă o performanță mai bună decât încărcarea mai multor fișiere JS mai mici.

Acesta este ceva ce trebuie să faceți în mod regulat, deoarece plugin-urile pe care le folosiți modifică orele suplimentare.

Image Sprites

Am folosit o imagine sprite care a combinat mai multe iconițe sociale și site-uri într-o singură imagine:

Ori de câte ori trebuia să afișăm o anumită pictogramă, am folosi CSS pentru a:

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

De exemplu, pentru a încărca icoanele media ale barei laterale, folosim:

li.widget_social_icons ul li float: stânga; lățime: 36px; înălțime: 36px; margine: 0 10px 10px 0; umplutura: 0; fundal: 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;  

background-position, lăţime și înălţime Proprietățile CSS ne ajută să direcționăm secțiunea specifică a imaginii pe care dorim să o afișăm:

Ca rezultat, numai prima cerere pentru acest fișier imagine utilizează lățime de bandă. Solicitările ulterioare către CDN pentru imagine vor duce la încărcarea versiunii cache (de obicei local), precum și necesitatea de a solicita o singură imagine față de 6 pictograme sociale diferite.

Prin combinarea JavaScript, CSS și imaginile împreună, am redus semnificativ numărul de solicitări.

Codificarea minime

Minifierea codului implică eliminarea spațiilor libere și a rupturilor de linii pentru a reduce dimensiunea fișierului, făcând-o mai rapidă încărcare atunci când este solicitată.

Pentru lista25, folosim SCSS, o foaie de stil bazată pe sintaxă (Intro la Sass). Acest lucru ne permite să structurăm fișierele noastre CSS în mai multe domenii de dezvoltare într-un aspect ușor de citit:

Utilizăm CodeKit pentru a compila fișierele SCSS într-un singur fișier CSS. CodeKit elimină de asemenea spațiile de alb și pauzele de linie pentru a vă asigura că fișierul este cât mai mic posibil:

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

Optimizarea imaginilor

Am optimizat imaginile noastre în două domenii: tema WordPress și conținutul încărcat.

Pentru tema 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, am educat toți scriitorii noștri despre importanța salvării imaginilor optimizate pentru web. Consultați ghidul nostru despre modul de salvare a imaginilor optimizate pentru web.

Javascript-free Sharing Social

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

În timp ce integrarea acestor patru script-uri de rețea socială nu a afectat timpul de încărcare a paginilor în testele noastre, acesta a încetinit vizibil site-ul Web atunci când a vizionat pe un dispozitiv mobil. Butoanele de partajare socială ar dura câteva secunde, în ciuda faptului că script-urile se încarcă în mod asincron, ducând la deplasarea conținutului posturilor în timp ce butoanele încărcate în vizualizare.

Pentru a rezolva această problemă, ne-am mutat la o soluție (aproape) fără Javascript. Fiecare dintre butoanele de distribuire a rețelei sociale sunt redate de pluginul nostru personalizat WordPress, iar Javascript-ul temei este utilizat numai pentru a deschide fereastra browserului web atunci când utilizatorul face clic pe un buton.

Cu toate acestea, am dorit încă să afișăm numărul total de acțiuni pe care o postare le-a avut în toate rețelele sociale. Pentru a face acest lucru, am produs un mic personalizat Plugin WordPress pentru a prelua și cache numărul de cote sociale din fiecare rețea socială în tabelul Post meta. Aceste numere sunt actualizate la fiecare 24 de ore, asigurând că interogările consumatoare de timp nu se execută în mod constant.

Puteți utiliza fie un API ca Sharre, fie puteți diseca Barul Social Floating pentru personalizare.

Folosind RUM Pingdom (Real User Monitoring), acest nou plug-in de acțiuni a redus timpul de încărcare a paginii "adevărat" de la 6 secunde la puțin peste 2 secunde. De asemenea, sa asigurat că am redus numărul de solicitări pentru scripturile terților.

Rezultat

Am îmbunătățit semnificativ viteza site-ului. Timpul de încărcare a variat între 2,2 secunde și 1,22 secunde.

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

Acest lucru a contribuit la reducerea timpului petrecut pentru descărcarea unei pagini de către botul Google care a ajutat la rata de accesare cu crawlere.

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

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

Concluzie

După cum puteți vedea un site web de încărcare mai rapidă, puteți îmbunătăți implicarea vizitatorilor. Tehnicile pe care le-am discutat au acoperit o serie 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ă grăbiți site-ul WordPress. Ați putea dori, de asemenea, să verificați articolul nostru despre 20 trebuie să aibă pluginuri WordPress pentru 2015.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.