Optimizarea vitezei Divi: ultimul ghid

Divi nu este orice constructor de pagini. Divi duce procesul de proiectare la un nivel complet nou, cu un sistem complet de proiectare web care vă permite să proiectați vizual fiecare parte a site-ului dvs. web. Dar asta nu înseamnă că Divi trebuie să fie lent. Departe de.

Funcțiile integrate de optimizare a vitezei și performanței Divi vă pot pune cu ușurință site-ul în partea de sus a listei în scorurile Google PageSpeed. Cu funcții precum Dynamic Module Framework, Dynamic CSS, Dynamic JavaScript Libraries și multe altele, Divi este acum atât un constructor de pagini robust, cât și o temă ușoară. Dar cât de rapid este Divi, există și alți factori care necesită optimizare. Și dacă nu este abordat, viteza site-ului dvs. Divi va suferi inutil.

Î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:

• WordPress Performance vs Divi Performance
• Funcțiile de optimizare a vitezei și performanței încorporate ale Divi
• Cadrul modulului dinamic
• Biblioteci JavaScript dinamice
• Amânați jQuery și jQuery Migrate
• CSS dinamic
• CSS critice
• Înălțimea pragului critic
• Încărcați foaia de stil dinamică în linie
• Îmbunătățiți încărcarea fonturilor Google
• Dezactivați emoji-urile WordPress
• Amânați Gutenberg Block CSS
• Icoane dinamice
• Suport nativ Srcset pentru imagini receptive
• 14 lucruri pe care le puteți face pentru a vă optimiza viteza și performanța site-ului Divi
• # 1 Actualizați-vă găzduirea
• Optimizarea TTFB # 2
• # 3 Optimizați baza de date a site-ului dvs.
• # 4 Optimizați-vă DNS-ul
• # 5 Utilizați o rețea de livrare a conținutului (CDN)
• # 6 Adăugați cache
• # 7 Adăugați reducere și agregare
• # 8 Activați compresia Gzip
• # 9 Optimizare imagine
• # 10 Optimizare video
• # 11 Construiți-vă pagina Divi pentru viteză
• # 12 Utilizați pluginurile cu atenție și în mod distinct
• # 13 Conduceți testele de viteză
• # 14 Luați în considerare schema noastră de pagini Divi de mare viteză
• Utilizarea Divi și a altor pluginuri de performanță ale unor terțe părți
• Alte sfaturi

WordPress Performance vs Divi Performance

Divi nu este adesea principalul factor determinant al performanței site-ului dvs. web. Este doar o bucată din puzzle. De asemenea, trebuie să luați în considerare nevoile de optimizare care stau la baza unui site WordPress în general. Divi (tema Divi și / sau Divi Builder) se află deasupra WordPress (CMS), care se află deasupra unui teanc de software de server, care se află deasupra unei infrastructuri de găzduire. Toate aceste lucruri trebuie reglate corect. Pentru început, acestea includ lucruri precum găzduirea bună, stocarea în cache și un CDN. Fără aceste optimizări de bază, un site Divi va fi mai lent, indiferent de cât de bine optimizăm Divi. Deci, dacă site-ul dvs. Divi este foarte lent, atunci trebuie să luați în considerare și aceste alte piese ale puzzle-ului.

Având în vedere nevoile de optimizare care stau la baza unui site web WordPress, trebuie să abordăm optimizarea performanței Divi. Acest lucru se realizează prin îmbunătățirea performanțelor temei Divi și / sau Divi Builder, asigurându-vă că funcționează optim în zonele pe care le construiește pe WordPress și în zonele în care funcționează în WordPress. Odată ce toate aceste piese sunt optimizate, putem construi cu succes un site web Divi cu viteză și performanță optime.

În restul articolului de mai jos, vom aborda mai întâi optimizarea încorporată a performanței Divi (lucrurile deja făcute pentru dvs.). Apoi, vom aborda modul de optimizare a site-ului dvs. Divi, abordând unele nevoi de optimizare care stau la baza (lucruri suplimentare pe care le puteți face).

Funcțiile de optimizare a vitezei și performanței încorporate ale Divi

În primul rând, să aruncăm o privire la unele dintre optimizările de viteză și performanță încorporate pe care le are deja Divi. Aceste caracteristici de optimizare accelerează Divi din orice unghi, făcându-l probabil cel mai rapid constructor de pagini de pe piață. Dar asta nu este tot. Divi este construit cu un cadru dinamic care elimină balonarea și oferă o bază pe care Divi poate crește cu mai multe module și mai multe caracteristici fără a adăuga vreodată balonare la site-ul dvs. web. Acest lucru vă oferă cele mai bune din ambele lumi: puterea unui constructor de pagini expansiv, cu agilitatea unei teme ușoare.

Funcțiile de optimizare a performanței pot fi gestionate navigând la Divi> Opțiuni tematice. Sub fila General, selectați sub-fila Performanță.

Acum, să aruncăm o privire mai atentă la caracteristicile care facilitează construirea unui site web Divi foarte rapid.

Cadrul modulului dinamic

Caracteristica Dynamic Module Framework crește viteza site-ului într-un mod puternic prin selectarea și executarea funcțiilor PHP la cerere. Divi procesează logica necesară pentru a reda doar modulele și caracteristicile utilizate pe fiecare pagină din mers - orice altceva este eliminat din ecuație. Cu alte cuvinte, orice lucru care ar putea fi considerat „balonare” este șters din back-end.

