Ghidul final pentru accelerarea site-ului Divi

Publicat: 2019-07-11

Divi nu este orice constructor de pagini. Divi duce procesul de proiectare la un nivel complet nou, cu un sistem complet de design web care vă permite să proiectați vizual fiecare parte a site-ului dvs. web, fără a fi nevoie să depindeți atât de mult de software-ul de proiectare complicat al unor terțe părți (cum ar fi Photoshop sau Sketch). Ceea ce înseamnă că tema Divi (și pluginul Divi Builder) vor necesita mai multe resurse decât să spunem, tema de bază WordPress TwentyNineteen. Dar asta nu înseamnă că Divi trebuie să fie lent.

De fapt, Divi are o mulțime de îmbunătățiri de performanță care au fost adăugate în actualizările anterioare care au făcut ca site-urile Divi (și Divi Builder) să ruleze mai repede ca niciodată. În plus, Divi este construit având în vedere optimizarea terților. Atât de multe dintre pluginurile de optimizare a performanței care sunt utilizate pentru WordPress, pot fi, de asemenea, utilizate pentru a spori performanța vitezei pentru site-ul dvs. Divi.

În această postare, vom explora ce s-a făcut deja pentru a accelera Divi și ce putem face pentru a o face și mai rapidă. Iată câteva subiecte cheie pe care le vom aborda:

  • Cum este afișat un site web
  • Performanță Divi Speed ​​încorporată
  • Optimizarea bazei de date
  • Optimizare DNS
  • Gazduire buna
  • Optimizare TTFB
  • Caching
  • Minificare și agregare
  • Compresie Gzip
  • CDN
  • Optimizare imagine
  • Optimizare video
  • Utilizați pluginuri de calitate
  • Efectuarea de teste de viteză
  • Alte sfaturi
  • Cum să evitați posibilele conflicte cu pluginurile terților
  • Lista rapidă a practicilor și resurselor sugerate

Avantajele unui site web Fast Divi

Nu are rost să te străduiești să te convingi că ai nevoie de un site web mai rapid. Iată însă câteva beneficii evidente pe care nu le puteți ignora.

  • Rată de respingere scăzută - Vizitatorii nu vor părăsi site-ul la fel de mult.
  • Conversii crescute - Creșterea rapidă a site-ului dvs. poate duce la conversii mai bune.
  • SEO - Google îi place site-urile optimizate pentru viteză.
  • Credibilitate - site-urile web lente creează o primă impresie proastă vizitatorilor dvs.

Cât de repede este suficient?

În general, un obiectiv bun este să vă încărcați paginile web în 3 secunde sau mai puțin. Deși se pare că majoritatea clienților se așteaptă să fie de 2 secunde sau mai puțin în aceste zile. Dar, evident, fiecare site și pagină web sunt diferite.

Cum este afișat un site web Divi

Pentru a înțelege cum să accelerați site-ul dvs. Divi, vă poate ajuta să înțelegeți ce este implicat atunci când afișați un site web. Desigur, acest lucru nu este unic pentru Divi. Acest lucru s-ar aplica majorității site-urilor web WordPress.

Iată ce se întâmplă ..

  1. Introduceți o adresă URL (sau faceți clic pe un link) la pagina web pe care doriți să o vizitați.
  2. Browserul dvs. găsește adresa IP pentru acea adresă URL prin DNS (Domain Name Server) și face o cerere pentru acea adresă IP pe un server web (unde vă găzduiți site-ul).
  3. Serverul web (de obicei Apache) primește solicitarea și apoi preia pagina web pe care a stocat-o (cea pe care ați proiectat-o ​​în Divi și ați publicat-o în WordPress).
    • Dar, din moment ce pagina se bazează pe CSS extern și JavaScript utilizate de WordPress și tema Divi, acestea trebuie, de asemenea, să fie descărcate de pe server.
    • Pagina conține, de asemenea, PHP utilizat pentru preluarea datelor (cum ar fi imaginile) din baza de date MySQL.
  4. Odată ce toate resursele necesare au fost preluate de pe server și bază de date, pagina este în cele din urmă servită în browserul clientului.

Acest lucru poate suna ca o mulțime de pași doar pentru a afișa o pagină web, dar pentru un site WordPress, acest lucru este destul de standard, indiferent de tema pe care o utilizați. Și dacă vă gândiți la asta, întregul proces este destul de miraculos. Dar, din păcate, este ceva pe care utilizatorii îl considerăm de la sine înțeles. Astăzi, am crescut să ne așteptăm ca toate acestea să se întâmple în mai puțin de 3 secunde.

Deci, ce putem face pentru a ajuta procesul? În primul rând, trebuie să recunoaștem că, atunci când vine vorba de accelerarea unui site web, există lucruri care nu sunt sub controlul nostru. De exemplu, nu aveți control asupra tipului de browser pe care îl folosește un vizitator sau asupra vitezei conexiunii la internet. Dar, în afară de aceste lucruri, există lucruri pe care le putem și ar trebui să le facem pentru ca site-ul nostru web Divi să fie mai rapid.

În primul rând, să aruncăm o privire la unele dintre optimizările de viteză încorporate pe care le are deja Divi.

Performanță Divi Speed ​​încorporată

Generarea de fișiere CSS statice

Primele îmbunătățiri ale performanței vitezei Divi au venit cu Static CSS File Generation.

Înainte de această actualizare, toate CSS-urile generate de Divi Builder erau servite în linie la subsolul unei pagini. Dar, cu această îmbunătățire, Divi va prelua acum toate CSS-urile create de Divi Builder (și adăugate la Theme Customizer și Theme Options) și le va servi ca un fișier CSS static care a fost automat micșorat pentru dvs. Acest lucru reduce dimensiunea documentului unei pagini și permite browserului să difuzeze o versiune cache a fișierului CSS static pentru încărcarea mai rapidă a paginii.

Puteți alege să activați sau să dezactivați această opțiune în opțiunile temei sau în setările paginii.

