Cum să faci mai puține solicitări HTTP în WordPress (11 sfaturi)

Pentru a vă afișa site-ul web, browserul unui utilizator va trimite solicitări HTTP către serverul dvs. Cu toate acestea, dacă aveți mai multe fișiere neoptimizate, serverul trebuie să proceseze multe solicitări. Deoarece acestea pot crește semnificativ timpii de încărcare a paginii, veți dori ca site-ul dvs. să facă mai puține solicitări HTTP.

Din fericire, este posibil să le reducă, despre care este vorba în această postare.

O introducere în solicitările HTTP

Ori de câte ori un utilizator vă vizitează site-ul web, browserul său trebuie să descarce resurse de pe serverul dvs. Pentru a comunica cu acesta, browserul trimite cereri cu HTTP (Hypertext Transfer Protocol).

Site-urile web cuprind diferite forme de date, iar fișierele pentru HTML, CSS, imagini și videoclipuri sunt toate stocate pe un server – redarea acestui conținut într-un browser necesită solicitări HTTP.

Iată pașii implicați atunci când cineva navighează pe internet:

Este important să rețineți că redarea unui site web nu necesită o singură solicitare HTTP. Fiecare fișier imagine individual, foaie de stil plugin, script JavaScript, font web și așa mai departe va avea de obicei propriul său. Prin urmare, dacă site-ul dvs. este neoptimizat, ar putea avea un impact negativ asupra timpilor de încărcare.

De ce ați dori ca site-ul dvs. WordPress să facă mai puține solicitări HTTP

Pe măsură ce construiți un site web, este important să minimizați fișierele inutile. Apoi, browserul unui vizitator nu trebuie să solicite atât de multe resurse de la server. Deoarece site-ul dvs. va face mai puține solicitări HTTP, se va încărca mult mai repede.

De regulă, un număr mai mare de solicitări HTTP duce la viteze mai mici ale paginii. Dacă există mai multe resurse de descărcat înainte de a reda pagina, utilizatorii vor trebui să aștepte mult timp pentru a vedea conținutul.

De exemplu, un site web cu doar 50 de solicitări se va încărca, în general, mai repede decât unul cu 70 de solicitări. Acest lucru se datorează faptului că există mai puține resurse de procesat și descărcat.

Povestea reală este puțin mai complexă, deoarece nu toate solicitările HTTP sunt create egale. O solicitare HTTP mare, cu încărcare lentă, ar putea avea un efect mai mare decât cinci solicitări HTTP mici cu încărcare rapidă. Dar, ca regulă generală – mai puține solicitări HTTP = site-ul web cu încărcare mai rapidă .

Prin reducerea solicitărilor HTTP de pe site-ul dvs. web, vă veți îmbunătăți Core Web Vitals, în special scorul cel mai mare de conținut LCP. La rândul său, acest lucru poate îmbunătăți experiența utilizatorului (UX), deoarece vizitatorii vor vedea conținutul mai repede.

Cum să testați solicitările HTTP ale site-ului dvs. web

După cum am menționat mai devreme, solicitările HTTP fac parte din randare. Cu toate acestea, nu toate solicitările HTTP sunt la fel. Înainte de a începe să le reduceți pe site-ul dvs. web, va trebui să știți exact pe care să le vizați.

Pentru a face acest lucru, puteți utiliza un instrument de analiză a performanței precum GTmetrix. Începeți prin a introduce adresa URL a site-ului dvs. și apăsați Testați site-ul :

Veți primi un raport de performanță care conține informații despre dimensiunea paginii dvs. și numărul total de solicitări. Pentru a vedea aceste date, derulați în jos până la Detalii pagină :

De asemenea, puteți vizualiza solicitările individuale făcând clic pe fila Cascada . Aceasta vă va arăta cât timp a durat descărcarea fiecărui fișier:

Folosind această diagramă Waterfall, puteți identifica ce elemente de pe site-ul dvs. provoacă solicitări HTTP inutile. Odată ce găsiți problema, puteți implementa soluția potrivită și puteți accelera site-ul dvs.

