Cum am făcut WordPress mai rapid decât generatoarele de site-uri statice (Studiu de caz – Accelerarea WPBeginner)

Cu ocazia aniversării a 10 ani a WPBeginner, am împărtășit că infrastructura noastră de găzduire a primit un upgrade masiv datorită partenerului nostru de găzduire web, HostGator. Ulterior, mulți dintre cititorii noștri s-au întrebat exact cum am făcut ca WPBeginner să se încarce incredibil de repede și am început să primesc e-mailuri în care mi se cereau detalii.

Da, WPBeginner se încarcă mai repede decât majoritatea generatoarelor de site-uri statice și, în unele cazuri, chiar mai repede decât site-urile Google AMP. Nu este vorba doar de drepturi de laudă; este vorba de a împărtăși exact tehnicile pe care le-am folosit pentru a face WordPress să funcționeze la capacitatea sa maximă.

În acest articol, vă voi oferi o privire exclusivă în culise asupra modului în care am optimizat WordPress pentru a fi mai rapid decât generatoarele de site-uri statice și platformele CMS headless.

Notă: Acest articol este puțin mai tehnic decât ceea ce publicăm de obicei pe WPBeginner. Pentru utilizatorii non-tehnici, recomand să urmați ghidul nostru complet despre cum să accelerați WordPress.

Fundal

Recent, WordPress a primit o reputație proastă de la dezvoltatorii „moderni”, spunând că WordPress este lent.

Declarația este de obicei urmată de: ar trebui să treceți la un generator de site-uri statice JAMstack precum GatsbyJS. Alții din lumea corporativă vor spune că ar trebui să treceți la un CMS headless precum Contentful.

Mai mulți dintre prietenii mei antreprenori de succes au început să mă întrebe dacă acest lucru este adevărat.

Unii chiar au început procesul de migrare către un CMS headless, deoarece au citit studii de caz despre cum alții au obținut îmbunătățiri uriașe de viteză prin trecerea de la WordPress la generatoare de site-uri statice.

Acest lucru a fost foarte frustrant pentru mine, deoarece știam că pierd zeci de mii de dolari în costuri de migrare. Fără a mai menționa, costurile interminabile de personalizare care se vor acumula în viitor.

Așa că am acceptat provocarea de a demonstra că un site de conținut WordPress mare precum WPBeginner se poate încărca la fel de repede, dacă nu chiar mai repede decât majoritatea generatoarelor moderne de site-uri statice.

Mă puteți numi old school, dar la sfârșitul zilei, un site static este doar o pagină care se încarcă din cache.

Rezultate

Înainte de a trece la infrastructura exactă de hosting WordPress, configurațiile serverului și plugin-urile, cred că este util să împărtășesc rezultatele.

Iată cât de rapid se încarcă pagina principală WPBeginner pe Pingdom de pe serverul lor din Washington, DC:

În funcție de ora din zi și de locația de unde verifici, acest rezultat va varia între 400ms – 700ms, ceea ce este destul de rapid pentru o pagină principală.

Iată un test pe care l-am rulat pentru o singură pagină de postare, deoarece are imagini mai mari și mai mult conținut:

Am obținut, de asemenea, un scor perfect de „100” în testul de viteză a paginii Google pentru desktop. Deși avem încă loc de îmbunătățire la scorul pentru mobil.

Rezultatele de mai sus sunt pentru paginile cache, ceea ce primesc cititorii noștri și roboții motoarelor de căutare atunci când vizitează site-ul nostru. Timpul de încărcare perceput al WPBeginner este aproape instantaneu (mai multe despre asta mai târziu).

De dragul comparației, iată un rezultat al testului de viteză pentru pagina principală a Gatsby. Acesta este un generator popular de site-uri statice despre care mulți dezvoltatori vorbesc cu entuziasm:

Iată rezultatul testului de viteză al paginii de pornire Netlify, un popular gazdă de site-uri statice, pe care mulți dezvoltatori îl recomandă. Observați că au jumătate din numărul de solicitări, iar dimensiunea paginii lor este 30% din WPBeginner, totuși se încarcă mai lent decât pagina noastră de pornire.