Minimizarea și agregarea fișierelor CSS și JavaScript și livrarea optimizată a fonturilor Google

Al doilea val de îmbunătățiri ale performanței vitezei Divi a îmbunătățit viteza de încărcare a paginii și mai mult prin optimizarea livrării CSS, JavaScript și Google Fonts.

Actualizarea a inclus următoarele:

  • Minimizarea fișierelor CSS și JavaScript - Divi va reduce automat toate fișierele tematice CSS și JavaScript, reducând dimensiunea paginii și îmbunătățind timpul de încărcare.
  • Combinație de fișiere CSS și JavaScript - Divi va acumula automat (sau va combina) toate activele CSS și JavaScript într-un singur fișier. Acest lucru reduce numărul total de solicitări de pe pagină și accelerează timpul de încărcare pentru vizitatorii dvs.
  • Optimizarea cererii de fonturi Google - Divi optimizează livrarea fonturilor Google combinând solicitările de fonturi și eliminând fișierele de fonturi duplicate. Pentru paginile care utilizează diferite fonturi personalizate, această actualizare va ajuta la accelerarea timpilor de încărcare.

De asemenea, puteți activa sau dezactiva aceste opțiuni în opțiunile temei.

O temă Divi și un Builder vizual mai rapid

Deși cei mai mulți sunt preocupați de cât de repede se poate încărca site-ul lor Divi pentru vizitatorii din partea frontală, ajută și să aveți un backend mai rapid. Dezvoltatorii (și clienții) doresc să poată edita și proiecta site-ul web Divi cu rapiditate.

De aceea, al treilea val de îmbunătățiri ale vitezei și performanței Divi a inclus upgrade-uri atât la tema Divi, cât și la Divi Builder. Folosind mecanisme creative de cache și alte optimizări de performanță, viteza de încărcare a paginii a fost îmbunătățită la instalările standard Divi. În plus, WordPress Admin și Divi Builder funcționează și mai rapid, făcând procesul de editare și proiectare mult mai rapid.

Memorarea în cache se află în culise și are mai mult de-a face cu modul în care este generat Divi HTML / CSS și nu cu modul în care paginile sunt servite vizitatorilor dvs. Acest lucru se aplică fișierelor tematice Divi. Divi nu încearcă să cache, să micșoreze sau să combine fișiere terțe. Deci, există încă loc pentru mai multe îmbunătățiri folosind cache-ul terților și pluginurile de performanță care vor minimiza și combina CSS sau JavaScript suplimentare utilizate de site-ul dvs. (cum ar fi cele care sunt incluse în tema dvs. Divi Child sau alte pluginuri terțe) și vor livra cache pagini HTML statice pentru vizitatori.

Starea sistemului Divi

Deși nu este o îmbunătățire tehnică a vitezei, actualizarea Divi pentru a include un raport integrat de stare a sistemului va ajuta cu siguranță la identificarea oricăror probleme cu mediul site-ului dvs. web care ar putea provoca timpi de încărcare a paginii mai lente.

De exemplu, starea sistemului dvs. poate arăta că utilizați o versiune mai veche de PHP care poate încetini site-ul. Vă recomandăm să utilizați cea mai recentă versiune stabilă de PHP. Acest lucru nu numai că va asigura compatibilitatea cu WordPress și Divi, dar va accelera și site-ul dvs. web, ducând la mai puține probleme legate de memorie și CPU. Pentru mai multe informații, consultați postarea noastră despre cum să vă actualizați versiunea PHP.

Făcând site-ul dvs. Divi chiar mai rapid

Pentru ca site-ul dvs. Divi să fie mai rapid necesită multe dintre aceleași îmbunătățiri de performanță necesare pentru majoritatea site-urilor web WordPress. Cei dintre voi care ați folosit WordPress poate că ați făcut deja unele sau toate aceste optimizări. Sperăm că aceste sugestii vă vor ajuta să duceți viteza site-ului Divi la nivelul următor.

Optimizarea și curățarea bazei de date

Spre deosebire de site-urile HTML statice, WordPress este un CMS dinamic care folosește PHP pentru a prelua datele stocate într-o bază de date MySQL pentru a afișa aceste date pe o pagină web. Acest lucru face ca administrarea site-ului dvs. să fie ușoară, dar dezavantajul este că durează mai mult timp pentru încărcarea paginilor, deoarece trebuie să localizeze datele din baza de date înainte de a încărca pagina. În general, site-urile HTML statice vor fi mai rapide decât site-urile WordPress din acest motiv.

O modalitate de a păstra un site Divi cât mai rapid posibil este să vă asigurați că aveți o bază de date curată. Fișierele site-ului WordPress sunt organizate în baza de date pe tabele și de fiecare dată când adăugați date noi pe site-ul dvs. (cum ar fi teme și pluginuri), creați tabele noi și mai multe date. Așa cum v-ați aștepta, cu cât este mai încordată baza de date, cu atât va fi mai greu să găsiți datele. Acest lucru duce la un site web mai lent.

Deci, dacă ați adăugat tema Divi pe site-ul dvs. după ani de încercări de alte teme și nenumărate plugin-uri, este posibil să aveți niște date stocate de care nu mai aveți nevoie. Chiar dacă dezinstalați un plugin, aceasta nu înseamnă că toate datele au dispărut în baza de date. Pluginurilor le place să lase câteva date acolo în cazul în care reinstalați pluginul. Nu mișto, știu. Această informație rămasă poate duce la aglomerații inutile și poate încetini site-ul.

La fel ca fiecare om are nevoie de o organizație pentru a funcționa mai eficient, fiecare site WordPress (Divi sau nu) are nevoie de o bază de date curată pentru a încărca paginile mai repede. Deci, dacă ați avut site-ul dvs. de ceva timp, curățarea acestuia poate accelera semnificativ lucrurile.