După cum puteți vedea în graficul de mai sus, fiecare solicitare HTTP are o dimensiune diferită și durează un timp diferit pentru a se încărca.

Dacă doriți cel mai mare profit al eforturilor dvs., încercați să vă concentrați pe eliminarea celor mai mari și mai lente solicitări HTTP.

De asemenea, ar trebui să vă concentrați pe eliminarea solicitărilor HTTP de la terțe părți ( resurse pe care site-ul dvs. le încarcă de pe serverul altcuiva, cum ar fi scripturile Google Analytics ). Aceste solicitări terță parte necesită căutări DNS suplimentare și au alte dezavantaje de performanță.

Cum să faci mai puține solicitări HTTP în WordPress și să accelerezi site-ul (11 sfaturi)

După ce v-ați testat site-ul web, este timpul să reduceți solicitările HTTP.

Mai jos, vom analiza 11 moduri diferite de a face mai puține solicitări HTTP și de a optimiza solicitările HTTP care rămân. Câteva dintre aceste sfaturi nu vor elimina neapărat solicitările HTTP, dar vor optimiza solicitările pentru a le face să se încarce mai rapid, ceea ce este totuși important pentru accelerarea site-ului dvs.

1. ȘTERGEȚI PLUG-urile NECESARE
2. AMANAREA JAVASCRIPTULUI DE BLOCARE A RANDĂRII ȘI/SAU A AMÂRGĂ EXECUȚIA JAVASCRIPT-ului
3. ÎNCĂRCAȚI CONDIȚIONAT SCRIPTURI
4. MINIMIZAȚI CERERI DE LA TERȚI PĂRȚI
5. OPTIMIZAȚI-VĂ IMAGINI
6. IMPLEMENTAȚI ÎNCĂRCARE LENESĂ
7. UTILIZAȚI UN STACK DE FONTURI DE SISTEM
8. COMBINAȚI CSS ȘI JAVASCRIPT
9. UTILIZAȚI CSS SPRITES PENTRU A COMBINA IMAGINI
10. MINIFICAȚI CODUL SITE-ULUI DVS
11. DEZACTIVAȚI EMOJIS-urile

1. Ștergeți pluginurile inutile

Este posibil să aveți mai multe pluginuri instalate pe site-ul dvs. web. Chiar și atunci când nu le utilizați în mod activ, pluginurile inutile pot crește solicitările HTTP și pot încetini paginile dvs. web.

Pentru a analiza solicitările de plugin, căutați „pluginuri” în raportul GTmetrix Waterfall. Aceasta va afișa numai solicitările HTTP care provin din folderul wp-content/plugins :

Veți vedea ce plugin a creat solicitarea trecând mouse-ul peste un rezultat. Pentru a vă optimiza site-ul, parcurgeți lista, căutând pluginuri inutile. Dacă un anumit instrument nu contribuie în mod activ la site-ul dvs., luați în considerare ștergerea acestuia.

2. Amânați JavaScript de blocare a redării și/sau întârziați execuția JavaScript

Dacă doriți să faceți mai puține solicitări HTTP și să vă optimizați solicitările HTTP, concentrarea pe JavaScript este o altă tactică excelentă.

Există două moduri principale de a optimiza modul în care se încarcă JavaScript al site-ului dvs.:

1. Amână JavaScript de blocare a redării
2. Întârzie execuția JavaScript

Amână JavaScript de blocare a redării

Amânarea JavaScript de blocare a redării nu va elimina solicitările HTTP de la sine, dar se va asigura că încărcarea JavaScript a site-ului dvs. nu blochează solicitările HTTP mai importante.

În timpul procesului de încărcare, un browser poate întâlni o resursă de blocare a randării. Aceste fișiere CSS sau JavaScript întrerupe redarea până când resursa este procesată. Dacă aveți aceste fișiere inutile, acestea ar putea prelungi timpul de afișare a conținutului dvs.

Adăugarea de atribute defer sau asincrone la aceste fișiere va informa browserul să le execute mai târziu. Cu atributele defer, scripturile sunt descărcate în timpul parsării HTML și apoi executate. Atributele asincrone vor rula scriptul de îndată ce acesta este disponibil.

