Analiza și efectele solicitărilor HTTP asupra performanței WordPress

În lumea de astăzi, site-urile care duc rapid la implicarea, reținerea și conversiile vizitatorilor. Există o mulțime de factori care contribuie la viteza site-ului web; unul dintre acestea este numărul solicitării HTTP.

În acest tutorial, voi explica ce sunt solicitările HTTP, cum se determină numărul de cereri HTTP, efectele pe care le au asupra performanței WordPress, modul în care pluginurile și temele nu ajută la probleme și soluțiile la problemă.

Ce este o solicitare HTTP?

Atunci când un browser web redă o pagină web, acesta trimite o cerere către serverul web prin intermediul HTTP pentru resurse statice sau componente (cum ar fi imagini, CSS și JavaScript), iar serverul răspunde și trimite fișierele în browser. Astfel, o cerere trimisă de browser către server folosind HTTP este denumită cerere HTTP.

Analiza unei solicitări HTTP

Pentru a înțelege mai bine semnificația unei solicitări HTTP, aruncați o privire la codul HTML al unei pagini web simple:

Din imaginea de mai sus, ați putea vedea că există un total de patru Solicitări HTTP.

Efectul cererilor HTTP pe WordPress

Potrivit regulii de performanță a Yahoo:

80% din timpul de răspuns al utilizatorului final este cheltuit pe front-end. Majoritatea timpului este legat de descărcarea tuturor componentelor din pagină: imagini, foi de stil, scripturi, Flash, etc. Reducerea numărului de componente reduce la rândul lor numărul de cereri HTTP necesare pentru renderarea paginii. Aceasta este cheia pentru paginile mai rapide.

Din fragmentul de mai sus, avem dreptate să deducem că, cu cât numărul de cereri HTTP este mai mic, cu atât site-ul este mai rapid; prin urmare, un site web alimentat WordPress cu multe imagini și fișiere CSS și JavaScript cu referință externă tind să fie lent.

Numărarea numărului de solicitări HTTP

Utilizând extensia Firebug a Firefoxului și Inspectează elementul instrument pentru Google Chrome și Opera, puteți determina cu ușurință numărul de cereri HTTP ale unei pagini Web.

Să vedem cum să verificăm numărul de cereri HTTP din blogul nostru WordPress.

Folosind Firefox

Asigurați-vă că aveți instalat extensia Firebug.

  • Încărcați blogul dvs. WordPress și apăsați pe F12 pentru a deschide consola Firebug.
  • Navigați la Net Panel. dacă este dezactivată, activați-o.
  • Reîmprospătați site-ul dvs. WordPress astfel încât Panoul Net va captura și înregistra cererile HTTP.
  • Ar trebui să vedeți numărul de cereri HTTP afișate în partea de jos.

Utilizarea Chrome și Opera

Spre deosebire de Firefox, nu aveți nevoie de o extensie în Chrome și Opera pentru a verifica solicitarea HTTP, mai degrabă cea încorporată Inspectează elementul instrumentul este utilizat.

Pașii de mai jos sunt valabili atât pentru Chrome, cât și pentru Opera.

  • Încărcați blogul dvs. WordPress.
  • Faceți clic dreapta și selectați selectați Inspectează elementul.
  • Navigați la Panoul de rețea și reîmprospătați site-ul dvs. WordPress.
  • Ar trebui să vedeți numărul de solicitare HTTP afișat în partea de jos.

Știți că instalarea celor mai multe pluginuri WordPress mărește numărul de componente ale paginilor web, mărind astfel numărul de cereri HTTP?

Cum modulele Plugins & Themes măresc solicitările HTTP

O mulțime de plugin-uri pe care le instalăm mărește numărul de solicitări HTTP ne-cunoștință pentru noi.

Cele mai multe pluginuri se bazează pe fișierele lor personalizate, CSS și JavaScript pentru ca acestea să funcționeze. Ei fac acest lucru prin adăugarea unui link care face trimitere la aceste componente la WordPress, care, la rândul lor, mărește numărul de solicitări HTTP.

Ca un caz robust, vom folosi Formularul Abonatului WP pentru a înțelege pe deplin modul în care pluginurile cresc Solicitare HTTP.

Activarea pluginului va adăuga un formular de abonare la sfârșitul conținutului mesajului și va include și un link către acesta foaie de stil externă la WordPress.

Vizionarea sursa paginii din site-ul dvs. WordPress după activarea pluginului va dezvălui adăugarea unei noi componente CSS după cum se arată mai jos, ceea ce înseamnă o creștere a cererilor HTTP.

Ca pluginuri, temele WordPress conțin o mulțime de componente CSS și JavaScript. O temă tipică constă din fonturi încorporate, CSS și componente JavaScript care duc la creșterea numărului de solicitări.

Relația dintre minificare și solicitarea HTTP

Dimensiunea fiecărei componente individuale a site-ului are, de asemenea, un efect asupra performanței WordPress. cu cât dimensiunea este mai mică, cu atât mai rapidă este solicitarea HTTP către componentă, deoarece browserul petrece mai puțin timp descărcându-l ca rezultat al dimensiunii mici.
Dimensiunea componentelor CSS și JavaScript poate fi redusă prin minimizare (eliminând toate caracterele inutile și spațiul liber din codul sursă).

Cum de a reduce solicitările HTTP în WordPress

Pentru a reduce numărul de cereri HTTP, trebuie să reduceți numărul de imagini, fișierele CSS și JavaScript pe WordPress.

Știu că ideea reducerii numărului de imagini de pe blog-ul dvs. ar putea să nu meargă bine cu unii dintre noi, dar ar trebui să încercați cât mai mult posibil să eliminați orice imagini care nu sunt critice pentru aspectul site-ului nostru.

Temele WordPress folosesc fundal imagini în CSS pentru a-și spori frumusețea. Ați putea reduce numărul de imagini transformându-le în sprite. Vedeți acest articol al lui A List Apart și Tuts + Screencast pentru a înțelege cum funcționează spiritele CSS.

Performanța WordPress poate fi îmbunătățită semnificativ atunci când temele "CSS și JavaScript sunt combinate și minificate.

Există câteva pluginuri WordPress, cum ar fi WP Minify și WordPress Minify Better (am folosit și le voi recomanda aceste pluginuri) care combină JavaScript și CSS într-un singur fișier, reducând astfel numărul de solicitări HTTP.

Dacă utilizați pluginul W3 Total Cache, nu este nevoie să instalați pluginurile de mai sus, deoarece are o opțiune de a minimiza și combina CSS și JavaScript.

În calitate de dezvoltator, editez pluginuri care adaugă elemente suplimentare pe blogul meu WordPress, tăind CSS și JavaScript adăugate de pluginuri și inserându-le în fișierul tematic CSS și JavaScript, astfel încât acestea să fie unificate.

Concluzie

Importanța vitezei site-ului nu poate fi subliniată. Un site care leagă lent vizitatorii.

Există o mulțime de bune practici pentru accelerarea site-ului și una dintre acestea reduce numărul de cereri HTTP pe care le-am învățat în acest articol.

Cod