Aș sugera să folosiți un plugin pentru aceasta. WP Optimize pare a fi o opțiune credibilă. Dar există și alte pluginuri de baze de date WordPress de luat în considerare.

Sau, dacă știți ce faceți, îl puteți face întotdeauna manual în MySQL.

Pe lângă curățarea bazei de date WordPress, poate doriți să faceți WordPress și mai ușor reducând datele pe care le stochează. De exemplu, WordPress va reține automat articolele șterse din coșul de gunoi timp de 30 de zile. Poate doriți să reduceți perioada respectivă la 7.

Optimizare DNS

Primul lucru care trebuie să se întâmple atunci când un utilizator accesează adresa URL a uneia dintre paginile dvs. web se numește căutare DNS. De îndată ce URL-ul este introdus (sau făcut clic), ISP-ul vizitatorului trimite o interogare DNS către serverele de nume pentru a găsi adresa IP asociată domeniului dvs. (fiecare domeniu / site web are o adresă IP specifică). În esență, o căutare DNS este ca și cum ai căuta numele de domeniu într-o agendă telefonică pentru a găsi adresa IP a domeniului respectiv.

Dar când un utilizator vizitează o pagină de pe site-ul dvs., pagina poate avea mai multe domenii care trebuie accesate pentru a deschide pagina. Așadar, ați putea face 3 sau 4 căutări de domeniu pe o singură încărcare a paginii (poate mai multe).

În general vorbind, majoritatea furnizorilor gratuiți de DNS, cum ar fi Godaddy și Namecheap, vor fi, în general, mai încet decât v-ar plăcea probabil.

Cea mai bună opțiune gratuită care vă va spori viteza de căutare DNS este probabil Cloudflare. Au cea mai rapidă performanță DNS înregistrată pe DNSPerf.com. Acest lucru va fi semnificativ mai rapid decât GoDaddy și Namecheap. Și puteți chiar optimiza cloudflare pentru a fi utilizat pentru DNS fără celelalte servicii ale acestora (cum ar fi CDN sau WAF), dacă doriți.

De exemplu, vă recomandăm să utilizați Cloudflare pentru DNS și securitate (detectare DDOS) și KeyCDN (sau MaxCDN) pentru CDN-ul dvs. Se pare că ar fi o combinație excelentă.

Configurarea CloudFlare

Cloudflare este foarte ușor de configurat. Nu trebuie să vă faceți griji în legătură cu schimbarea găzduirii dvs. sau cu orice altceva în prealabil. Tot ce trebuie să faceți este să parcurgeți configurarea lor de 5 minute, care începe cu intrarea în domeniul dvs.

Vor prelua automat înregistrările DNS curente.

Principalul lucru pe care va trebui să-l faceți pentru a finaliza configurarea este să schimbați serverele de nume implicite de pe furnizorul dvs. DNS actual (cum ar fi GoDaddy) în serverele de nume Cloudflare.

Apoi, vă puteți gestiona DNS-ul cu ușurință din tabloul de bord al acestora.

Și la fel, aveți un impuls în viteza de căutare DNS, mai multă securitate și un CDN pentru site-ul dvs. (plus multe altele).

Gazduire buna

Dacă sunteți deloc serios cu privire la viteza (și performanța) site-ului dvs., începe cu alegerea unui bun furnizor de găzduire. De fapt, puteți face totul bine pentru a vă optimiza site-ul pentru viteză și a avea în continuare un site lent din cauza gazdei dvs. Iar furnizorii de hosting foarte buni vor face multe dintre aceste optimizări de viteză pentru dvs., astfel încât să nu vă faceți griji.

Tipuri de găzduire

Găzduire tradițională (partajată)

Acesta este de departe cel mai popular tip de găzduire pentru utilizatorii WordPress / Divi. Dar, din păcate, este cea mai proastă opțiune pentru optimizarea vitezei. Cu găzduirea partajată tradițională, veți partaja toate resursele disponibile ale unui server cu alții. Deoarece partajați, costul pentru acest tip de găzduire este redus. Însă, dezavantajul este că nu puteți controla cât trafic primesc acele alte site-uri pe serverul dvs. partajat. Astfel, puteți cădea cu ușurință pradă perioadelor de încărcare extrem de lente și chiar și a momentelor în care site-ul este complet defect. Deci, este mai bine să aveți o idee bună despre cât de mult trafic poate suporta găzduirea dvs. partajată.

Gazduire dedicata

Cu găzduirea dedicată, aveți propriul dvs. server dedicat doar pentru dvs. Nu este nevoie să partajați resurse cu nimeni altcineva. Acest lucru înseamnă că veți avea timp de încărcare rapid mai previzibil și mai consistent pentru site-ul dvs. web. Aceasta este de obicei oferită ca o opțiune de top pentru corporațiile mari la un cost premium ridicat.

Gazduire VPS

Gazduirea Virtual Private Server (VPS) este practic o cale de mijloc între găzduirea partajată și cea dedicată. Spațiul serverului dvs. este „privat”, ceea ce înseamnă că este complet separat de toți ceilalți (cam ca o comunitate închisă pentru fișierele site-ului dvs.). Deci, fișierele site-ului dvs. nu sunt expuse altora de pe server. Spre deosebire de găzduirea partajată, un VPS are la dispoziție o cantitate dedicată de resurse de sistem (sau putere) pentru a vă asigura că site-ul dvs. primește întotdeauna ceea ce are nevoie pentru a livra în mod constant timpi de încărcare rapide. Deci, nu va trebui să vă faceți griji cu privire la creșterea traficului altor site-uri web care afectează viteza site-ului dvs.

Dar, cu excepția cazului în care aveți un VPS gestionat, acest tip de găzduire este în special pentru acele tipuri de bricolaj care sunt suficient de pricepuți pentru a se descurca singuri. Pentru mai multe informații, iată o comparație de performanță între găzduirea VPS și găzduirea partajată.

Găzduire în cloud