Pentru a implementa acest lucru, puteți utiliza un plugin specific caracteristicilor, cum ar fi pluginul gratuit Async JavaScript.

Sau, multe plugin-uri de performanță generală/caching oferă și această caracteristică, inclusiv WP Rocket și FlyingPress.

De asemenea, puteți configura acest lucru manual în codul site-ului dvs., dacă vă simțiți confortabil să faceți asta.

Pentru a implementa un atribut defer, va trebui pur și simplu să deschideți fișierul functions.php și să găsiți eticheta <script> pentru resursă. Aici, introduceți un atribut defer:

 <script src="resource.js" defer></script>

Iată cum arată un atribut asincron:

 <script src="resource.js" async></script>

În general, cel mai bine este să utilizați atribute asincrone. Cu toate acestea, va trebui să utilizați atribute deferă atunci când scriptul se bazează pe un alt script.

Întârzie execuția JavaScript

Dacă doriți să faceți mai puține solicitări HTTP pentru încărcarea inițială a paginii, o altă tactică populară este să amânați o parte/întreaga execuție JavaScript a site-ului dvs. până la interacțiunea utilizatorului.

Când configurați acest lucru, site-ul dvs. va aștepta să încarce fișierele până când un utilizator interacționează, cum ar fi clic, derulare sau așa mai departe.

Mutând aceste solicitări HTTP mai târziu în cadrul vizitei, puteți face mai puține solicitări HTTP pentru încărcarea inițială și puteți accelera foarte mult valorile axate pe experiența utilizatorului, cum ar fi Largest Contentful Paint.

Pentru a configura acest lucru, puteți utiliza unul dintre aceste pluginuri de performanță:

• WP Rocket
• FlyingPress
• Perfmatters

Iată cum arată în FlyingPress – puteți fie să amânați toate scripturile, cu excepția scripturilor selectate, fie să amânați doar scripturile selectate:

3. Încărcați condiționat scripturile

Unele plugin-uri încarcă inutil scripturi pe site-ul dvs. De exemplu, un plugin poate gestiona doar formularele de pe pagina ta Contactează-ne, dar poate adăuga scripturi într-o altă zonă. În acest caz, vă recomandăm să încărcați condiționat scripturile pluginului.

Pentru a vă încărca condiționat pluginurile, luați în considerare instalarea unui instrument precum Perfmatters. Vine cu un manager de scripturi încorporat pentru dezactivarea pluginurilor sau a scripturilor individuale pe anumite pagini sau postări:

Pentru o opțiune gratuită, puteți lua în considerare și pluginul Asset CleanUp.

Încărcați-vă în mod condiționat pluginurile și apoi rulați din nou site-ul web prin GTmetrix. Dacă tot observați un exces de solicitări HTTP, este timpul să continuați cu următoarea metodă.

4. Minimizați solicitările terților

Pe măsură ce site-ul dvs. se încarcă, este posibil ca browserul unui vizitator să fie nevoie să extragă date de pe o platformă terță parte, ceea ce necesită solicitări HTTP suplimentare. În plus, deoarece vă bazați pe un server terță parte, aceste solicitări vă pot încetini semnificativ site-ul.

Iată câteva exemple de scripturi terță parte:

• Videoclipuri YouTube încorporate
• Scripturi de urmărire Google Analytics
• Fonturi Google
• Reclame de la terți

La fel ca resursele care blochează randarea, puteți aplica atribute asincrone sau amânate scripturilor terță parte.

Pentru servicii precum Google Analytics și Google Fonts, puteți lua în considerare și găzduirea lor local folosind plugin-uri precum acestea:

• OMGF – găzduiește fonturi Google local.
• CAOS – găzduiește Google Analytics local.

5. Optimizați-vă imaginile

La fel ca în cazul pluginurilor, eliminarea imaginilor inutile de pe site-ul dvs. web este importantă. Deoarece fiecare imagine necesită propria sa solicitare HTTP, veți dori să minimizați numărul de fotografii de pe site-ul dvs.