Module la cerere

De exemplu, dacă aveți 3 module pe o pagină, Divi va procesa numai funcțiile necesare pentru aceste 3 module în loc să proceseze toate funcțiile pentru toate modulele, indiferent de care este utilizat. Aceste 3 funcții vor reda codul scurt / HTML pentru acel modul către pagină, fără a pierde timpul de procesare.

Caracteristici la cerere

La fel cum Divi procesează și încarcă dinamic modulele la cerere, Divi face același lucru pentru toate caracteristicile utilizate pe o pagină. În loc de funcții de procesare pentru toate caracteristicile posibile care ar putea fi utilizate pe elementul Divi (Efecte de derulare, animații, opțiune lipicioasă, opțiuni de margine etc.), Divi procesează numai acele funcții de caracteristici care sunt de fapt utilizate pe un element. Această caracteristică nu se aplică doar modulelor, ci oricărui element Divi, inclusiv secțiunea, rândurile și coloanele.

Biblioteci dinamice Javascript

Pentru a crește viteza site-ului, am optimizat JavaScript Divi pentru a fi mai concis și mai modularizat. Acest lucru permite Divi să încarce JavaScript la cerere dinamic. Divi va încărca și procesa funcții JavaScript (cum ar fi Opțiuni lipicioase), precum și biblioteci externe JavaScript (cum ar fi Magnific Popup) numai atunci când acestea sunt necesare de către module sau caracteristici pe o pagină.

Dimensiunea mai mică a fișierului de bază Javascript combinată cu bibliotecile dinamice JavaScript va crește cu siguranță viteza site-ului, pur și simplu, deoarece există mai puțin cod de procesat pentru fiecare încărcare a paginii. Scripturile neutilizate sunt eliminate. Și, deoarece această logică anti-balonare se întâmplă pe bază de pagină, dacă aveți un rând lipicios pe o singură pagină, nu va trebui să vă faceți griji cu privire la faptul că JavaScript Sticky este încărcat pe o pagină care nu o are. Aceasta este frumusețea JavaScript-ului dinamic al lui Divi.

Exemplu: Biblioteca dinamică JavaScript pentru un modul de imagine utilizând Lightbox

Să presupunem că aveți o pagină cu un modul de imagine cu lightbox activat. Divi va indica în mod dinamic și va rula biblioteca Magnific Popup JS pentru acea pagină pentru a aplica acea funcționalitate pop-up lightbox. Dacă lightbox-ul este dezactivat pe imagine, biblioteca JS nu se încarcă și nu rulează pe pagină.

Amânați jQuery și jQuery Migrate

Când este posibil, jQuery și jQuery Migrate vor fi mutate în corp pentru a elimina o cerere de blocare a redării și a accelera timpul de încărcare. Așa cum se arată în ilustrație mai jos, dacă scriptul jQuery este încărcat mai devreme (în antet), acesta va întrerupe analiza HTML până când scriptul este executat. Acest lucru va încetini redarea paginii dvs.

Doar pe de altă parte, dacă un plugin terță parte înregistrează jQuery ca dependență, acesta va fi mutat înapoi în cap pentru a evita conflictul. Această opțiune poate fi dezactivată dacă provoacă probleme.

CSS dinamic

CSS dinamic aplică aceeași logică anti-balonare (utilizată în cadrul modulului dinamic) la foaia de stil Divi. După cum vă puteți imagina, foaia de stil principală a lui Divi ar fi destul de mare având în vedere toate caracteristicile pe care le are. Dar încărcarea unei foi de stil mari pe fiecare pagină determină umflături inutile și timpi de încărcare a paginii mai lente.

Cu CSS dinamic, CSS-ul lui Divi este împărțit în sute de componente mici. Pe fiecare pagină, aceste componente CSS sunt combinate pentru a forma o foaie de stil unică care conține doar piesele necesare pentru stilizarea acelei pagini în funcție de module, caracteristicile modulului și opțiunile de aspect tematică pe care le utilizați.

Aceasta remediază problema CSS bloat deoarece acum nu există. Nu există balonare, deoarece nu se încarcă alt CSS. Fără Dynamic CSS, foaia de stil Divi ar fi în jur de 900 kb și ar fi încărcată pe toate paginile, indiferent de conținut. Acum, dacă aveți nevoie de 80kb de CSS pentru pagină, Dynamic CSS elimină 800 + kb de care nu este nevoie să încărcați pagina. Aceasta înseamnă că pagina dvs. se încarcă și mai repede.

CSS critice

Sistemul CSS critic al lui Divi crește viteza site-ului, identificând CSS-ul necesar pentru stilizarea conținutului deasupra pliantei și amânând orice altceva. Deoarece doar stilurile critice sunt necesare atunci când pagina se încarcă pentru prima dată și din moment ce activele de blocare a redării joacă un rol atât de semnificativ în viteza paginii, capacitatea Divi de a separa automat stilurile critice și non-critice îi conferă un avantaj imens față de alte teme și constructori WordPress . După ce Divi a terminat procesarea CSS-ului său, nu mai rămâne nimic în antetul site-ului, ceea ce înseamnă că conținutul apare imediat și de aceea Google oferă site-urilor web Divi scoruri atât de mari chiar din cutie.