Cu cloud hosting, aveți acces la o rețea de servere (în cloud) în loc de un singur server fizic. Acest lucru vă permite să extrageți toate resursele de care aveți nevoie din această rețea de servere, după cum este necesar. În esență, aveți o partiție virtuală a spațiului server care este susținută de puterea și resursele întregii rețele. Deci, nu trebuie să vă faceți griji cu privire la creșterea traficului, așa cum ați face în găzduirea partajată. Găzduirea în cloud este extrem de flexibilă și adaptabilă nevoilor dumneavoastră.

O diferență principală între găzduirea în cloud și găzduirea VPS este că găzduirea VPS are o cantitate dedicată (sau limitată) de resurse care poate fi epuizată sau nu. Cloud Hosting, pe de altă parte, este capabil să vă mențină resursele disponibile fără a fi epuizate, deoarece poate trage întotdeauna de pe celelalte servere din cloud. În teorie, găzduirea în cloud oferă viteze mari mai consistente și fiabile. Deci, dacă sunteți serios cu privire la viteză, găzduirea în cloud este o opțiune excelentă (poate chiar cea mai bună).

Găzduire WordPress gestionată

Găzduirea WordPress gestionată se referă de obicei la găzduirea partajată gestionată de experți WordPress. Nu este la fel de „privat” ca un VPS sau la fel de puternic ca un mediu dedicat de găzduire. Dar ajută la maximizarea vitezei mediului dvs. partajat, făcând ca experții WordPress să facă treaba. O fac bine pentru că își adaptează serviciile și își configurează serverele strict pentru site-urile WordPress. Și o mulțime dintre ele vin cu multe funcții încorporate interesante și convenabile, cum ar fi mediile de stocare cu un singur clic, stocarea în cache a site-ului, implementarea CDN cu un singur clic, copiile de rezervă automate, SSL-urile și multe altele. Sunt perfecte pentru cei dintre noi care nu doresc să se bazeze pe (sau să gestioneze) o grămadă de plugin-uri pentru optimizarea, securitatea și gestionarea vitezei de bază.

Companii de găzduire de luat în considerare

Există multe companii de găzduire WordPress acolo. Și, dacă este posibil, veți dori să evitați găzduirea partajată tradițională (care nu este gestionată) dacă sunteți serios cu privire la optimizarea vitezei. Dar dacă aveți un site simplu și nu sunteți dispus să plătiți banii suplimentari pentru gestionarea, Siteground pare a fi unul dintre cele mai bune pentru găzduirea partajată.

Pentru moment, iată o listă rapidă de gazde de luat în considerare pentru un site web Divi mai rapid.

  • SiteGround - oferă găzduire partajată, găzduire WP gestionată, găzduire dedicată și cloud (vizitați SiteGround / recenzia noastră)
  • Cloudways - este specializat în găzduire cloud gestionată bazată pe SSD și, de asemenea, a gestionat WP Hosting (vizitați Cloudways / recenzia noastră)
  • Kinsta - este specializat în găzduirea WP gestionată (vizitați Kinsta / recenzia noastră)
  • WPEngine - este specializat în găzduirea WP gestionată (vizitați WPEngine / recenzia noastră)
  • Flywheel - este specializat în găzduirea WP gestionată (vizitați Flywheel / recenzia noastră)

Această listă este vârful aisbergului. Sunt sigur că există și alții care vor funcționa excelent pentru site-ul Divi / WordPress. Dacă sunteți în căutarea unui site de recenzii de găzduire credibil, consultați Signal de revizuire.

De asemenea, puteți consulta acest ghid pentru a vă ajuta să faceți alegerea.

Optimizarea timpului până la primul octet (TTFB)

Timpul până la primul octet (TTFB) este timpul necesar utilizatorului pentru a primi primul octet de date ale site-ului web de la gazda / serverul dvs. Deci, atunci când un utilizator face o solicitare HTTP (vă încarcă pagina web), TTFB va fi în esență acea perioadă de așteptare înainte de a primi date.

Gândiți-vă la asta ca la mâncarea rapidă. Restaurantul poate fi optimizat pentru a vă oferi mâncarea rapidă. De fapt, este posibil să aibă deja un hamburger pe tine. Dar trebuie totuși să așteptați la coadă pentru a comanda. Această perioadă de așteptare este ceea ce vă puteți gândi ca fiind momentul pentru a mușca prima dată (vedeți ce am făcut acolo).

TTFB ar trebui să aibă aproximativ 200 ms (conform Google). Dar pentru site-urile care sunt găzduite slab și care nu au fost optimizate, TTFB poate dura cu ușurință 2 secunde sau mai mult.

Întârzierea TTFB pe site-ul dvs. Divi este de obicei cauzată de următoarele:

  • Cantitatea de conținut dinamic care trebuie primit. Acest lucru poate fi redus cu cache, optimizarea bazei de date și un CDN.
  • Cantitatea de trafic pe care îl întâmpină serverul dvs. în acel moment. Furnizorii de găzduire tradiționali (sau partajați) fac dificilă reducerea TTFB-ului în cauză, deoarece partajați resurse cu alții pe același server. Creșterile din traficul lor vor reduce viteza de procesare a serverului dvs.
  • Configurarea serverului dvs. web . Un bun furnizor de găzduire WordPress vă poate ajuta cu TTFB-ul site-ului dvs., oferind o infrastructură solidă de backend și optimizând configurația serverului dvs. web (lucrurile aproape scăpați de sub controlul dvs.).

Pe scurt, dacă doriți un impuls rapid în TTFB, obțineți o găzduire mai bună și urmați restul pașilor de mai jos.

Caching