Viteza paginii de pornire a Contentful, CMS-ul headless care este „cum livrăm întreprinderile experiențe digitale mai bune”, nu este deloc optimizată. Acesta a fost cel mai lent site web pe care l-am testat.

Împărtășesc aceste statistici nu pentru a discredita celelalte framework-uri, ci mai degrabă pentru a oferi o perspectivă că nu toate lucrurile noi sunt la fel de strălucitoare pe cât par.

WordPress cu o infrastructură de găzduire adecvată și optimizări poate fi la fel de rapid ca orice generator de site-uri statice. Mai mult, nicio altă platformă nu se va apropia de nivelul de flexibilitate pe care WordPress îl oferă proprietarilor de afaceri prin ecosistemul său mare de pluginuri și teme.

Infrastructura de găzduire WPBeginner

Când vine vorba de viteza site-ului web, nimic nu joacă un rol mai important decât infrastructura dvs. de găzduire web.

După cum mulți dintre voi știți deja, sunt client HostGator din 2007. Am început blogul WPBeginner în 2009 pe un mic cont de găzduire partajată HostGator.

Pe măsură ce site-ul nostru a crescut, am făcut upgrade la găzduirea lor VPS și apoi la servere dedicate.

În ultimul deceniu, am avut ocazia să lucrez îndeaproape cu mulți dintre membrii echipei lor și au devenit o parte extinsă a familiei WPBeginner.

Așa că, atunci când mi-am asumat provocarea de a face WPBeginner mai rapid decât generatoarele de site-uri statice, m-am adresat lor pentru ajutor.

Mi-am împărtășit viziunea cu echipa lor de conducere și mi-au oferit să mă ajute să construiesc o configurație de găzduire enterprise unică pentru WPBeginner.

Au pus cei mai buni ingineri din echipele Bluehost și HostGator să lucreze îndeaproape cu mine pentru a face WPBeginner extrem de rapid.

Iată o prezentare generală a configurației de găzduire WPBeginner:

După cum puteți vedea, acesta este un setup multi-server distribuit în două regiuni geografice (Texas și Utah). Există un total de 9 servere, fără a include cloud-ul de load balancer. Fiecare server este un CPU Xeon-D cu 8 nuclee (16 thread-uri) cu 32 GB RAM și 2 x 1TB SSD (configurație RAID).

Folosim platforma de echilibrare a încărcării în cloud a Google, astfel încât să putem avea scalare automată și echilibrare a încărcării fără probleme, la nivel mondial.

Once the hardware was set up with proper data syncing in place, the Bluehost and HostGator teams worked together to optimize the server configurations for WordPress. My hope is that some of these optimizations will soon make it into future WordPress hosting plans

Rezumatul configurației serverului

Rezumarea configurațiilor serverului acestui setup complex în doar câteva paragrafe este foarte dificilă, dar voi încerca tot ce pot.

Folosim Apache pentru software-ul nostru de server web, deoarece echipa este mai familiarizată cu el. Nu voi intra în dezbaterea NGINX vs Apache.

Folosim PHP 7.2 împreună cu pool-uri PHP-FPM, astfel încât să putem gestiona sarcini mari de procese și cereri. Dacă compania dvs. de găzduire nu folosește PHP 7+, atunci pierdeți optimizări serioase de viteză.

Folosim caching Opcode cu un cache warmer avansat pentru a ne asigura că niciun utilizator real nu ar trebui să experimenteze o vizualizare de pagină ne-cache-uită.

Folosim, de asemenea, cache pentru obiecte cu memcache, astfel încât să putem îmbunătăți timpul de răspuns pentru accesările de pagini ne-cache-uite și alte timpi de răspuns API în zona de administrare WordPress pentru utilizatorii conectați (scriitorii noștri). Iată o filă de încărcare a rețelei a ecranului nostru „Toate postările” din zona de administrare WordPress:

Pentru a pune în perspectivă, experiența noastră în zona de administrare este acum de 2 ori mai rapidă decât ceea ce aveam anterior.

Pentru serverul nostru de baze de date, am trecut de la MySQL la MariaDB, care este un clon al MySQL, dar mai rapid și mai bun. Am trecut, de asemenea, de la HyperDB la LudicrousDB, deoarece ne ajută să îmbunătățim replicarea, failover-ul și echilibrarea sarcinii bazei de date.

Există, de asemenea, o mulțime de alte configurații care ne ajută cu performanța și scalabilitatea, cum ar fi HTTP/2 și HSTS pentru conexiune mai rapidă + criptare, posibilitatea de a porni servere suplimentare în noi regiuni în cazul unei defecțiuni a centrului de date, etc.

Simt că nu fac dreptate configurației uimitoare pe care a construit-o echipa, dar vă rog să știți că principala mea forță este marketingul. Da, sunt un blogger care scrie despre WordPress, dar multe dintre optimizările tehnice de aici depășesc cu mult nivelul meu de competență.

Acestea au fost realizate de ingineri super inteligenți din echipa Endurance, inclusiv David Collins (arhitect șef al Endurance / CTO al HostGator), Mike Hansen (dezvoltator WordPress de bază) și alții cărora le voi mulțumi în secțiunea de credite de mai jos.

CDN, WAF și DNS

Pe lângă găzduirea web, celelalte domenii care joacă un rol important în viteza site-ului dvs. sunt furnizorul dvs. DNS, rețeaua de livrare de conținut (numită și CDN) și firewall-ul aplicației web (WAF).

Deși o am listată ca trei lucruri separate, multe companii oferă acum aceste soluții într-un pachet combinat, cum ar fi Sucuri, Cloudflare, MaxCDN (acum StackPath CDN), etc.

Deoarece doresc să am control maxim și să răspândesc riscul, folosesc trei companii separate pentru a gestiona fiecare parte eficient.

DNS-ul WPBeginner este alimentat de DNS Made Easy (aceeași companie ca și Constellix). Aceștia sunt constant clasați ca cei mai rapizi furnizori de DNS din lume. Avantajul DNS Made Easy este că pot face direcționare globală a traficului atunci când un centru de date specific de pe CDN-ul meu sau WAF nu funcționează corect pentru a asigura un timp de funcționare maxim.

CDN-ul nostru este alimentat de MaxCDN (acum StackPath CDN). Practic, ne permit să servim activele noastre statice (imagini, fișiere CSS și JavaScript) de pe rețeaua lor mare de servere din întreaga lume.

Folosim Sucuri ca firewall pentru aplicații web. Pe lângă blocarea atacurilor, aceștia acționează și ca un strat suplimentar de CDN, iar performanța lor generală este pur și simplu uimitoare. Cred că au cea mai bună soluție de firewall WordPress de pe piață.

Când lucrați la optimizarea vitezei site-ului web, fiecare milisecundă contează. De aceea, utilizarea acestor furnizori de soluții, combinată cu noua noastră infrastructură de găzduire web, face o diferență uriașă.

Pentru a ilustra, iată defalcarea waterfall a WPBeginner.com vs GatsbyJS.org vs CloudFlare.com:

Observați că timpul DNS, timpul SSL, timpul de conectare și timpul de așteptare al WPBeginner sunt toate de top, comparativ cu aceste alte site-uri web populare. Fiecare dintre aceste îmbunătățiri se cumulează pentru a oferi cele mai bune rezultate.

Instant.page, Imagini Optimizate și Alte Cele Mai Bune Practici

Unul dintre lucrurile pe care s-ar putea să le fi observat este timpul de încărcare aproape instantaneu atunci când navigați prin postările și paginile WPBeginner.

Pe lângă toate lucrurile pe care le-am menționat mai sus, noi, de asemenea, trișăm latența folosind un script numit instant.page, care utilizează preîncărcarea just-in-time.