De exemplu, dacă conținutul dvs. de mai sus este format dintr-un titlu, paragraf, buton și imagine, numai CSS-ul relevant pentru acele elemente va fi încărcat imediat ce vizitatorii dvs. vor încărca pagina. Restul CSS-ului va fi încărcat și, desigur, dar nu la prima interacțiune. Asta se numește CSS non-critic.

Pentru o explicație mai completă a modului în care funcționează această funcție și a modului de utilizare a acesteia, consultați articolele noastre despre modul în care caracteristica critică CSS a lui Divi mărește viteza site-ului și cum se poate crea cea mai rapidă pagină Divi.

Înălțimea pragului critic

În legătură cu CSS critică este opțiunea Înălțimea pragului critic.

Când Critical CSS este activat, Divi determină un „prag deasupra pliantei” și diferă toate stilurile pentru elementele de sub pliant. Cu toate acestea, acest prag este doar o estimare și poate varia pe diferite dispozitive. Creșterea înălțimii pragului va amâna mai puține stiluri, ceea ce va duce la timpi de încărcare ușor mai mici, dar mai puține șanse să apară schimbări de aspect cumulativ (CLS). Dacă întâmpinați probleme CLS, puteți crește înălțimea pragului.

Încărcați foaia de stil dinamică în linie

Opțiunea Load Dynamic In-Line Stylesheet este ultima optimizare CSS care elimină toate cererile CSS de blocare a redării.

Datorită Dynamic CSS, foaia de stil Divi de bază este acum suficient de mică încât să poată fi încărcată în linie pe pagina reală! Încărcarea acestui CSS în linie elimină o cerere de blocare a redării și îmbunătățește scorurile Google PageSpeed. Când sunt activate opțiunile CSS critice, CSS dinamice și Load Dynamic In-Line Stylesheet, toate cererile CSS de blocare a redării sunt eliminate .

Îmbunătățiți încărcarea fonturilor Google

Opțiunea Îmbunătățiți încărcarea fonturilor Google permite stocarea în cache a fonturilor Google și le încarcă în linie în antet. Acest lucru reduce solicitările de blocare a redării și accelerează timpul de încărcare.

Am adăugat, de asemenea, opțiunea Limitați asistența Google Fonts pentru browserele vechi.

Aceasta elimină practic fișierele de font vechi pentru a reduce sarcina utilă. Activarea acestei opțiuni va reduce dimensiunea Google Fonts și va îmbunătăți timpul de încărcare, cu toate acestea, va limita suportul Google Fonts în unele browsere foarte vechi. Puteți dezactiva această opțiune pentru a spori suportul pentru browsere mai vechi la un cost ușor pentru performanță.

Dezactivați emoji-urile WordPress

WordPress vine cu un sistem emoji nativ, dar acest lucru nu mai este necesar din cauza suportului emoji nativ în browserele moderne. De fapt, emoji-urile native arată mult mai bine decât versiunea WordPress. Divi vă oferă opțiunea de a dezactiva emoji-urile native WordPress, care elimină resursele inutile. Și având mai puține resurse pentru a reda rezultate în încărcări mai rapide ale paginii.

Amânați Gutenberg Block CSS

Când utilizați Divi Builder pe o pagină, alegeți, de asemenea, să nu utilizați editorul de blocuri WordPress implicit (Gutenberg). Și din moment ce nu veți folosi blocuri pentru a vă stiliza pagina, nu aveți nevoie de redarea CSS Gutenberg care să blocheze încărcarea paginii Divi. Cu opțiunea Defer Gutenberg Block CSS activată, Divi va încărca acum (implicit) blocul CSS Gutenberg pe paginile în care utilizați în schimb Divi Builder. Se va încărca totuși pentru orice eventualitate (în subsol), dar nu va mai fi blocarea redării.

Icoane dinamice

Divi este livrat acum cu subseturi de fonturi pictograme care sunt încărcate la cerere pe baza modulelor și caracteristicilor pe care le utilizați. Acest lucru scade dimensiunea fontului pictogramei de bază de la 90kb până la 6kb. Setul complet de pictograme este încărcat numai atunci când este necesar. Această opțiune este dezactivată în mod implicit dacă utilizați o temă pentru copii sau un modul Divi personalizat. Dacă tema copilului dvs. sau modulul Divi din a treia parte utilizează setul complet de pictograme Divi, atunci această opțiune ar trebui să rămână dezactivată.

Există trei subseturi de fonturi pictograme care sunt utilizate în funcție de ceea ce are nevoie o pagină.

• Baza - acest subset include toate pictogramele utilizate în mod implicit în tema Divi și modulele sale.
• Social - acest subset include toate pictogramele de bază plus toate pictogramele sociale, care se încarcă atunci când este utilizat un modul de urmărire social media.
• Toate - acesta este întregul set de pictograme care este utilizat atunci când utilizați selectorul de pictograme într-un modul Divi pentru a selecta o pictogramă personalizată.

Iată un exemplu al subsetului de fonturi pictogramă socială încărcat dinamic din cauza unui modul de urmărire social media existent pe pagină.