Există patru tipuri principale de cache care pot fi implementate pentru a accelera site-ul dvs.

  • Memorarea în cache a paginii - Acest proces stochează versiunile HTML statice cache ale paginii dvs. pentru livrare rapidă.
  • Browser Caching - Acest lucru vă oferă mai mult control asupra conținutului care poate fi stocat în cache de browser și pentru cât timp. Doar unele plugin-uri pot face acest lucru, deci ar putea fi mai bine să o faceți manual pentru mai mult control. Acest lucru vă va ajuta să aveți grijă de „Leverage Browser Caching” metrix atunci când efectuați teste de viteză.
  • Memorarea în cache a CDN - Distribuie paginile / fișierele site-ului cache de pe un CDN cel mai apropiat de utilizatori.
  • Caching de obiecte - cache de obiecte cache cache de rezultate de interogare repetate pe care PHP le inițiază pentru a extrage date din baza de date și a le servi utilizatorului. Acest lucru este diferit de cache-ul bytecode care stochează o versiune cache a codului PHP compilat utilizat pentru afișarea site-ului dvs. web.

Divi efectuează cache pentru a servi fișierele JS și CSS statice ale Divi din culise. Dar acest lucru este în primul rând pentru fișierele tematice Divi pentru o mai bună funcționalitate Divi Builder.

Este încă nevoie să utilizați cache-ul pentru site-ul dvs. WordPress ca întreg. Majoritatea site-urilor au mai multe pluginuri care vin cu propriile fișiere CSS care ar putea fi necesare să fie combinate, minimizate și memorate în cache. Deci, puteți profita cu siguranță de un plugin terță parte pentru a servi versiuni HTML statice cache ale tuturor paginilor dvs.

Pluginurile populare de cache includ:

  • WP Rocket
  • Cache Enabler (citiți recenzia noastră)
  • W3 Total Cache (citiți recenzia noastră)
  • W3 Super Cache (citiți recenzia noastră)
  • Cometa Cache (citiți recenzia noastră)
  • Cea mai rapidă cache WP

Sfat: ori de câte ori aveți activată stocarea în cache a paginii pe site-ul dvs. utilizând un plugin, veți dori să vă asigurați și să ștergeți (sau să ștergeți) memoria cache de fiecare dată când efectuați modificări site-ului dvs. web pentru a vă asigura că dvs. și vizitatorii dvs. primiți cea mai recentă versiune a site.

Minificare și agregare

Minimizarea face ca fișierele site-ului dvs. să fie mai mici. Reducerea fișierelor site-ului dvs. (CSS, JavaScript, HTML) elimină toate acele caractere inutile (cum ar fi spațiile și întreruperile de pagină), astfel încât dimensiunea fișierului să se micșoreze. Acest lucru reduce timpul necesar browserului pentru a încărca conținutul unei pagini.

Agregarea implică combinarea fișierelor site-ului pentru a reduce solicitările totale de pe pagină și pentru a accelera timpul de încărcare pentru vizitatorii dvs.

După cum sa menționat mai devreme, Divi minimizează și combină fișierele Javascript și CSS care sunt utilizate în mod implicit de tema Divi. Deci, din punct de vedere tehnic, nu trebuie să vă faceți griji cu privire la utilizarea pluginului terță parte pentru a minimiza și combina în continuare fișierele Jivi și CSS ale lui Divi. Cu toate acestea, Divi nu minimizează ieșirea HTML. Deci, puteți beneficia de un plugin terță parte pentru a minimiza (și a memora în cache) întregul HTML al unei pagini.

În plus, aproape fiecare site Divi va depinde de fișiere din afara temei Divi (cum ar fi pluginuri sau alte fișiere adăugate la tema copil) care vor beneficia de reducerea și combinarea fișierelor CSS și JS. Acest lucru poate fi gestionat cu ușurință de un plugin.

Unele pluginuri credibile care vor minimiza fișierele site-ului dvs. includ:

  • Optimizează automat
  • W3 Total Cache (citiți recenzia noastră)
  • W3 Super Cache (citiți recenzia noastră)
  • WP Rocket (plătit)

Aceste plugin-uri ar trebui să funcționeze cu Divi. Dar nu există nicio modalitate de a evalua toate nuanțele unui site web pentru a spune că unul va funcționa cel mai bine pentru toată lumea. Uneori, pluginurile de la terțe părți vor micșora automat fișierele JavaScript într-un mod care ar putea provoca erori / probleme, așa că vă rugăm să vă asigurați că vă testați site-ul web cu atenție. În general, este întotdeauna sigur să minimizați fișierele CSS. Dar aveți grijă cu acele fișiere JavaScript.

Și dacă există un conflict, poate fi necesar să dezactivați opțiunile încorporate ale Divi și să lăsați pluginul terță parte să gestioneze lucrurile.

Și dacă nu doriți să vă bazați pe un plugin pentru acest lucru, îl puteți face întotdeauna manual. Pentru mai multe informații despre cum puteți face acest lucru, consultați această postare completă despre cum să minimizați CSS-ul, HTML-ul și JavaScript-ul site-ului dvs. web.

Compresie Gzip

Compresia Gzip este mai importantă decât reducerea, deoarece poate reduce dimensiunea paginii cu până la 70%.

Activarea compresiei Gzip pe site-ul dvs. Divi vă poate oferi un impuls mare de viteză. Dacă sunteți familiarizat cu crearea de fișiere comprimate (sau comprimate) pe computer, aveți deja o înțelegere de bază a modului în care funcționează compresia Gzip. Creăm fișiere zip (sau foldere) pentru a micșora conținutul fișierului (sau folderului). De ce? Deci, putem încărca și descărca fișierul mult mai repede! Compresia Gzip face același lucru pentru site-ul dvs. web. Îi spune serverului să comprime toate fișierele pe care le poate în versiuni mai mici, astfel încât să poată fi servit clientului mult mai repede. Acest lucru poate crește cu adevărat viteza de încărcare a paginii.

Acesta este unul dintre acele domenii pe care le puteți îmbunătăți viteza Divi chiar și pe o nouă instalare a temei. Deoarece Divi minimizează deja fișierele temei de bază oricum, compresia Gzip va face aceste fișiere și mai mici. Compresia Gzip vă va face fișierele mult mai mici decât ar putea vreodată să fie minificate.