Apoi, toate imaginile tale trebuie să fie optimizate. Deși acest lucru nu va reduce numărul de solicitări HTTP, le va reduce dimensiunea. Acest lucru poate îmbunătăți în mod eficient timpul de încărcare a paginii.

Unul dintre cei mai buni optimizatori de imagine este Optimole. Acest plugin freemium oferă o suită all-in-one de funcții de optimizare a imaginii, inclusiv:

• Servirea de imagini adaptive care sunt optimizate pentru dispozitivul fiecărui utilizator.
• Comprimarea imaginilor.
• Redimensionarea imaginilor.
• Conversia imaginilor în formate optime.
• Servirea de imagini prin intermediul rețelei de livrare de conținut (CDN) încorporată.

Pe măsură ce încărcați imagini noi, Optimole le va comprima și redimensiona. Prin urmare, nu va trebui să vă faceți griji cu privire la fișierele de imagine mari care necesită resurse excesive.

6. Implementați încărcare leneră

De asemenea, este o idee bună să implementați încărcarea leneșă. Acest lucru împiedică încărcarea oricăror imagini și videoclipuri aflate sub partea de jos până când un vizitator derulează în jos pe pagină.

Acest lucru mută acele solicitări HTTP la mai târziu în vizita utilizatorului, ceea ce vă permite să faceți mai puține solicitări HTTP pentru încărcarea inițială și să vă accelerați timpul cel mai mare de vopsire cu conținut.

WordPress 5.5 a adăugat încărcare leneră încorporată pentru imagini folosind încărcare leneră din browserul nativ.

Cu toate acestea, nu toate browserele acceptă încărcarea nativă lazy încă. În plus, utilizarea unui plugin dedicat de încărcare lenevă vă oferă mai mult control asupra funcționalității de încărcare leneră de pe site-ul dvs.

De exemplu, ați putea dori să excludeți primele imagini de la încărcarea leneșă pentru a evita afectarea negativă a timpilor de vopsire cu cea mai mare cantitate de conținut.

Dacă utilizați pluginul Optimole din secțiunea anterioară, acesta include și o funcție încorporată pentru a încărca leneș imaginile site-ului dvs. în mod optim.

De asemenea, puteți ajusta în continuare comportamentul de încărcare leneșă din setările pluginului.

7. Utilizați o stivă de fonturi de sistem

Puteți utiliza o varietate de fonturi personalizate pentru a face site-ul dvs. unic. Cu toate acestea, fiecare font nou va adăuga o altă solicitare HTTP pe măsură ce site-ul dvs. se încarcă.

Din acest motiv, cel mai bine este să limitați numărul de fonturi personalizate pe care le utilizați.

Alternativ, puteți rămâne la o stivă de fonturi de sistem, care utilizează fonturile native din sistemul de operare al unui vizitator.

Anumite teme, cum ar fi Neve, GeneratePress sau Astra, vă permit să reveniți la fonturile de sistem. Cu toate acestea, vă puteți schimba și stiva de fonturi cu CSS.

8. Combinați CSS și JavaScript

O altă modalitate de a face mai puține solicitări HTTP pentru fișierele CSS și JavaScript este să combinați fișiere CSS și JavaScript separate într-o singură foaie de stil sau fișier.

Cu pluginul Autoptimize, veți putea agrega cu ușurință fișierele site-ului în doar câțiva pași:

Sub Setări > Optimizare automată , activați pluginul pentru a optimiza codul JavaScript și CSS. Apoi, bifați casetele de lângă Agregate JS-files și Aggregate CSS-files :

Acest lucru va compila CSS într-un fișier și JavaScript într-un altul. În loc să trimită multe solicitări pentru mai multe fișiere, Autoptimize permite site-ului dvs. să facă mai puține solicitări HTTP.

Notă – deși combinarea CSS și JavaScript este o modalitate sigură de a reduce solicitările HTTP, este posibil să nu aibă niciun impact asupra performanței în lumea reală, în funcție de gazda dvs. web.

Dacă gazda dvs. utilizează HTTP/2 sau o versiune ulterioară (ceea ce majoritatea gazdelor fac în prezent), poate fi de fapt mai bine să nu combinați fișierele, deoarece HTTP/2 acceptă multiplexarea (ceea ce înseamnă că poate descărca mai multe fișiere de pe server fără solicitări multiple de server).