Dacă aveți nevoie de acces la întregul font de pictograme pe toate paginile (de exemplu, dacă utilizați fontul nostru de pictograme în tema copilului dvs.), puteți dezactiva această opțiune și încărca întreaga bibliotecă de fonturi de pictograme pe toate paginile.

Suport nativ Srcset pentru imagini receptive

Divi include suport nativ SRCSET pentru toate imaginile Divi, ceea ce înseamnă că Divi vă va face automat imaginile receptive și va servi imaginea perfect dimensionată pentru fiecare dispozitiv. Întrucât imaginile mai mici sunt difuzate pe dispozitive mai mici, acest lucru poate îmbunătăți considerabil viteza de încărcare și nu necesită nicio lucrare suplimentară din partea dvs.

14 lucruri pe care le puteți face pentru a vă optimiza viteza și performanța site-ului Divi

Optimizarea vitezei continuă să joace un rol crucial în experiența utilizatorului site-ului dvs. web, precum și în optimizarea motorului de căutare (SEO). Deci, pentru ca site-ul dvs. Divi să aibă performanțe bune pentru vizitatori și Google, veți dori să vă adresați acelor zone din afara Divi care vă optimizează și mai mult site-ul pentru viteză.

Iată 14 lucruri pe care le puteți face pentru a optimiza viteza și performanța site-ului dvs. Divi ...

# 1 Actualizați-vă găzduirea

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. Deci, dacă aveți un site Divi lent, primul dvs. pas este să luați în considerare actualizarea găzduirii.

Utilizați gazduirea optimizată Divi

Dacă doriți un site web Divi rapid, este logic să alegeți un furnizor de găzduire optimizat nu numai pentru WordPress, ci și pentru Divi. Deci, dacă sunteți în căutarea unei găzduiri WordPress grozave care funcționează impecabil cu Divi și vine cu instalare automată Divi, atunci Divi Hosting este o soluție nouă excelentă pentru dvs. Am colaborat cu unele dintre gazdele noastre WordPress preferate (Pressable, Flywheel și SiteGround) pentru a oferi clienților Divi un mod simplu de a crea site-uri web Divi care sunt rapide, susținute de o infrastructură modernă de găzduire care îndeplinește toate cerințele Divi și susținută de profesioniști de renume în WordPress. .

De ce să alegeți Divi Hosting?

În cele din urmă, fiecare utilizator Divi trebuie să facă o alegere cu privire la găzduire. A face o alegere greșită poate duce la multă durere. Vrem să facem această alegere ușoară. Iată doar câteva lucruri care fac Divi Hosting unic:

• Când vă creați site-ul, Divi vine instalat automat.
• Noul dvs. site web este conectat automat la contul dvs. Elegant Themes și configurat cu cheia de licență, astfel încât să puteți primi actualizări și asistență.
• Mediul dvs. de găzduire va fi configurat pentru a îndeplini toate setările PHP recomandate de Divi. Nu sunt necesare ajustări.
• Site-ul dvs. web va fi alimentat de o infrastructură de găzduire rapidă și modernă, ceea ce înseamnă timpi de încărcare rapidă și instrumente moderne precum cache automat și CDN-uri.
• Veți fi găzduit de o companie care cunoaște WordPress din interior și din exterior.
• Veți fi găzduit de unul dintre partenerii noștri, ceea ce înseamnă că sunt dedicați asigurării unei experiențe excelente Divi pe sistemele lor.

Există o mulțime de opțiuni de găzduire și nu sunt create toate la fel. În fiecare zi, îi ajutăm pe clienții noștri să se ocupe de probleme de compatibilitate legate de găzduire, care pot fi incredibil de frustrante. Toată lumea are nevoie de găzduire pentru a utiliza Divi, iar experiența dvs. de găzduire nu trebuie să fie o luptă. Pentru mai multe informații, aflați cum găzduirea Divi este cea mai bună soluție de găzduire pentru Divi.

Găsirea soluției potrivite de găzduire pentru site-ul dvs. Divi

Ai n eed de a utiliza Divi Hosting pentru a avea un site web rapid Divi? Absolut nu. Există și alte soluții excelente de găzduire, iar Divi va funcționa întotdeauna excelent în medii excelente de găzduire. Dar, deoarece găzduirea joacă un rol atât de important în optimizarea vitezei și performanței, ar trebui să vă luați timpul necesar pentru a găsi soluția potrivită de găzduire pentru site-ul dvs. Divi.

Există o mulțime de companii de găzduire grozave și nu atât de grozave. Și fiecare oferă de obicei mai multe soluții și servicii de găzduire. Deci, găsirea celui potrivit poate fi copleșitor. Mai jos sunt câteva informații utile despre cele mai frecvente tipuri de găzduire de luat în considerare la găsirea soluției potrivite de găzduire pentru site-ul dvs. Divi.

Găzduire tradițională (partajată) (nerecomandată)

Acesta este de departe cel mai popular tip de găzduire pentru utilizatorii WordPress în mare parte, deoarece este cel mai accesibil. 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. Așadar, puteți cădea cu ușurință pradă perioadelor de încărcare extrem de lente și chiar a momentelor în care site-ul dvs. 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 un număr dedicat de resurse de sistem (sau putere) pentru a vă asigura că site-ul dvs. primește întotdeauna ceea ce este necesar pentru a furniza în mod constant timpi de încărcare rapidă. 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 pricepute în tehnologie 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 un număr dedicat (sau limitat) de resurse de 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. De obicei, costă puțin mai mult decât găzduirea partajată tradițională, dar dacă doriți un site Divi mai rapid, găzduirea WordPress gestionată poate merita. 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ă.