Practic, înainte ca un utilizator să dea clic pe un link, el trebuie să treacă cursorul mouse-ului peste acel link. Când un utilizator a trecut cursorul timp de 65 ms (o perioadă foarte scurtă de timp), unul din doi va da, de fapt, clic pe link.

Scriptul Instant.page începe să preîncarce pagina respectivă în acest moment, deci când utilizatorul dă clic pe link, o mare parte din munca grea este deja făcută. Acest lucru face ca creierul uman să perceapă timpul de încărcare al site-ului ca fiind aproape instantaneu.

Pentru a activa Instant.page pe site-ul dvs., puteți pur și simplu să instalați și să activați pluginul WordPress Instant Page.

Acest script este destul de drăguț. Recomand cu tărie să verificați site-ul lor și să faceți clic pe butonul „testează-ți viteza de clic” pentru a vedea cum păcălește creierul.

Optimizarea imaginilor pentru web

Deși există noi formate de imagini în curs de dezvoltare, cum ar fi webp, nu le folosim încă. În schimb, cerem tuturor scriitorilor noștri să optimizeze fiecare imagine folosind instrumentul TinyPNG.

Poți, de asemenea, să automatizezi compresia imaginilor folosind plugin-uri precum Optimole sau EWWW Image Optimizer.

Cu toate acestea, personal prefer ca echipa să facă acest lucru manual, astfel încât să nu încărcăm fișiere mari pe server.

În prezent, nu facem nicio încărcare leneșă pentru imagini, dar intenționez să o adaug în viitorul apropiat, acum că Google are suport pentru încărcare leneșă integrat în Chrome 76.

Există, de asemenea, un ticket în nucleul WordPress pentru a adăuga această funcționalitate pe toate site-urile (sper cu adevărat că acest lucru se va întâmpla curând), deci nu trebuie să scriu un plugin personalizat.

Limitarea interogărilor HTTP + Cele mai bune practici

În funcție de pluginurile WordPress pe care le utilizați, unele vor adăuga fișiere CSS și JavaScript suplimentare la fiecare încărcare de pagină. Aceste solicitări HTTP suplimentare pot scăpa de sub control dacă aveți multe pluginuri pe site-ul dvs. web.

Pentru mai multe detalii, consultați cum pluginurile WordPress pot afecta timpul de încărcare al site-ului dvs..

Acum, înainte să trageți concluzia greșită că prea multe plugin-uri WordPress sunt rele, vreau să știți că există 62 de plugin-uri active care rulează pe site-ul WPBeginner.

Ceea ce trebuie să faceți este să combinați fișierele CSS și JavaScript acolo unde este posibil pentru a reduce cererile HTTP. Unele pluginuri de caching WordPress precum WP Rocket pot face acest lucru automat cu funcția lor de minificare.

Puteți urma, de asemenea, instrucțiunile din acest articol pentru a face acest lucru manual, ceea ce echipa noastră de la WPBeginner a făcut.

Pe lângă cererile HTTP pe care le adaugă plugin-urile și temele, doriți să fiți atenți și la alte scripturi terțe pe care le adăugați pe site-ul dvs., deoarece fiecare script va afecta viteza site-ului dvs.

De exemplu, dacă rulezi multe scripturi de publicitate sau scripturi de retargeting, acestea vor încetini site-ul tău. Poți folosi un instrument precum Google Tag Manager pentru a încărca scripturi condiționat, doar atunci când sunt necesare.

Dacă ești un site web susținut de publicitate, precum TechCrunch sau TheNextWeb, atunci sunt foarte puține lucruri pe care le poți face în legătură cu asta, deoarece eliminarea reclamelor nu este o opțiune.

Din fericire, WPBeginner nu se bazează pe scripturi publicitare terțe pentru a face bani. Doriți să vedeți cum face bani WPBeginner? Consultați postarea mea de pe blog despre veniturile WPBeginner.

Lecții învățate (până acum) + Gândurile mele finale

Aceasta este o infrastructură de hosting complet nouă și sunt sigur că voi învăța o mulțime de lucruri pe parcurs.