Multe dintre pluginurile de performanță WordPress (cum ar fi W3 Total Cache și WP Super Cache) vor include compresia Gzip ca opțiune.

Iată câteva pluginuri care acceptă compresia Gzip:

  • WP Rocket
  • W3 Total Cache (citiți recenzia noastră)
  • Cea mai rapidă cache WP

Și unii furnizori de găzduire vor permite compresia gzip în mod automat, deoarece este atât de neinteresant pentru performanța site-ului. Simțiți-vă liber să verificați dacă compresia Gzip este activată pe site-ul dvs.

Cea mai obișnuită modalitate de a activa compresia Gzip (pe serverele Apache) este să o faceți manual folosind mod_deflate. Și tot ce trebuie să faceți este să accesați site-ul dvs. web (rădăcina) prin FTP (asigurați-vă că afișați fișierele ascunse). Apoi copiați și lipiți următorul bloc de cod în partea de jos a fișierului dvs. .htaccess.

Iată codul:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

CDN

StackPath CDN PoP

O rețea de livrare a conținutului (CDN) duce viteza site-ului la un alt nivel. După cum sugerează și numele, un CDN este o rețea pentru livrarea de conținut. Rețeaua este formată din servere din întreaga lume care stochează fișiere statice cache (imagini, videoclipuri, scripturi etc.) ale conținutului site-ului dvs. web. Apoi, atunci când o persoană trimite o cerere pentru respectivul conținut (vizitând site-ul dvs. web), serverul (sau PoP) cel mai apropiat de persoana respectivă va livra conținutul. Fără un CDN, fișierele site-ului dvs. web sunt accesibile dintr-o locație a serverului (oriunde gazda dvs. stochează acele fișiere), deci cu cât vă aflați mai departe de acel server, cu atât va fi mai lent să livrați conținutul site-ului web browserului dvs.

Gândiți-vă la asta, când doriți să vi se livreze o pizza acasă, nu alegeți pizza la 30 de mile distanță. Tu o alegi pe cea de 5 mile depărtare, pentru că vrei să fie livrată cât mai curând posibil (dacă ești un om normal care iubește pizza la fel de mult ca mine). Un CDN funcționează în mod similar. Deoarece doriți ca site-ul web să apară în browserul dvs. cât mai curând posibil, un CDN va avea fișierele site-ului dvs. gata pentru a fi livrate de pe serverul cel mai apropiat de locația dvs. Deci, dacă fișierele site-ului dvs. sunt stocate pe un server din San Francisco și cineva din Londra trage site-ul dvs., poate dura 1 sau 2 secunde pentru a primi acele date de la un server aflat la mii de kilometri distanță. Dar cu un CDN, puteți livra aceleași date de la un server din Londra în jumătate din timp. E o mare diferență!

Deci, chiar dacă nu vedeți amploarea rezultatelor acasă, accelerați livrarea site-ului dvs. în locuri din întreaga lume.

Există o mulțime de modalități de a obține un CDN pentru site-ul dvs. Multe companii de găzduire vor include o opțiune pentru implementarea unui CDN cu serviciul lor. Și există platforme de rețea precum Cloudflare și MaxCDN (acum StackPath) care oferă capacități CDN împreună cu alte caracteristici de performanță și securitate.

Iată câteva platforme CDN credibile de luat în considerare:

  • KeyCDN (puteți utiliza chiar și pluginul CDN Enabler WordPress pentru a integra KeyCDN; Această configurare ar funcționa bine și cu Cache Enabler)
  • MaxCDN (acum StackPath)
  • Amazon Cloudfront
  • Sucuri

Există câteva plugin-uri de cache, cum ar fi WP Total Cache sau CDN Enabler, care includ o opțiune pentru integrarea automată a mai multor furnizori de CDN, ceea ce este destul de convenabil.

Iată câteva plugin-uri cu suport CDN:

  • Cea mai rapidă cache WP
  • WP Rocket
  • Optimizează automat
  • W3 Total cache
  • WP Super Cache
  • CDN Enabler

Optimizare imagine

Optimizarea imaginii este unul dintre cei mai mari vinovați pentru încărcarea lentă a paginilor. Acest lucru se datorează probabil cât de ușor este de ignorat. La urma urmei, cât de multă pagubă poate face o imagine de fundal unei pagini web? Ei bine, s-ar putea să fii surprins. Doar câteva imagini mari care nu au fost optimizate pentru web ar putea avea ramificații catastrofale la viteza de încărcare a paginii. Și să recunoaștem, site-ul dvs. va avea probabil multe imagini.

Într-adevăr, nu este suficient de stresant necesitatea esențială pentru optimizarea imaginii. Fiecare site web ar trebui să facă acest lucru. Numai compresia imaginii vă poate face site-ul vizibil mai rapid, iar dimensiunile mai mici ale imaginii vor economisi spațiu de stocare și lățime de bandă (câștig-câștig!). Dar există și alte optimizări importante ale imaginii la care ar trebui să vă gândiți.

Pe scurt, veți dori să faceți următoarele atunci când vă optimizați imaginea pentru web:

Utilizați tipul de fișier potrivit

Când vine vorba de imagini de pe web, ar trebui să rămâneți cu următoarele tipuri de fișiere de imagine:

  • JPG - Acesta ar trebui să fie tipul de fișier preferat pentru majoritatea imaginilor / fotografiilor pe care le utilizați pe site-ul dvs., deoarece puteți obține imagini extraordinare la o dimensiune mai mică decât fișierele PNG sau GIF. Evitați utilizarea formatului PNG pentru lucruri precum imagini de fundal sau fotografii, cu excepția cazului în care aveți nevoie de un fundal transparent.
  • PNG - Utilizați PNG pentru imagini care au nevoie de un fundal transparent. JPG nu acceptă transparența.
  • SVG - Acesta este un format vector care oferă detalii extrem de clare folosind codul HTML. SVG-urile sunt excelente pentru sigle, pictograme și alte animații vectoriale.