De fapt, Găzduirea Divi este Găzduirea WordPress gestionată, optimizată pentru Divi. Acest lucru elimină toate durerile de cap din optimizarea mediului de găzduire pentru site-ul dvs. Divi.

# 2 Optimizați timpul până la primul octet (TTFB)

Ce este 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 ca orice date să fie primite de browser. Acest lucru este important, deoarece cu cât TTFB este mai lung, cu atât pagina durează mai mult să se încarce.

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 care te așteaptă. 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.

Ce cauzează un TTFB lent?

Î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.).

Cum să accelerați TTFB-ul site-ului dvs. Divi

TTFB este unul dintre Web Vitals (împreună cu FCP, LCP și CLS) pe care Google le folosește pentru a determina clasarea site-ului dvs. Deci, este important să-l optimizăm. Vestea bună este că TTFB poate fi optimizat. Iată câteva sfaturi cheie pe care le puteți utiliza pentru a reduce TTFB.

• Actualizați-vă găzduirea . Cel mai eficient mod de a vă stimula TTFB-ul este să vă actualizați pur și simplu găzduirea. Plătiți puțin mai mult pentru găzduirea gestionată pentru WordPress sau Divi Hosting va avea cel mai mare impact asupra TTFB chiar din poartă.
• Folosiți un CDN . Acest lucru va permite vizitatorilor să încarce datele site-ului dvs. de pe un server cel mai apropiat de ei, astfel încât să puteți reduce latența și să reduceți TTFB.
• Eliminați pluginurile sau temele inutile . Pluginurile și temele (în special cele învechite) pot împiedica serverul site-ului și timpii de încărcare (inclusiv TTFB). Deci, cel mai bine este să folosiți doar plugin-uri (sau teme) de calitate esențiale și să le eliminați pe celelalte.
• Implementați cache-ul . Divi are cache încorporat pentru livrarea Divi JS și CSS. Dar stocarea în cache a site-ului dvs. web în ansamblu, pe lângă utilizarea unui CDN, va reduce TTFB.

Folosiți Cloudflare pentru a spori TTFB

O modalitate de a obține un impuls rapid pe TTFB-ul site-ului dvs. este să utilizați Cloudflare. Memorarea în cache și CDN-urile disponibile în planul lor gratuit vor spori cu siguranță TTFB. De asemenea, puteți profita de Optimizarea automată a platformei Cloudflare, care a fost testată pentru a arăta o reducere de 72% a TTFB.

Pentru a afla mai multe, consultați articolul nostru complet despre TTFB și cum să vă optimizați site-ul pentru acesta.

# 3 Optimizați baza de date a site-ului dvs.

De ce site-ul WordPress are nevoie de baze de date curate

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 baza de date este mai murdară, 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. Aceste date rămase pot duce la aglomerații inutile și pot î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.

Cum să optimizați baza de date a site-ului dvs. Divi

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.

# 4 Optimizați-vă DNS-ul

Cum afectează DNS viteza site-ului

Primul lucru care trebuie să se întâmple atunci când un utilizator vizitează adresa URL a uneia dintre paginile dvs. web este o 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.

Utilizarea Cloudflare pentru optimizarea DNS (și mai mult dacă doriți)

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 să optimizați 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 exact așa, aveți o creștere a vitezei de căutare DNS, mai multă securitate și un CDN pentru site-ul dvs. (plus multe altele).

Apropo de CDN-uri, cu siguranță trebuie să folosiți unul dintre acestea.

# 5 Utilizați o rețea de livrare a conținutului (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 StackPath (anterior MaxCDN) care oferă capacități CDN împreună cu alte caracteristici de performanță și securitate.

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

• Cloudflare CDN: În plus față de optimizarea DNS (menționată mai sus), Cloudflare oferă un CDN global rapid și sigur, care păstrează conținutul static și îl oferă rapid utilizatorilor. Aceasta este inclusă în planul lor gratuit, care este minunat pentru majoritatea site-urilor.
• KeyCDN (puteți utiliza chiar și pluginul CDN Enabler WordPress pentru a integra KeyCDN; Această configurare ar funcționa bine și cu Cache Enabler)
• StackPath (anterior MaxCDN)
• Amazon Cloudfront
• Sucuri

Există unele 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

# 6 Adăugați cache

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 când servește fișierele JS și CSS 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. web 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 o soluție terță parte pentru a difuza versiuni HTML statice cache ale tuturor paginilor dvs.

CDN-ul Cloudflare este o modalitate excelentă de a adăuga cache pe site-ul dvs. Divi. Stochează o copie a conținutului site-ului (resurse statice) geografic mai aproape de vizitatori pentru a reduce încărcarea și latența paginii. APO-ul Cloudflare pentru WordPress pare a fi o soluție și mai direcționată pentru stocarea în cache a paginilor web și a fonturilor terță parte pentru un site WordPress / Divi folosind pluginul lor WordPress.

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.