Până acum îmi plac îmbunătățirile de viteză, deoarece ne-au ajutat să ne creștem clasamentul SEO, iar zona noastră de administrare este mult mai rapidă.

Cu noul setup multi-server, am introdus un nou flux de implementare pentru a aduce WPBeginner la nivelul celorlalte site-uri de produse Awesome Motive.

Acest lucru înseamnă că acum avem un control al versiunilor adecvat integrat și există măsuri puse în aplicare pentru a mă împiedica să fiu nesăbuit (adică adăugarea de pluginuri fără testare adecvată, actualizarea pluginurilor din panoul de administrare fără testare etc.).

Aceste schimbări au pus, de asemenea, bazele pentru ca eu să ies în cele din urmă din dezvoltare și să predau frâiele site-ului WPBeginner echipei noastre de dezvoltare.

M-am rezistat acestui lucru ani de zile, dar cred că timpul se apropie și trebuie doar să accept.

Noul setup nu are cPanel sau WHM, așa că asta mă face practic inutil oricum, deoarece nu mai sunt foarte fluent cu linia de comandă.

Până acum am învățat două lecții importante:

În primul rând, actualizarea WordPress nu este atât de simplă din cauza sincronizării/replicării serverului. Când am actualizat blogul meu personal (SyedBalkhi.com) la WordPress 5.2, fișierele de actualizare nu s-au sincronizat corect pe unul dintre nodurile web, iar depanarea a durat mult mai mult decât era anticipat. Lucrăm la construirea unui proces mai bun de construire/testare pentru acest lucru.

În al doilea rând, trebuie să avem o comunicare mai bună între echipe, deoarece am avut o criză minoră din cauza neconfigurărilor incorecte ale load balancer-ului, care au dus la o perioadă de indisponibilitate. Pentru a înrăutăți lucrurile, eram într-un zbor transatlantic cu Turkish Airlines, iar WiFi-ul nu funcționa.

Din fericire, totul s-a rezolvat datorită timpului de răspuns rapid din partea echipei de găzduire, dar acest lucru ne-a ajutat să creăm mai multe Proceduri Operaționale Standard (SOP) noi pentru a gestiona mai bine incidentul în viitor.

În general, sunt foarte mulțumit de configurare și știu că unele dintre configurațiile/optimizările de caching care au fost făcute pentru WPBeginner vor deveni o parte standard a planurilor HostGator Cloud și găzduire WordPress Bluehost.

Cred că acest lucru ar trebui să fie de la sine înțeles că, dacă doar începi un site web, un blog sau un magazin online, atunci NU ai nevoie de această configurație sofisticată pentru întreprinderi.

Recomand întotdeauna să începeți cu planuri HostGator shared sau Bluehost shared, așa cum am făcut eu, și apoi să vă îmbunătățiți infrastructura de găzduire pe măsură ce afacerea dumneavoastră crește.

Puteți aplica multe dintre optimizările pe care le-am împărtășit mai sus la planurile dvs. actuale de găzduire WordPress.

De exemplu, planul standard al Bluehost vine deja cu un plugin de caching încorporat pe care îl puteți utiliza și oferă PHP 7 în mod implicit.

Puteți combina acest lucru cu un CDN + WAF precum Sucuri pentru a accelera semnificativ site-ul dvs. web.

Acum, dacă sunteți o companie de dimensiuni medii / enterprise care dorește o configurație de hosting similară, atunci vă rugăm să mă contactați prin intermediul formularului nostru de contact. Vă pot ajuta să vă îndrum în direcția corectă.

Mulțumiri speciale + Credite

În timp ce în articolul de mai sus, am acordat o mulțime de mulțumiri mărcilor HostGator și Bluehost, vreau să-mi fac timp să recunosc și să apreciez persoanele individuale care au lucrat în culise pentru a face acest lucru posibil.

În primul rând, vreau să mulțumesc echipei de conducere Endurance, Suhaib, Mitch, John Orlando, Mike Lillie și Brady Nord pentru că au acceptat să mă ajute cu provocarea.