Redimensionați și decupați imaginile

Nu vrei niciodată ca imaginea ta să fie mai mare decât trebuie. De exemplu, dacă adăugați un logo în opțiunile temei Divi, în majoritatea cazurilor aveți nevoie doar de acesta pentru a avea o lățime de 100 px. Deci, nu încărcați un logo cu o lățime de 5000 px și forțați-l pe Divi să redimensioneze acea imagine pentru dvs. Rezultatul poate arăta similar în partea din față, dar acea dimensiune mare distruge timpul de încărcare a paginii.

Când încărcați imagini pe pagina dvs. folosind Divi, este util să știți cât de mari trebuie să fie aceste imagini în structura coloanei Divi. Acest ghid final vă poate ajuta să vă îndreptați în direcția corectă. (Cu toate acestea, există noi structuri de coloane care au fost adăugate de la această postare, așa că vom încerca să le actualizăm în curând).

Comprimă dimensiunea fișierului

Veți dori să reduceți dimensiunea fișierului imagine până la punctul respectiv înainte de a observa o scădere a calității. Acest lucru se face prin compresia imaginii. Majoritatea editorilor de fotografii, pluginuri și site-uri precum tinypng.com comprimă imagini utilizând compresie fără pierderi (care micșorează fișierul de imagine fără a pierde nici o calitate a imaginii) și compresie inteligentă cu pierderi (care scade dimensiunea fișierului de imagine prin reducerea metadatelor și a calității imaginii într-un mod care nu este cu adevărat vizibil de către utilizator).

Profitați de instrumentele de optimizare a imaginii

Dacă puteți, vă sugerez să vă optimizați imaginile pentru internet înainte de a le încărca pe site-ul dvs. Divi. Acest lucru se poate face prin intermediul editorilor foto, cum ar fi Photoshop, care includ opțiunea „Salvare pentru web”. În plus, puteți utiliza un site terț gratuit, cum ar fi TinyPNG.com sau Compressor.io, pentru a comprima imaginea înainte de a o încărca pe site-ul dvs.

Există câteva plugin-uri grozave care vor efectua compresia imaginii pentru dvs. Unele plugin-uri (cum ar fi Imagify) vor comprima imaginile deja utilizate pe site-ul dvs. și vor comprima automat imaginile pe măsură ce le încărcați în biblioteca dvs. WordPress Media. Rețineți că utilizarea unui plugin pentru acest lucru poate fi impozitată pe site-ul dvs. în timp ce comprimați aceste imagini, astfel încât este mai bună practică să faceți optimizarea imaginii în prealabil, dacă este posibil.

Iată câteva instrumente și pluginuri excelente de optimizare a imaginilor pe care le puteți utiliza:

  • Site-uri web:
    • Compressor.io
    • Tinypng.com
  • Pluginuri:
    • Imaginați-vă
    • Comprimarea și optimizarea imaginii Smush
    • Racheta WP

Pentru mai multe informații, consultați o comparație cu 6 pluginuri de optimizare a imaginii de calitate.

Suport SRCSET încorporat Divi

Imaginile responsive cu suport nativ SRCSET sunt, de asemenea, integrate în Divi. Acest lucru îmbunătățește optimizarea imaginilor utilizate în Divi și mai mult prin difuzarea imaginilor reduse la dimensiunea potrivită pentru diferite afișaje receptive (cum ar fi tableta și telefonul).

Optimizare video

Optimizarea video este puțin mai dificilă decât optimizarea imaginii, dar cu siguranță nu mai puțin importantă. Fișierele video pot fi mari și, prin urmare, extrem de impozante la viteza de încărcare a paginii. Și dacă găzduiești o mulțime de videoclipuri pe serverul tău (de exemplu, în galeria media WordPress), vei întâlni problema suplimentară a spațiului pe disc. De aceea, este adesea recomandat să utilizați servicii terțe (precum YouTube sau Vimeo) pentru a vă găzdui videoclipurile. Sau, puteți lua în considerare descărcarea conținutului media video pe o platformă de stocare precum Amazon S3. Acest lucru vă va permite să vă conectați la acele videoclipuri din modulul video Divi, fără ca acestea să fie nevoite să încetinească serverul.

Dacă aveți de gând să vă găzduiți videoclipurile, va trebui cu siguranță să reduceți dimensiunea videoclipului pentru o încărcare mai rapidă. Puteți reduce cu ușurință fișierele video folosind un instrument gratuit precum Handbrake (care este ușor de utilizat).

Pentru mai multe informații despre modul de utilizare a videoclipului în Divi (cum ar fi adăugarea unui URL video găzduit de o terță parte la un modul video), consultați acest ghid final.

Utilizați pluginuri de calitate

Evident, cu cât mai puține fișiere trebuie încărcate de un site web, cu atât va fi mai rapid. Deci, trebuie să aveți în vedere cantitatea de pluginuri pe care le utilizați. If you have plugins (or Themes) that you aren't using, make sure you delete them. They can be harmful to your website performance and a serious security risk. But quality is the more important factor when it comes to plugins. In fact you can have 20 to 30 quality plugins that won't slow down your site as much as one bad one will. In general, make sure you choose plugins that have stood the test of time and have great reviews. And always test how a plugin affects your website performance with before and after speed tests to be sure.

Conducting Speed Tests

You probably wouldn't be reading this article if you haven't done at least one speed test on your website. And rightly so, it is important to know how fast your pages are loading for visitors. Conducting a speed test is one of the easiest things you can do. There are tons of websites that will do this for you for free. And the metrics they provide will be invaluable for identifying ways you can further optimize your site for better performance.

Here are a few great places to start:

  • GTMetrics
  • Pingdom
  • Google Page Insights

The results of these tests are what drive many of us to start optimizing our Divi site for faster load times. They provide a helpful breakdown of how your web page performs in a variety of areas. Then you can use their recommendations as a checklist to work through as you optimize your site.