# 7 Adăugați Minificarea și agregarea site-ului web

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ă în mod implicit Javascript și CSS. Deci, din punct de vedere tehnic, nu trebuie să vă faceți griji cu privire la utilizarea unui plugin terță parte pentru a minimiza și combina în continuare Javascriptul Divi și CSS. 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.

Una dintre cele mai bune modalități de a adăuga reducerea la HTML, JS și CSS a întregului site este utilizarea Cloudflare. Cloudflare folosește Auto Minify pentru a reduce dimensiunea fișierului tuturor codurilor sursă de pe site-ul dvs. web. În plus, vine standard cu versiunea gratuită.

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 terț 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.

# 8 Activați compresia GZIP

Cum vă ajută compresia Gzip să vă accelereze site-ul Divi

Activarea compresiei Gzip pe site-ul dvs. Divi vă poate oferi un impuls mare de viteză (până la 70% în unele cazuri). 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.

Aceasta este una dintre acele zone în care puteți îmbunătăți viteza Divi chiar și la o instalație nouă. Întrucât Divi minimizează deja fișierele tematice de bază oricum, compresia Gzip sau Brotli va face aceste fișiere mult mai mici decât ar putea vreodată să fie minificate.

Compresia Gzip este cel mai utilizat algoritm de compresie, dar se pare că compresia Brotli este algoritmul de generație următoare care caută să facă dimensiunile fișierelor și mai mici pentru un transfer mai rapid de date. Acesta este utilizat de companii de găzduire precum SiteGround și, de asemenea, de Cloudflare.

Cum să activați compresia Gzip pe site-ul dvs. Divi

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

După cum sa menționat deja, Cloudflare oferă compresie Brotli pentru toate domeniile din planul lor gratuit.

Multe dintre pluginurile de performanță WordPress (cum ar fi W3 Total Cache și WP Super Cache) vor include compresia Gzip ca opțiune. Cu toate acestea, pare inutil să adăugați un plugin de performanță pentru această optimizare.

O modalitate obișnuită 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 un bloc de cod în partea de jos a fișierului dvs. .htaccess.

# 9 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 dvs. de fișier accesibil pentru majoritatea imaginilor / fotografiilor pe care le utilizați pe site-ul dvs., deoarece puteți obține imagini cu aspect minunat la o dimensiune mai mică a fișierului decât PNG-urile sau GIF-urile. 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).

# 10 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, se recomandă adesea să utilizați servicii terțe (cum ar fi YouTube sau Vimeo) pentru a găzdui videoclipurile dvs. pentru dvs. 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.

# 11 Construiți-vă pagina Divi pentru viteză

Când nu vine vorba, viteza unui site web este determinată de cât de repede încarcă conținutul unei pagini. Deci, este logic să construiți fiecare dintre paginile site-ului dvs. Divi, având în vedere optimizarea performanței. Important este să identificați obiectivul principal pentru fiecare pagină pe care o construiți. După aceea, puteți găsi un echilibru sănătos între viteză și design pentru a crea o pagină care să arate uimitor pe partea frontală, în timp ce rămâneți înclinat pe backend. Pentru un exemplu practic de optimizare a conținutului paginii Divi pentru viteză, consultați articolul nostru despre cum să creați cea mai rapidă pagină Divi.

Iată câteva sfaturi cheie pe care trebuie să le aveți în vedere atunci când creați pagina:

• Optimizați conținutul de mai sus pentru a funcționa cu CSS-ul încorporat al Divi.
• Utilizați presetările Divi pentru a profita de funcția de stiluri inteligente încorporate Divi . Aceasta va permite elementelor să partajeze fragmente de cod CSS pe baza claselor și să evite să fie nevoie să încărcați un bloc unic de CSS pentru fiecare.
• Când este posibil, limitați tipurile de module pe care le utilizați pentru a construi pagina . Datorită cadrului dinamic Divi, Divi nu va procesa sau încărca modulele (și CSS-ul lor unic) pe care nu le utilizați. De exemplu, dacă puteți utiliza două module de text (în loc de un modul de text și un modul de blurb) pentru aceleași rezultate, cel mai bine este să nu folosiți inutil procesul și să încărcați modulul de blurb pe pagină.
• Fii inteligent în ceea ce privește utilizarea animației pentru pagina ta . Datorită caracteristicilor dinamice ale Divi, Divi nu va procesa sau încărca JS sau CSS necesare pentru funcții precum Motion Effects dacă nu le utilizați. De exemplu, dacă utilizați setările de animație obișnuite pe întreaga pagină, vă recomandăm să evitați utilizarea efectelor de mișcare pentru un singur element. În schimb, păstrați stilul de animație consistent și bucurați-vă de încărcări mai rapide ale paginii.

# 12 Utilizați pluginurile cu atenție și în mod distinct

Utilizați pluginuri de calitate

Calitatea este factorul cheie atunci când vine vorba de pluginuri. De fapt, puteți avea 10 pluginuri de calitate care nu vă vor încetini site-ul la fel de mult ca unul rău. În general, asigurați-vă că alegeți pluginuri care au trecut testul timpului și au recenzii excelente. Și testați întotdeauna modul în care un plugin vă afectează performanța site-ului web înainte și după testele de viteză pentru a fi siguri.

Eliminați pluginurile neutilizate sau învechite