Dacă nu sunteți sigur dacă gazda dvs. folosește HTTP/2, puteți contacta asistența.

9. Folosiți sprite-uri CSS pentru a combina imagini

Pe un site WordPress tipic, fiecare imagine este un fișier individual. Dacă există mai multe fotografii pe o pagină, browserul trimite mai multe solicitări HTTP. Cu toate acestea, un sprite CSS va combina aceste imagini într-un singur fișier.

Instrumentul CSS Sprites este un software gratuit pentru crearea și personalizarea sprite-urilor CSS. Pentru a începe, plasați imaginile în caseta de încărcare:

După ce ați generat sprite-ul CSS, adăugați-l la Biblioteca Media WordPress. Apoi, puteți utiliza codul HTML și CSS generat pentru a plasa fiecare imagine pe site-ul dvs.

10. Minimizează codul site-ului tău

Minimizarea fișierelor site-ului dvs. nu vă va ajuta să faceți mai puține solicitări HTTP, dar vă va ajuta să optimizați solicitările HTTP inevitabile pentru codul HTML, CSS și JavaScript al site-ului dvs.

Pe măsură ce scrieți cod, este posibil să includeți caractere și spațiu alb care îmbunătățesc lizibilitatea. Deoarece nu sunt necesare pentru procesarea unei cereri, le puteți elimina.

Cel mai simplu mod de a minimiza codul site-ului dvs. WordPress este cu un plugin precum pluginul Autoptimize pe care l-am menționat mai devreme.

Majoritatea pluginurilor de memorare în cache WordPress includ, de asemenea, funcții de reducere a codului, inclusiv WP Rocket, FlyingPress, WP Fastest Cache și multe altele.

Sau, dacă utilizați CDN-ul Cloudflare, îi puteți solicita și Cloudflare să vă minimizeze codul.

Odată ce ați miniat fișierele site-ului dvs., solicitările HTTP vor avea timpi de execuție mai rapidi. Cu un cod mai ușor, vă veți accelera site-ul web și veți minimiza solicitările voluminoase.

11. Dezactivează emoji-urile

În mod implicit, emoji-urile WordPress adaugă o solicitare HTTP suplimentară site-ului dvs. Pentru a scăpa de încă o solicitare HTTP, puteți dezactiva emoji-urile WordPress.

Pentru cea mai simplă opțiune, puteți doar să instalați pluginul ușor Disable Emojis.

Alternativ, puteți adăuga acest cod la fișierul functions.php al temei copilului sau un plugin de gestionare de cod, cum ar fi Fragmente de cod:

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

După implementarea tuturor acestor sfaturi, ar trebui să aveți un site cu mai puține solicitări HTTP!

Efectuați mai puține solicitări HTTP pe site-ul dvs. 🎯

De regulă, cu cât site-ul dvs. are mai multe solicitări HTTP, cu atât se încarcă mai lent. Acest lucru poate afecta negativ experiența utilizatorului (UX) a site-ului dvs., determinând vizitatorii să plece fără să vă citească conținutul sau să cumpere un produs.

Pentru a vă accelera site-ul, doriți să eliminați cât mai multe solicitări HTTP și să optimizați solicitările HTTP care rămân, astfel încât acestea să se încarce cât mai repede posibil.

Cu sfaturile din această postare, puteți finaliza ambele lucrări și puteți crea un site de încărcare rapidă pentru vizitatorii dvs.

👉 Cu toate acestea, rețineți că optimizarea solicitărilor HTTP ale site-ului dvs. este doar o parte a puzzle-ului de performanță. Veți avea nevoie, de asemenea, de găzduire WordPress de calitate, dacă doriți ca site-ul dvs. să se încarce rapid – consultați cea mai bună rezumat de găzduire WordPress pentru a vedea opțiunile de top.

Aveți întrebări despre reducerea numărului de solicitări HTTP în WordPress? Întrebați-ne în secțiunea de comentarii de mai jos!