De asemenea, vreau să mulțumesc lui Mike Hansen, David Collins, Rick Radinger, Chris Miles, David Ryan, Jesse Cook, David Foster, Micah Wood, William Earnhardt, Robin Mendieta, Rod Johnson, Alfred Najem și altora din echipa centrului de date pentru că și-au făcut treaba grea și au făcut-o să se întâmple.

Doresc să mulțumesc în mod special lui Steven Job (fondatorul DNSMadeEasy) pentru că mi-a răspuns rapid la întrebări și m-a ajutat să înțeleg mai bine anumite setări. De asemenea, vreau să mulțumesc lui Tony Perez și Daniel Cid de la Sucuri pentru că m-au susținut întotdeauna.

Nu în ultimul rând, vreau să îi aduc o recunoaștere specială lui Chris Christoff. El este co-fondatorul MonsterInsights și a fost suficient de amabil să mă ajute cu o mare parte din testare și implementare.

Întrebări Frecvente (FAQ)

Înțelegem că aceasta este o mulțime de informații tehnice de asimilat. Iată răspunsurile la unele dintre cele mai frecvente întrebări pe care le primim despre viteza și performanța WordPress.

Am nevoie de o configurație de hosting complexă precum cea a WPBeginner pentru a avea un site web rapid?

Absolut nu. Acest studiu de caz arată ce este posibil la nivel de întreprindere. Pentru majoritatea utilizatorilor, începerea cu un plan de găzduire partajată de calitate de la Bluehost sau HostGator este punctul de plecare perfect. Puteți face upgrade oricând pe măsură ce site-ul dvs. crește.

Care sunt cei mai importanți factori pentru viteza WordPress?

Cei trei piloni ai vitezei unui site web sunt infrastructura de găzduire web, caching-ul și o Rețea de Livrare de Conținut (CDN). Obținerea corectă a acestor trei elemente va rezolva cele mai mari blocaje de performanță pentru majoritatea site-urilor WordPress.

Pot să-mi fac site-ul WordPress rapid fără să fiu un expert tehnic?

Da. Deși acest articol este tehnic, nu trebuie să înțelegi totul în el. Urmând ghiduri prietenoase pentru începători, folosind un plugin de caching bun precum WP Rocket și optimizându-ți imaginile, poți avea un impact uriaș asupra vitezei site-ului tău fără nicio cunoștință de codare.

Utilizarea multor pluginuri încetinește WordPress?

Nu contează numărul de plugin-uri, ci calitatea lor. Un plugin bine codat va avea un impact minim. Cu toate acestea, plugin-urile prost codate pot adăuga cod inutil și interogări de baze de date care încetinesc site-ul.

Resurse suplimentare pentru îmbunătățirea performanței site-ului web

Dacă ați găsit acest studiu de caz util, avem și alte ghiduri care vă ghidează prin procesul pas cu pas de a face site-ul dvs. WordPress mai rapid. Consultați-le pentru mai multe sfaturi practice:

• Ghidul complet pentru creșterea vitezei și performanței WordPress – Ghidul nostru cel mai cuprinzător pentru utilizatori de toate nivelurile de experiență, pentru a îmbunătăți viteza site-ului.
• Cum să alegi cel mai bun hosting WordPress – Află cum să alegi furnizorul de hosting potrivit pentru nevoile și bugetul tău.
• De ce ai nevoie de un CDN pentru blogul tău WordPress – O explicație detaliată a modului în care funcționează un CDN și de ce este esențial pentru viteză.
• Blueprintul WPBeginner – Vezi lista completă de instrumente și pluginuri pe care le folosim pentru a rula WPBeginner astăzi.

Bonus: Iată cele mai bune pluginuri și instrumente WordPress pe care le recomand pentru toate site-urile WordPress. De asemenea, ați putea dori să aruncați o privire la Blueprintul WPBeginner, care enumeră pluginurile și instrumentele pe care le folosim astăzi pentru a gestiona site-ul WPBeginner.

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.