The best way to use these online speed testing tools for you Divi WordPress site is to run a test on a page first before you do any optimizations. Then you can use this as a base to compare future tests as you make changes. After each optimization you make, you can see if your score improves.

For example, you may notice that using one caching plugin will work better than another. Don't be afraid to test multiple plugins for best performance.

Here is a helpful WordPress optimization guide by GTMetrix that will be helpful.

As you implement the speed optimizations to your site, you should see improvements in the following areas:

  • Fully loaded time/Onload time (this is the most important metric you are trying to knock down)
  • Total Page Size (things like minification, image optimization with help with this)
  • Requests
  • PageSpeed/YSlow scores
  • Serve scaled images
  • Optimize images
  • Leverage browser caching
  • Minify CSS/HTML
  • Enable gzip compression
  • Make fewer HTTP requests
  • Add Expires Headers

For more info, check out our post on how to improve your google page speed score.

The Goal is Speed, Not Perfection

It can be easy to get bogged down with testing your website and optimizing it to perfection. But no website will be perfect. You may even find that improving certain speed test performance grades may actually slow down your page load time. That's because even those speed tests aren't perfect either. Like this article, they are merely a guide to help improve your website performance and speed.

How to Avoid Possible Conflict with Divi's Built-in Performance Optimizations and Third Party Plugins

Whenever you deploy a third party plugin for minification and caching, you may encounter certain conflicts. For example, you may find that a Divi module doesn't display correctly or that certain JavaScript files aren't rendering properly.

To avoid these types of conflicts, you can disable Divi's built-in optimizations and let the third party plugin handle it for you. The three option you will want to disable are:

  • Static CSS File Generation
  • Minify and Combine Javascript Files
  • Minify and Combine CSS Files

You can disable the options to minify and combine Javascript and CSS files by going to Theme Options > General tab.

You can disable the option for static CSS file generation under Theme Options > Builder > Advanced.

Other Tips

We've pretty much covered all the major factors that contribute to faster Divi/WordPress websites. But there are a lot more things to consider that could improve your speed even more.

  • Having a correct Divi child theme setup
  • Changing your WordPress Login URL to keep those bots from overloading your server. This would be a good chance to create a custom login page with Divi.
  • Avoiding unnecessary calls to external Services. Some plugins and embeds require that you use files that are hosted on their servers. These additional calls will slow down page load.
  • Incorporate lazy loading for images and videos for better page load speed.

Quick Overview of Suggested Practices and Resources for Faster Divi Websites

Here is a quick overview of the suggested practices and resources included in this article for easy reference.

Get Latest PHP version

  • check with Divi System Status
  • Update your PHP version

Database Optimization

You can use these plugins to optimize and cleanup your Database for a faster site.

  • WP Optimize
  • Optimize Database after Deleting Revisions

DNS Lookup and DDOS Detection

  • You can use CloudFlare for this for free

Good Hosting

A quick list of hosts to consider for a faster Divi website.

  • SiteGround – offers shared hosting, managed WP Hosting, dedicated, and cloud hosting (visit SiteGround / our review)
  • Cloudways – specializes in SSD-Based managed cloud hosting and also has managed WP Hosting (visit Cloudways / our review)
  • Kinsta – specializes in managed WP hosting (visit Kinsta / our review)
  • WPEngine – specializes in managed WP hosting (visit WPEngine / our review)
  • Flywheel – specializes in managed WP hosting (visit Flywheel / our review)

If you are looking for a credible hosting review site, check out Review Signal.

You can also refer to this guide to help you make your choice.

Time to First Byte (TTFB) Optimization

  • Get Better Hosting with proper web server configuration.
  • Optimize the site for speed

Caching (Page, Object, Browser)

Popular caching plugins include:

  • WP Rocket
  • Cache Enabler (read our review)
  • W3 Total Cache (read our review)
  • W3 Super Cache (read our review)
  • Comet Cache (read our review)
  • WP Fastest Cache

If your plugin doesn't support browser caching, you will want to enable browser caching manually.

Minify/Combine Site Files

Some credible plugins that will minify your site files include:

  • Optimizează automat
  • W3 Total Cache (read our review)
  • W3 Super Cache (read our review)
  • WP Rocket (paid)

Our you can do it manually.

Gzip Compression

  • Check to see if Gzip compression is enabled
  • Add manually using mod_deflate model
  • Plugins that support Gzip compression:
    • WP Rocket
    • W3 Total Cache (read our review)
    • WP Fastest Cache

CDN

Here are some credible CDN platforms to consider:

  • MaxCDN (now StackPath)
  • KeyCDN (you can even use with CDN Enabler WordPress plugin to integrate KeyCDN; This setup would also work well with Cache Enabler as well)
  • Amazon Cloudfront
  • Sucuri

Here are some plugins with CDN support:

  • WP Fastest Cache
  • WP Rocket
  • Optimizează automat
  • W3 Total Cache
  • WP Super Cache
  • CDN Enabler

Optimizare imagine

  • Photoshop “save for web”
  • Websites:
    • Compressor.io
    • Tinypng.com
  • Plugins:
    • Imagify
    • Smush Image Compression and Optimizaton
    • WP rocket
  • Choose the right size images for Divi's grid layout using this ultimate guide.

Gânduri finale

Divi is faster than ever before. With built-in performance upgrades, your standard Divi installs have faster page loads on the front end, a faster WordPress admin on the backend, and a faster Divi Builder to edit and design your site. This is a great start, but there is much more to do to make sure your Divi site is running as fast as possible. The speed and performance optimizations included in this article will definitely boost your site speed. For the most part, these optimizations would apply to any WordPress site/theme, not just Divi. And it is surprising how many simple things you can do for free!

I'm sure there are tons of suggestions and resources out there that weren't mentioned, so feel free to share those with us in the comments.

Aștept cu nerăbdare să ne auzim.

Noroc!

Imagine prezentată prin Sammby / shutterstock.com