Pe lângă utilizarea pluginurilor de calitate, este de asemenea important să eliminați orice plugin neutilizat și / sau depășit de pe site-ul dvs. Acestea pot fi dăunătoare pentru performanța site-ului dvs. web și un risc serios de securitate. În plus, fiecare plugin (chiar și cele de calitate) va adăuga resurse suplimentare care vor adăuga timp la fiecare încărcare a paginii. Dacă doriți un site Divi rapid, veți dori să utilizați cât mai puține pluginuri.

Căutați erori de blocare a randării

Divi nu are active de blocare a redării, deci înseamnă că stilurile și scripturile dvs. de blocare a redării provin din pluginuri. Dacă există câteva scripturi mari de blocare a redării care vă afectează viteza, ați putea lua în considerare îndepărtarea de aceste pluginuri.

# 13 Conduceți testele de viteză

Probabil că nu ați citi acest articol dacă nu ați făcut cel puțin un test de viteză pe site-ul dvs. web. Și pe bună dreptate, este important să știm cât de repede se încarcă paginile dvs. pentru vizitatori. Efectuarea unui test de viteză este unul dintre cele mai ușoare lucruri pe care le puteți face. Există o mulțime de site-uri web care vor face acest lucru gratuit. Iar valorile pe care le furnizează vor fi neprețuite pentru identificarea modalităților prin care vă puteți optimiza și mai mult site-ul pentru o performanță mai bună.

Iată câteva locuri minunate de început:

• GTMetrics
• Google Page Insights
• Instrumente de dezvoltare Chrome
• Far (disponibil pentru Chrome Dev Tools)

Rezultatele acestor teste sunt cele care ne determină pe mulți dintre noi să înceapă să optimizeze site-ul nostru Divi pentru timpi de încărcare mai rapide. Acestea oferă o descriere utilă a performanței paginii dvs. web într-o varietate de domenii. Apoi, puteți utiliza recomandările lor ca listă de verificare pentru a vă rezolva pe măsură ce vă optimizați site-ul.

Cel mai bun mod de a utiliza aceste instrumente de testare a vitezei online pentru site-ul dvs. Divi WordPress este să rulați mai întâi un test pe o pagină înainte de a face optimizări. Apoi, puteți utiliza acest lucru ca bază pentru a compara testele viitoare pe măsură ce faceți modificări. După fiecare optimizare pe care o faceți, puteți vedea dacă scorul dvs. se îmbunătățește.

De exemplu, puteți observa că utilizarea unui plugin de cache va funcționa mai bine decât altul. Nu vă fie teamă să testați mai multe pluginuri pentru cea mai bună performanță.

Iată un ghid util de optimizare WordPress de către GTMetrix, care vă va fi de ajutor.

Pe măsură ce implementați optimizările de viteză pe site-ul dvs., ar trebui să vedeți îmbunătățiri în următoarele domenii:

• Timpul până la primul octet (TTFB)
• Prima vopsea conținută (FCP)
• Time to Interactive (TTI) - măsoară când pagina este pregătită pentru interacțiunea cu utilizatorul.
• Indicele de viteză (SI) - măsoară viteza cu care pagina dvs. este completă vizual de mai sus
• Timp total de blocare (TBT) - Similar cu prima întârziere de intrare (FID) vitală a Google, care este cantitatea de timp dintre un utilizator care interacționează pentru prima dată cu site-ul dvs. și când browserul său răspunde acțiunii respective
• Cea mai mare pictură conținută - măsoară cât durează cel mai mare element de conținut (cum ar fi o imagine) pentru a deveni vizibil pentru utilizatori.
• Cumulative Layout Shift - măsoară deplasarea (sau deplasarea) neașteptată a aspectului atunci când un utilizator încarcă o pagină.

Pentru mai multe informații, consultați postarea noastră despre cum să vă îmbunătățiți scorul de viteză al paginii Google.

Scopul este viteza, nu perfecțiunea

Poate fi ușor să te împotmolești testând site-ul și optimizându-l la perfecțiune. Dar niciun site web nu va fi perfect. Puteți găsi chiar că îmbunătățirea anumitor grade de performanță ale testului de viteză poate încetini timpul de încărcare a paginii. Asta pentru că nici acele teste de viteză nu sunt perfecte. La fel ca acest articol, acestea sunt doar un ghid care vă ajută să vă îmbunătățiți performanța și viteza site-ului.

# 14 Luați în considerare schema noastră de pagini Divi de mare viteză

În acest site de testare pe care l-am construit, a fost ușor să construim un site web Divi care a obținut 100 pe Google PageSpeed ​​Desktop, 99 pe Google PageSpeed ​​Mobile și 100% pe GTmetrix. Această schiță a site-ului web permite dezvoltatorilor să experimenteze direct optimizarea încorporată a vitezei Divi pe un site real. De asemenea, poate servi ca un bun exemplu de optimizare a conținutului paginii Divi pentru viteză.

Acest site de testare a fost optimizat după cum urmează:

• Găzduit pe SiteGround
• CloudFlare folosit pentru cache, CDN, compresie Brotli
• Nu au fost utilizate pluginuri suplimentare.
• Caracteristicile de performanță încorporate utilizate de Divi
• Conținut optimizat pentru pagină
  • S-au folosit stiluri inteligente (presetări Divi) pentru a reduce CSS-ul dinamic generat pentru fiecare pagină.
  • Optimizat deasupra pliantei pentru a vă asigura că CSS critică este slabă.
  • Am folosit un font web-safe (Arial) pentru a evita să descărcați un font de pe un server terță parte.
  • Imagini comprimate folosite
  • Nu am folosit efecte de animație sau mișcare
  • Limitarea utilizării pictogramelor pentru a încărca un subset de fonturi de pictograme mai mic, care include pictogramele sociale necesare.

Rezultatul:

• Dimensiunea CSS a fost redusă cu 94%.
• Toate activele de blocare a redării au fost complet eliminate, iar dimensiunea JavaScript a lui Divi a fost redusă la jumătate.
• Nu există cereri de resurse inutile.
• În partea de sus a conținutului apare imediat.
• Scor 100% pe Google PageSpeed ​​Desktop, 99% pe Google PageSpeed ​​Mobile
• Scor 100% pe GTmetrix.

Ce putem învăța pentru site-ul de testare?

În cele din urmă, Divi vă oferă puterea de a alege modul în care doriți să-l utilizați și cât de repede doriți să fie site-ul dvs. web. Site-ul de testare arată că puteți obține scoruri de viteză ale paginii aproape perfecte din cutie. Dar, doar pentru că nu am folosit toate instrumentele de design puternice care fac Divi atât de grozav nu înseamnă că trebuie să vă fie frică să le utilizați. Dacă nu utilizați un modul sau o caracteristică pe o pagină, Divi nu va procesa și / sau nu va încărca elementul sau CSS-ul său inutil. Dar dacă decideți să includeți un modul sau o caracteristică, Divi va avea grijă să proceseze și / sau să încarce doar elementele și CSS-ul necesar și nimic mai mult. Acest lucru vă oferă un cadru ușor pe care să construiți, fără să vă faceți griji cu privire la umflarea web atunci când decideți să dezlănțuiți puterea Divi pentru a vă construi site-ul.

Alte sfaturi

Am acoperit aproape toți factorii majori care contribuie la site-urile web Divi / WordPress mai rapide. Dar sunt mult mai multe lucruri de luat în considerare care ar putea îmbunătăți viteza și mai mult.

• Cu o configurare corectă a temei copilului Divi
• Schimbarea adresei URL de autentificare WordPress pentru a împiedica acei roboți să supraîncărce serverul. Aceasta ar fi o bună șansă de a crea o pagină de conectare personalizată cu Divi.
• Evitarea apelurilor inutile către Servicii externe. Unele pluginuri și încorporări necesită utilizarea fișierelor găzduite pe serverele lor. Aceste apeluri suplimentare vor încetini încărcarea paginii.
• Incorporați încărcare leneșă pentru imagini și videoclipuri pentru o viteză mai mare de încărcare a paginii.

Utilizarea Divi și a altor pluginuri de performanță ale unor terțe părți

Optimizările de performanță încorporate ale Divi vor accelera fiecare site Divi, deoarece elimină balonarea care nu poate fi eliminată cu niciun plugin de performanță. Acestea fiind spuse, puteți utiliza pluginuri suplimentare de performanță terță parte pentru a spori viteza site-ului dvs., în plus față de optimizările încorporate ale Divi. Îmbunătățirile de performanță ale Divi se aplică numai pluginurilor Divi și nu pluginurilor terțe, astfel încât pluginurile dvs. de performanță vă pot aduce beneficii în alte zone din afara Divi. De exemplu, puteți beneficia în continuare de stocarea în cache a site-ului dvs. web și de utilizarea unui CDN.

Gestionarea pluginurilor de performanță conflictuale

Deoarece Divi este deja optimizat, utilizarea unui plugin de performanță terță parte poate provoca un conflict. Deci, este important să vă mențineți tema Divi actualizată și să testați în prealabil toate pluginurile terță parte. Ne străduim din răsputeri să testăm optimizările încorporate ale Divi cu alte pluginuri populare de optimizare. 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 sau că nu vor apărea conflicte.

De exemplu, pluginurile de la terțe părți ar putea micșora sau muta 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.

Ș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. Simțiți-vă liber să luați legătura cu echipa noastră de asistență pentru ajutor cu privire la orice problemă cu care vă puteți confrunta. Suntem bucuroși să vă ajutăm să o rezolvați.

Gânduri finale

Divi este mai rapid ca niciodată. Cu upgrade-uri de performanță încorporate, instalările dvs. standard Divi au încărcări mai rapide ale paginii pe partea frontală, un administrator WordPress mai rapid pe backend și un Divi Builder mai rapid pentru a vă edita și proiecta site-ul. Acesta este un început minunat, dar mai sunt multe de făcut pentru a vă asigura că site-ul dvs. Divi rulează cât mai repede posibil. Optimizările de viteză și performanță incluse în acest articol vor crește cu siguranță viteza site-ului dvs. În cea mai mare parte, aceste optimizări se vor aplica oricărui site / temă WordPress, nu doar Divi. Și este surprinzător câte lucruri simple puteți face gratuit!

Sunt sigur că există o mulțime de sugestii și resurse care nu au fost menționate, așa că nu ezitați să le împărtășiți cu noi în comentarii.

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

Noroc!

Imagine prezentată prin Sammby / shutterstock.com