Accelerează încărcarea paginii html. Ce înseamnă această modificare a algoritmului pentru tine? Eliminarea solicitărilor inutile din codul șablonului

Accelerarea încărcării site-ului este la egalitate cu alte elemente Optimizare motor de căutare. Unii webmasteri tind să subestimeze importanța acestui factor (din fericire, sunt din ce în ce mai puțini), între timp muncă lentă resursa web nu numai că afectează în mod direct clasarea paginilor în căutare, dar și strică indirect karma din cauza deteriorării factorilor comportamentali.

Puțină lume le place să aștepte 2 minute până când informatie necesara va apărea în fereastra browserului. Rezultatele numeroaselor studii arată că utilizatorii sunt dispuși să aștepte 3 secunde pentru ca un site web să se încarce fără probleme atunci când vine vorba de traficul mobil, apoi puțin mai mult - până la 10 secunde. Orice lucru care durează mai mult duce la refuzuri (vizitatori care pleacă) - oamenii se mută pur și simplu pe următorul site propus de motorul de căutare.

Cred că nu este nevoie să explic că fiecare vizitator pierdut înseamnă bani pierduți - mai puține venituri din publicitate și mai puține vânzări.

Dar mai există un punct care este strâns legat de viteza site-ului - aceasta este încărcarea pe serverul pe care este găzduită resursa dvs. De regulă, funcționarea lentă a unui site web se datorează faptului că sistemul rulează procese neoptimizate consumatoare de resurse, cum ar fi execuția de scripturi inutile sau transferuri nejustificate. volume mari informație. Toate acestea creează o încărcare suplimentară pe servere, iar hosterul vă poate cere să treceți la un plan mai scump. Este și mai rău dacă încărcarea excesivă blochează găzduirea și în loc să încarce pagini (deși una lungă), vizitatorul va primi una dintre cele 500 de erori de server.

Pentru a rezuma, accelerarea site-ului este necesară pentru:

Reținerea audienței și îmbunătățirea factorilor comportamentali ai paginilor;

Creșterea resurselor în rezultatele căutării;

Reducerea sarcinii de găzduire.

De unde să începeți munca de optimizare

Proiectul este diferit de la proiect la proiect și pentru a începe trebuie întotdeauna să înțelegeți poziția inițială Afaceri Într-un caz, totul funcționează prost, în celălalt, toate resursele și timpul sistemului sunt consumate de un element singuratic.

Acolo vor afișa atât indicatori generali ai timpului de încărcare a paginii, volumul paginii și numărul de solicitări către găzduire, cât și cifre exacte pentru fișiere, scripturi și solicitări individuale.

Din datele generale, putem trage prima concluzie despre urgența începerii lucrărilor de accelerare:

• Timpul de încărcare mai mic de 3 secunde este bun,
• 3-10 secunde este un motiv de îngrijorare,
• mai mult de 10 secunde - un coșmar și groază, trebuie remediat urgent.

Puteți uita complet de munca de optimizare dacă paginile se încarcă mai repede decât în ​​1,5 secunde.

Urmează o defalcare a proceselor individuale și gruparea după tipurile lor. Aici vedem ce tipuri de date consumă traficul maxim și generează maximum de solicitări. Din nou, acesta este un indiciu pentru primul curs de acțiune: imaginile sunt pe primul loc - comprimăm imaginile, dacă scripturile sunt în frunte, trebuie să optimizăm codul;

În plus, unele dintre datele de pe pagină pot fi încărcate de pe alte site-uri. Aici putem înțelege ce servicii și resurse strică imaginea, de exemplu, în captura mea de ecran puteți vedea că scripturile publicitare kwork (schimb independent), googlesindications (reclame Adsense) și rotaban (schimb de publicitate banner) creează 50% din volumul transmis. date. Nu există nicio modalitate de a schimba scripturile externe, așa că atunci când găsiți ceva foarte lent, nu mai utilizați și căutați analogi.

Și cele mai detaliate informații vor fi pe diagrama finală, care arată nu numai cantitatea de date transferate, ci și în timp real, luat de fiecare proces. Prima linie este întotdeauna o solicitare către găzduire și primirea unui răspuns de la acesta cu codul html al paginii. În exemplul meu, acest timp este mai mult de o secundă - mult, dar totuși tolerabil. Dacă bara este foarte lungă, schimbați găzduirea.

Cele mai lungi bare arată ceea ce încetinește resursa.

Analiza preliminară face posibilă vindecarea rapidă a problemelor critice cu acțiuni țintite, care vor da rezultate rapide.

13 pași pentru a accelera încărcarea site-ului

Lista și descrierea pașilor pentru a accelera încărcarea site-ului pe care o voi furniza nu sunt cuprinzătoare. Cu siguranță, există tehnici de optimizare suplimentare despre care nu știu încă, dacă le aveți, voi fi bucuros să aud despre ele și să le adaug la material.

1. Comprimați fișierele media

Fișierele media sunt imagini, videoclipuri, piste audio. De regulă, pe site-uri, video și audio sunt încărcate imediat după lansarea playerelor și imediat când pagina este deschisă, sunt încărcate doar imagini. Respectiv, Atentie speciala le dăm.

La o resursă medie, fișierele de imagine ocupă o parte semnificativă a întregului conținut în funcție de volum (în octeți). Ilustrația de mai sus arată că pe blogul meu de pe pagina principală, această cotă este de aproape 63% (698 kb) - în ciuda faptului că sunt deja optimizate pentru web (comprimate).

Volumul inițial de imagini a fost de 2-3 ori mai mare și ar fi variat între 1,5 și 2 megaocteți - transmiterea unui astfel de trafic către fiecare vizitator al site-ului este dificilă atât pentru hardware-ul serverului, cât și pentru canalele de transmisie a datelor, mai ales când traficul crește.

În Photoshop există plugin special, care comprimă imaginea în timpul editării, dar nu toată lumea folosește acest program, așa că sunt mai multe remediu universal – serviciu online s. Încărcați-vă pozele acolo și luați înapoi exact aceleași, dar mai mici.

Folosesc tinypng.com, am scris instrucțiuni despre el și altele.

Pentru cei care folosesc CMS-ul WordPress, există o soluție și mai simplă - instalați pluginul „Comprimați imagini JPEG și PNG”. Acest plugin comprimă imaginile din mers la încărcare. Nu uitați, atunci când îl utilizați, că trebuie să comprimați nu numai acele imagini care sunt încărcate prin bibliotecă, ci și pe cele care sunt încorporate în tema site-ului dvs. Deci, din fișierele teme, imaginile vor trebui în continuare descărcate și comprimate manual prin intermediul serviciului.

2. Memorarea în cache a paginilor site-ului

Multe date de pe paginile site-ului sunt afișate dinamic, adică sunt extrase din baza de date sau calculate de fiecare dată când utilizatorul le accesează. Elimină-i diferite funcții, dintre care există multe în orice CMS modern.

De exemplu, titlul unui articol este stocat într-o bază de date într-o anumită celulă. Când un utilizator deschide un articol de blog printr-un link, browserul face o solicitare către hosting și acolo, executând diverse comenzi, motorul site-ului preia titlul articolului din baza de date și îl afișează în anumit loc pagini.

Resursele serverului (timp) sunt cheltuite pentru a executa fiecare astfel de solicitare. Și există o mulțime de aceste solicitări și de fiecare dată un mic program este executat pentru fiecare utilizator de către găzduire.

Pentru a accelera munca, este mai profitabil să generați întreaga pagină terminată o dată, să o salvați în memorie și să oferiți noilor vizitatori această versiune - aceasta este stocarea în cache. Pentru a vă asigura că informațiile nu își pierd relevanța, paginile din cache sunt actualizate periodic, de exemplu, o dată pe zi.

Această metodă pare să se transforme PHP complex site-ul web în HTML static simplu.

Nu toate paginile pot fi memorate în cache, doar acelea ale căror informații rămân suficient de relevante perioadă lungă de timp de exemplu articole de blog varianta perfecta. Dar nu puteți stoca în cache căutarea biletelor de avion.

Pentru WordPress există mai multe plugin-uri concepute pentru stocarea în cache, unul dintre ele este .

3. Memorarea în cache a datelor în browser

Browserele moderne pot salva materiale de pe site-uri direct pe computer, astfel încât data viitoare când vizitați aceeași resursă, nu trebuie să descărcați pagini și fișiere întregi, ci doar să încărcați datele modificate.

Sunteți de acord că nu este nevoie să descărcați din nou logo-ul blogului meu de pe Internet dacă mergeți pe o altă pagină unde se potrivește exact cu ceea ce este pe cea actuală.

Sarcina site-ului dvs., sau mai degrabă a fișierului său htaccess, este de a spune browserelor ce date au nevoie pentru a stoca în cache (scripturi, imagini etc.). În plus, nu aveți nevoie de fiecare fisier specific pentru a se înregistra, indicăm pur și simplu tipurile (extensiile).

Iată codul pentru htaccess, doar lipiți-l în fișierul dvs.:

#html și fișiere htm va fi stocat timp de o zi Setul antet Cache-Control „max-age=43200” # fișiere css, javascript și text vor fi stocate timp de o săptămână Setul antet Cache-Control „max-age=604800” # fișiere flash și imagini stocat timp de o lună Header set Cache-Control "max-age=2592000" # Dezactivează stocarea în cache a fișierelor de serviciu Header unset Cache-Control

# Activați stocarea în cache în browserele client < ifModule mod_headers.c > # fișierele html și htm vor fi stocate timp de 24 de ore < FilesMatch "\.(html|htm)$" > Set antet Cache-Control „max-age=43200” < /FilesMatch > # fișierele css, javascript și text vor fi stocate timp de o săptămână < FilesMatch "\.(js|css|txt)$" > Set antet Cache-Control „max-age=604800” < /FilesMatch > # fișiere flash și imagini vor fi stocate timp de o lună < FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$" > Set antet Cache-Control „max-age=2592000” < /FilesMatch > # Dezactivează stocarea în cache a fișierelor de serviciu < FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$" > Antetul dezactivat Cache-Control < /FilesMatch > < /IfModule >

4. Comprimarea Gzip a datelor transmise

Dacă sunteți familiarizat cu programele de arhivare, înțelegeți că fișierele împachetate folosind algoritmi speciali ocupă mai puțin spațiu. În cazul site-urilor web, datorită comprimării fișierelor folosind tehnologia Gzip, volumul datelor transferate de la găzduire către utilizator este redus, iar încărcarea este, în consecință, mai rapidă.

Acest pachet de date își reduce volumul de 2-4 ori. În mod implicit, software-ul serverului poate comprima datele, trebuie să activați această funcție folosind codul din fișierul htaccess:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

# text de compresie, html, javascript, css, xml: < ifModule mod_deflate.c > AddOutputFilterByType DEFLATE text / text html / text simplu / aplicație xml / aplicație xml / xhtml + text xml / text css / aplicație javascript / aplicație javascript / x-javascript < /ifModule >

Dacă aveți un Hyper Cache sau alt plugin de cache care rulează, compresia poate fi deja activată și nu este nevoie să o adăugați la htaccess, caz în care nu este nevoie.

Trebuie să înțelegeți că procesul de comprimare a datelor transmise în sine ocupă resurse server, deci efectul nu este proporțional cu gradul de ambalare.

5. Reducerea numărului de solicitări către site

Fiecare script, font, fișier CSS și imagine conectat la pagină creează o solicitare separată către găzduire. Cu cât sunt mai multe cereri, cu atât mai multe resurse server sunt cheltuite pentru procesarea lor, ceea ce necesită timp.

Putem combina toate cele 4 imagini într-una singură și să le încărcăm pe găzduire, apoi să afișăm doar o parte a imaginii sub fiecare link către rețeaua de socializare, deplasându-l. Va fi o singură cerere către site. Exact așa am făcut-o, întregul bloc de butoane sociale din bara laterală este o singură imagine.

În mod similar, combinăm scripturile și stilurile CSS într-un singur fișier.

6. Reduceți HTML, CSS și JS

Când fișierele din aceste formate sunt compilate, codificatorii le scriu întotdeauna în așa fel încât să fie convenabil să le completeze și să le corecteze - se introduc comentarii, se fac indentări și rupturi de linie. Toate aceste lucruri măresc dimensiunea finală a fișierelor, dar nu au nicio semnificație pentru browserele care le procesează.

Un browser este un program () care nu are nevoie de comentarii și alte caracteristici, citește doar comenzile din cod și va procesa ambele opțiuni în același mod:

Deci, pentru a accelera site-ul, putem elimina în siguranță tot ce nu este necesar din versiunile finale ale fișierelor HTML, CSS și JS.

De obicei, ei fac asta: salvează codul sursă pentru editări viitoare și încarcă o versiune comprimată funcțională direct pe site-ul web.

Exemple de site-uri unde puteți comprima codul:

• HTML – daruse.ru/kompressor-html-koda-onlajn
• CSS – seolik.ru/minify-css
• JS – seolik.ru/minify-js

7. Îndepărtarea funcții inutile sau înlocuirea cu cod HTML

Acest articol va fi util pentru proprietarii de site-uri care rulează motoare populare WordPress, Joomla etc. Dacă site-ul este făcut la comandă, atunci totul ar trebui să fie optim acolo deodată.

Pentru ce anume să ștergeți sau să schimbați, uitați-vă la codul din fișierele site-ului și codul sursă al paginii generate.

Pentru toate opțiunile CMS I exemple concrete Nu o voi da pentru că nu sunt competent (contactați specialiștii relevanți), ci conform Sfat WordPress Voi da.

Din secțiunea de cap eliminăm toate linkurile ascunse inutile, nu sunt de nici un folos și oricum nu sunt vizibile pentru vizitator. Și unele date pot deveni chiar un indiciu util pentru hackeri.

Pentru a scăpa de ele, introduceți următorul cod în fișierul functions.php al temei:

/*** Eliminarea lucrurilor inutile din Antet ***/ remove_action("wp_head","feed_links_extra", 3); remove_action("wp_head","feed_links", 2); remove_action("wp_head","rsd_link"); remove_action("wp_head","wp_generator"); remove_action("wp_head","start_post_rel_link",10,0); remove_action("wp_head","index_rel_link"); remove_action("wp_head","adjacent_posts_rel_link_wp_head", 10, 0); remove_action("wp_head","wp_shortlink_wp_head", 10, 0); remove_action("wp_head", "wlwmanifest_link");

/*** Eliminarea lucrurilor inutile din antet ***/ remove_action ("wp_head" , "feed_links_extra" , 3 ); remove_action ("wp_head" , "feed_links" , 2 ); remove_action ("wp_head" , "rsd_link" ); remove_action ("wp_head" , "wp_generator" ); remove_action ("wp_head" , "start_post_rel_link" , 10 , 0 ); remove_action ("wp_head" , "index_rel_link" ); remove_action ("wp_head" , "adjacent_posts_rel_link_wp_head" , 10 , 0 ) ; remove_action ("wp_head" , "wp_shortlink_wp_head" , 10 , 0 ); remove_action ("wp_head" , "wlwmanifest_link" );

De asemenea, înlocuiesc funcțiile de ieșire cu HTML:

- numele site-ului - descrierea site-ului

- Numele site-ului - descrierea site-ului

În majoritatea tiparelor ele apar de mai multe ori. Numele în sine se schimbă rar, așa că este mai eficient să îl înlocuiți cu text gata făcut.

Dacă doriți, puteți înlocui multe elemente diferite ale unui site WordPress, totul depinde de dorința dvs. de a ușura șablonul. De exemplu, înlocuirea unei bare laterale dinamice cu cod, totuși, nu va fi atât de convenabilă de utilizat - widgeturile nu pot fi modificate din panoul de administrare.

Într-un cuvânt, domeniul de optimizare este vast, dar te sfătuiesc să te descurci fără fanatism.

8. Optimizarea si curatarea bazei de date

În timp, cu modificări regulate aduse bazei de date a site-ului, acesta se extinde, crește în dimensiune și începe să funcționeze mai puțin rapid.

Pentru a-i reda vigoarea de odinioară, merită să optimizați periodic conținutul tabelelor. În aceste scopuri, accesați secțiunea baze de date a găzduirii dvs., introduceți phpMyAdmin - acolo sunt afișate tabelele fragmentate, selectați-le și selectați „optimizare” în opțiunile de acțiune.

9. Blocarea încărcării inutile de la roboți

Multe persoane pot accesa paginile site-ului tău, dar printre toate posibili abonati sunt doar 2 utile:

Un vizitator live care a venit pentru conținut;

Un robot de căutare care vizitează paginile de indexare.

Toate celelalte sunt scanere inutile sau hackeri răi - dacă numărul este mic, la naiba cu ei, dar există o tendință în care numărul conexiuni similare crește proporțional cu popularitatea tot mai mare a proiectului.

Când există o mulțime de roboți dăunători, găzduirea se va prăbuși din cauza încărcării excesive. Un caz extrem - un atac DDos () - vă va distruge site-ul împreună cu găzduirea.

Pentru a bloca atacurile DDoS reale, sunt necesare măsuri speciale, dar problema este că dacă neglijezi instrumente simple blocând activitățile inutile, orice sosire aleatorie de roboți și hackeri se transformă într-un astfel de atac.

Și nu trebuie să irosească resurse activitate rău intenționată, este mai bine să le salvați pentru vizitatorii normali.

Din fericire, majoritatea boților au caracteristici distinctive în numele lor și pot fi blocați prin htaccess. Acest cod interzice accesul de către numele agenților:

# Interziceți roboții hackeri RewriteEngine pe RewriteCond %(HTTP_USER_AGENT) ^$ RewriteCond %(HTTP_USER_AGENT) (|"|%0A|%0D|%27|%3C|%3E|%00) RewriteCond %(HTTP_USER_AGENT) .*(libwww- perl|wget|python|nikto|curl|scan|java|winhttp|clshttp|loader).* RewriteRule ^(.*)$ -

# Interziceți roboții hackeri RewriteEngine activat RewriteCond %(HTTP_USER_AGENT) ^ $ RewriteCond %(HTTP_USER_AGENT) (< | >| „| % 0A | % 0D | % 27 | % 3C | % 3E | % 00 ) RewriteCond %(HTTP_USER_AGENT) . * (libwww-perl | wget | python | nikto | curl | scan | java | winhttp | clshttp | loader) . * RewriteRule ^ (. * ) $ -

Pentru fișiere precum autentificarea de administrator, setați o interdicție pentru IP-uri neautorizate. Pentru a face acest lucru, introduceți codul în htaccess:

comanda refuza, permite refuzul de la toate permit din xx.xx.xx.xx

< Files wp-login.php > comanda refuza, permite nega de la toti permite de la xx. xx. xx. xx < /files >

În loc de xx.xx.xx.xx - adresa dvs. IP. Toate cererile către aceste fișiere de la adrese terță parte primesc un răspuns de server 403 (acces refuzat). Acest răspuns creează o sarcină minimă.

Folosind jurnalele de acces, uită-te la ce alte elemente ale site-ului tău atrag atenția roboților și blochează-le.

10. Interzicerea utilizării directe a imaginilor de pe site

Se întâmplă că au decis să plaseze o imagine de pe site-ul tău pe o altă resursă. Dar nu doar descărcați și postați-l, ci lăsați linkul original în src direct în domeniul dvs. Se dovedește că utilizatorul merge pe site-ul unui concurent sau, și mai rău, al unui hoț de conținut, și i se arată imaginea ta, încărcată de pe hosting. Nu primiți nimic, dar vă cheltuiți resursele de găzduire pentru întreținerea site-ului piratului.

Site-ul dvs. nu ar trebui să fie folosit ca site de găzduire foto oricine are nevoie de el ar trebui să îl descarce și să îl plaseze pe site-ul său. Asigurați-vă că o smochină este arătată tuturor celor care doresc să scoată un astfel de număr.

Pentru a face acest lucru, creați un fișier .htaccess în folderul în care se află imaginile postate pentru WordPress, acesta este wp-content/upload/. De asemenea, puteți utiliza principalul htaccess în rădăcină, dar apoi orice imagini vor fi blocate și ce se întâmplă dacă decideți să vă plasați bannerul pe site-ul altcuiva.

Și astfel doar imaginile aflate într-un anumit folder vor fi filtrate, iar acele fișiere care sunt blocate nu vor trebui să fie într-un director separat (fă-l, de exemplu, în rădăcina site-ului).

În fișierul htaccess, scrieți următorul cod pentru a respinge cererile de imagini care provin din alte domenii:

RewriteEngine on RewriteCond %(HTTP_REFERER) !^$ RewriteCond %(HTTP_REFERER) !^http(s)?://(www\.)?.(jpg|jpeg|png|gif)$ -

RewriteEngine activat RewriteCond %(HTTP_REFERER) ! ^$ RewriteCond %(HTTP_REFERER) ! ^http(e)? : / / ( www \ . ) ? sistem de afaceri. ru RewriteRule\. (jpg | jpeg | png | gif ) $ -

* domeniul meu este indicat în cod - schimbați-l.

Pe lângă simpla blocare, putem obține și beneficii - în loc de imaginea originală, afișare imagine alternativă, de exemplu cu o inscripție despre site-ul sursă ( publicitate gratuită Pentru dumneavoastră). Puteți plasa o imagine alternativă pe serverul dvs., dar aceasta, din nou, va crea o încărcare suplimentară, așa că este mai bine să o postați pe un site gratuit de găzduire foto, de exemplu radikal.ru.

În primul rând, viteza de descărcare afectează factori comportamentali: adâncimea de navigare și numărul de sărituri. Site-urile rapide au rate de conversie mai mari. De asemenea, succesul promovării motoarelor de căutare depinde indirect de viteză: toate celelalte lucruri fiind egale.

• Inginerii Google au descoperit că utilizatorul observă chiar și o întârziere banală de încărcare - 0,4 secunde;
• Este posibil ca un utilizator să părăsească o pagină dacă se încarcă mai mult de 3 secunde;
• Utilizatorii de telefonie mobilă sunt dispuși să aștepte puțin mai mult - 6-10 secunde;
• 79% dintre utilizatorii magazinului online nu vor face o achiziție repetată dacă site-ul a durat mult să se încarce prima dată.

Experimentul Financial Times

Reprezentanți ziar de afaceri a efectuat un experiment cu noul site web al publicației.

Participanții au fost împărțiți în două grupuri. Primul, controlul, a vizualizat paginile cu viteza normală de încărcare, iar al doilea - cu o întârziere de cinci secunde. La a doua etapă au participat deja patru grupuri: un grup de control și încă trei, ai căror participanți „au” o întârziere de una, două și trei secunde. Profunzimea de vizionare în timpul sesiunii a fost luată ca rată de conversie (am luat în considerare utilizatorii care au vizitat cel puțin două pagini) și s-a calculat diferența dintre utilizatorii convertiți din fiecare grup.

Când vizitați două pagini, diferența dintre grafice nu este vizibilă, dar când vizitați trei sau mai multe pagini, o scădere treptată a tuturor opțiunilor de latență de încărcare este vizibilă - și cu cât adâncimea de vizualizare este mai mare, cu atât diferența este mai semnificativă. Cel mai mult viteze mici, cu o întârziere de trei și cinci secunde, rata de conversie a fost cu 7,5% și cu 11% mai mică comparativ cu grupul de control.

Cu cât întârzierea de încărcare este mai mare, cu atât mai puține pagini sunt vizualizate pe sesiune. Rezultatul studiului arată cât de importantă este viteza de încărcare pentru implicarea utilizatorilor și, în cele din urmă, pentru conversie.

Viteza de descărcare poate fi măsurată folosind următoarele servicii:

Cum să creșteți viteza de încărcare a site-ului1. Reduceți dimensiunea încărcărilor paginilor

Utilizați compresia gzip, aceasta va reduce timpul necesar pentru a transfera fișierele în browser. Volumul datelor transferate va scădea de 4-5 ori, iar viteza de descărcare va crește.

Nginx

Pentru a activa compresia gzip în Nginx, modificați configurația serverului și adăugați aceste linii:

Server ( .... gzip activat; gzip_disable "msie6"; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript; )

Apache

Mai întâi asigurați-vă că modulul mod_deflate este activat. După aceasta, trebuie să adăugați următoarele linii în fișierul .htaccess:

AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE aplicație/pemLutputyType Aplicație AddOutputyx.html DEFLATE aplicația terByType DEFLATE/rss+xml Aplicația AddOutputFilter ByType DEFLATE/javascript Aplicația AddOutputFilterByType DEFLATE/x - javascript

Nivel de compresie

Gzip acceptă niveluri de compresie de la 1 la 9. În Nginx, acesta poate fi ajustat după cum urmează:

Gzip_comp_level 5;

Nivelul optim de compresie este 5.

2. Reduceți cantitatea de grafică

Eliminați imaginile inutile. Acolo unde este posibil, utilizați text în loc de elemente grafice evident mai grele.

Formatul JPG este cel mai bun pentru fotografii. PNG este de preferat pentru alte elemente de site - pictograme, ilustrații etc., cu condiția ca imaginile să fie comprimate corespunzător. Rețineți că site-ul va fi vizualizat pe diferite dispozitive și în diferite browsere.

Puteți folosi o singură imagine scalabilă, dar va ocupa mult spațiu și va încetini încărcarea paginii. Este mai bine să folosiți mai multe imagini adaptate la diferite dispozitive astfel încât browserul să descarce ceea ce aveți nevoie - acest lucru se poate face folosind pluginul Imager. Înlocuiește substituenții cu imagini transparente, atașează atributul src fiecăruia și atribuie dimensiunea dorită, după care tot ce trebuie să faci este să încarci mai multe opțiuni de imagine de dimensiuni diferite.

Cum functioneaza:

nou Imager((availableWidths: ));

Puteți comprima imagini folosind funcția de salvare a paginilor web în editorii grafici sau serviciile PunyPNG, TinyPNG și altele.

3. Reduceți numărul de solicitări de browser

Acest punct face ecoul celui precedent. O modalitate de a reduce numărul de solicitări de browser este eliminarea unor elemente din pagină.

Utilizați sprite-uri CSS - fisiere grafice, care conține mai multe imagini simultan. Acest cel mai bun mod, dacă site-ul are o mulțime de imagini și pictograme mici. Combinați mai multe fișiere CSS și JS într-unul singur, acest lucru va reduce numărul de solicitări HTTP.

Pentru a vedea numărul de solicitări de browser în Chrome, accesați Instrumente pentru dezvoltatori (Setări → Instrumente suplimentare) și accesați fila Rețea.

4. Activați stocarea în cache a datelor

Configurați serverul astfel încât browserul utilizatorului să memoreze în cache datele - în acest caz, la prima vizită a site-ului, unele elemente ale paginii (imagini, fișiere CSS și JS) vor fi salvate automat. Data viitoare browserul nu va pierde timpul încărcându-le.

Cu toate acestea, această metodă ajută la creșterea vitezei de încărcare numai cu vizite repetate pe site.

Cum se activează memoria cache?

Utilizați modulul antete Server web Apache, care controlează și modifică anteturile de solicitare HTTP și de răspuns HTTP. Browserul descarcă date de pe server în memoria cache locală, care se modifică rar, iar când vizitează site-ul, le descarcă din cache. De asemenea, puteți stoca fișiere în cache anumite tipuri pe timp specificat, după care vor fi descărcate din nou de pe server.

Acest lucru se poate face astfel:

Set antet Cache-Control „max-age=1234000”

Specifica extensiile necesare fișiere din constructul FilesMatch, unde pentru ele sunt setate antetul Cache-Control și variabila max-age, cu ajutorul cărora este specificat timpul de stocare a fișierului în secunde. Acele fișiere care nu trebuie să fie stocate în cache, pur și simplu nu le includ în listă.

De asemenea, puteți dezactiva stocarea în cache a fișierelor. Adăugați următorul cod la .htachess, după ce ați specificat ce tipuri de fișiere nu doriți să păstrați în cache:

Antetul dezactivat Cache-Control

De asemenea, puteți controla stocarea în cache folosind modulul expiră. Acesta controlează setarea antetelor de cache HTTP de către browser. Specificați perioada de stocare a datelor în funcție de timpul de la ultima schimbare fișier sau din timpul de acces al clientului.

De exemplu, așa:

ExpiresActive On ExpiresDefault „acces plus 2 luni” ExpiresByType imagine/png „acces plus 4 luni” ExpiresByType imagine/swf „acces plus 4 luni”

ExpiresByType text/html „acces plus 2 luni 14 zile 7 ore” ExpiresByType imagine/gif „modificare plus 8 ore 3 minute”

5. Reduceți dimensiunea codului CSS și JavaScript

Serviciile speciale pentru simplificarea JavaScript și CSS elimină caracterele „extra” (spații, comentarii) din cod și reduc timpul de încărcare al acestuia. Ele pot fi mai eficiente decât compresia gzip standard pentru o viteză crescută. Google recomandă ca fișierele mici CSS să fie inserate direct într-un document HTML.

Puteți utiliza aceste servicii:

Plasați fișierele CSS la începutul paginii și fișierele JS la sfârșit.

Dacă fișierele CSS sunt situate în antet, pagina se redă treptat, ceea ce creează o impresie pozitivă a site-ului. Plasarea fișierelor JS în partea de jos a paginii permite browserului să încarce mai întâi conținutul paginii și abia apoi să se ocupe de scripturi.

Configurare fericită!

Bună ziua, dragi cititori ai site-ului blogului. Probabil te-ai săturat deja de subiectul creșterii vitezei de încărcare a site-ului (), căruia i-am dedicat cea mai mare parte a articolelor publicate în ianuarie. Dar ce poți face, vreau să contur tot ce s-a înțeles și s-a făcut pentru a grăbi acest blog, înainte ca memoria insidioasă să ștergă nuanțele și punctele importante.

Astăzi vreau să încerc să sistematizez tot ceea ce am scris deja despre optimizarea vitezei și, de asemenea, să adaug puncte semnificative care vor reduce puțin încărcarea pe serverul de găzduire prin utilizarea compresiei Gzip statice mai degrabă decât dinamică.

Cum să creșteți rapid viteza de încărcare a site-ului

Când am lansat prima dată Page Speed ​​​​pentru pagina principală a blogului meu, am văzut această imagine tristă:

Un total de 72 de puncte din 100 posibile și o grămadă de comentarii marcate cu roșu. Adevărat, după ce am urmat aproape toate recomandările pe care mi le-a dat acest plugin, pagina principala a primit de la el un rating mai mare de 94 de puncte.

Dar, pe lângă Viteza paginii, puteți evalua foarte clar viteza de încărcare a unui site și puteți vedea toate obiectele încărcate în Pingdom și altele asemenea.

La început, au fost încărcate aproape 90 de obiecte (ccs, js, imagini) și fiecare dintre ele necesita o solicitare http separată. Dar, după ce am analizat toate obiectele descărcate folosind serviciile online de mai sus, precum și după sfatul Page Speed, am reușit să reduc numărul lor la trei duzini, ceea ce nu a putut decât să afecteze viteza totală:

Ei bine, acum să ne amintim toate metodele în ordine. Și optimizarea ar trebui probabil să înceapă în ordinea în care zonele cu probleme sunt afișate în fereastra Viteza paginii, deoarece aceștia vor fi cei mai eficienți și mai puțin dificili pași de implementat - ceea ce se numește „ieftin și vesel”.

De aceea am făcut primul lucru (ccs, js, imagini) în browserele vizitatorilor (adică voi, dragii mei cititori).

Da, da, cu ajutor setări web server, puteți controla comportamentul browser-ului vizitatorilor. În acest caz, primul îi spune celui de-al doilea timpul în care obiectele statice ar trebui să fie stocate în cache pentru a nu le mai solicita de la server.

Aceasta, la prima vedere, este o setare nesemnificativă, dar poate face minuni în creșterea vitezei de încărcare a paginilor din resursa dvs. pentru acei vizitatori care au vizitat-o ​​deja o dată, deoarece memoria cache a browserului lor conține deja fișiere de stil și script, precum și imagini din șablonul dvs., care vor fi aceleași pentru toate paginile.

Din păcate, metodele de control pe care le-am descris prin .htaccess nu funcționează întotdeauna din diverse motive (lipsa unui modul necesar, etc.), așa că puteți încerca să vă contactați hosterul în legătură cu această problemă, pentru că și el va fi interesat de aceasta, adică. La. setări optime stocarea în cache în browserele utilizatorilor va reduce încărcarea resursei dvs. pe găzduirea acesteia.

Următorul pas eficient Pentru a crește viteza de încărcare, puteți combina fișiere externe în stil CSS sau script-uri JS. Citiți despre și despre care mi-am dat seama.

Dar nu am reușit să combin scripturi externe, probabil din cauza lipsei de înțelegere chiar și a elementelor de bază ale JavaScript. Adevărat, am avut doar două fișiere externe cu scripturi, așa că pierderea vitezei de încărcare a site-ului nu va fi mare.

Dar pe lângă unificare stiluri externe CSS și scripturi (acest lucru se face pentru a reduce numărul total de obiecte încărcate, ceea ce va reduce numărul de solicitări http către server), aceleași fișiere de stil și script pot fi comprimate foarte eficient folosind Gzip (de fapt, acesta este același Zip pe care îl utilizați în mod activ pe computer).

Puteți comprima fișierele CSS și Js folosind Gzip de mai multe ori, dar puteți reduce dimensiunea acestor fișiere și mai mult prin optimizarea prealabilă a codului lor.

Deci, va trebui să descărcați pe computer toate fișierele externe Css și Js implicate în încărcarea paginilor (după ce le-ați combinat, nu va fi dificil) și să creați unul din fiecare dintre ele copie de arhivă cu extensia .gz. Puteți face acest lucru folosind programul gratuit 7zip. În continuare, să vă arăt cu un exemplu, pentru că este inutil să teoretizezi aici.

Să luăm ca exemplu fișierul de stil principal al blogului meu, style.css. După ce îl fac Gzip folosind programul 7zip, voi avea o arhivă style.css.gz.

Dar pentru că unele browsere nu vor dori să includă un fișier de stil cu extensia .gz, apoi eliminăm finalul .gz din acesta și ajungem din nou cu style.css, dar care este de fapt o arhivă (nu ați confundat încă?).

Dar pur și simplu înlocuirea fișierului original style.css de pe server (necomprimat încă în Gzip) cu arhiva pe care tocmai am creat-o, dar denumită în continuare style.css, nu va fi suficientă.

La urma urmei, unele browsere încă nu acceptă compresia (de obicei acestea sunt versiuni vechi, care sunt totuși folosite de utilizatori), așa că lângă style.css, care va fi de fapt o arhivă (rețineți că am eliminat extensia .gz din ea). ), avem nevoie va pune originalul nu fișier comprimat stiluri.

Dar va trebui să-l numim altfel decât style.css. Pentru a face acest lucru, îl puteți redenumi, de exemplu, astfel: style.nogzip.css. Acum pe serverul din folderul cu tema WordPress voi avea două fișiere de stil:

style.css - arhivă cu extensia .gz întreruptă

style.nogzip.css este un fișier de stil obișnuit necomprimat care va trebui să fie difuzat browserelor care nu acceptă compresia

Va trebui să faceți această operațiune pentru toate stilurile și scripturile externe (Css și Js) care sunt încărcate împreună cu paginile resursei dvs. Am avut doar patru dintre ele: cel de stil principal, în care am adăugat și proprietățile unor plugin-uri WordPress, precum și un fișier script din folderul teme și două scripturi externe din .

Acum, pentru ca compresia statică să funcționeze pentru stiluri și scripturi externe, trebuie să deschideți .htaccess pentru editare din folderul rădăcină al resursei dvs. și să înlocuiți codul responsabil pentru Gzip cu următorul cod modificat:

RewriteEngine On RewriteCond %(HTTP:Accept-encoding) !gzip RewriteCond %(HTTP_USER_AGENT) Konqueror RewriteRule ^(.*)\.(css|js)$ $1.nogzip.$2 Adăugați antet Variați Set de antet utilizator-agent Codificare conținut: gzip Header set Cache-control: private Header unset Content-Encoding

Dacă redenumiți fișierele originale stilurile și scripturile au folosit alte nume decât style.nogzip.css, apoi în linia corespunzătoare de cod va trebui să înlocuiți masca $1.nogzip.$2 cu propria dvs. În general, asta e tot.

Acum serverul nu va comprima Css și Js din mers de fiecare dată, ci va trimite imediat browserelor o copie pe care ați precomprimat-o, iar în cazul unui browser care nu înțelege Gzip - versiunea originala un fișier precum style.nogzip.css.

Va exista o ușoară creștere a vitezei de încărcare a site-ului și o reducere a încărcării resursei dvs. pe găzduire. Dar câteva zile mai târziu am avut o jenă. Aparent și priveliștea Administrator WordPress s-a schimbat dramatic - stilul a căzut.

Dar problema a fost rezolvată rapid prin efectuarea manipulărilor descrise mai sus cu fișierul de stil folosit în panoul de administrare. În cazul meu, a fost colors-classic.css din folderul:

/wp-admin/css

Apoi, am vrut să folosesc compresia Gzip statică pentru fișierele HTML, care sunt, de asemenea, comprimate de server din mers, creând încărcare suplimentară. Aici am găsit o soluție destul de simplă, aplicată WordPress. Adevărul este că am folosit.

În setările sale există o zonă „Compresie”, care, așa cum am crezut inițial, este responsabilă pentru plasarea compactă a paginilor stocate în cache pe hard disk-ul de găzduire. Mi s-a părut că arhivarea paginilor din cache ar consuma timp CPU inutil, așa că am dezactivat-o cu bucurie.

Dar după ce am căutat puțin informații pe tema compresiei Gzip a paginilor Html, m-am răzgândit despre aceste setări de compresie în pluginul Hyper Cache.

Se pare că, bifând această casetă „Activați compresia”, activăm precomprimarea paginilor de blog stocate în cache folosind algoritmul Gzip.

Nu pot confirma acest lucru sută la sută, dar după ce am activat compresia în setările Hyper Cache, observ de mult timp o scădere a încărcării pe server. În general, se pare că, ca întotdeauna, sicriul s-a deschis pur și simplu.

Apropo, dacă proiectul tău este construit pe baza Joomla, atunci există câteva componente foarte bune (conform recenziilor utilizatorilor) pentru acesta care îți permit să folosești la maximum metodele pe care le-am descris pentru a crește viteza de încărcare a site-ului, dar in acelasi timp totul va fi mult mai simplu, pentru ca multe se fac automat, cu costuri minime de configurare pentru tine.

Eu nu am testat încă aceste componente, dar de îndată ce voi ajunge la ele, cu siguranță voi scrie despre ele. Deocamdată, voi oferi doar link-uri către aceste componente pentru Joomla: jFinalizer și WEBO Site SpeedUp.

Optimizarea graficii si reducerea numarului de solicitari

Optimizarea grafică poate avea, de asemenea, un impact foarte semnificativ asupra vitezei de încărcare. După cum am scris mai devreme, . Dar acest lucru va fi convenabil numai dacă există un număr mic de ele.

Personal, am folosit pentru optimizarea loturilor, despre care am scris deja în detaliu. De asemenea, puteți utiliza un alt serviciu online foarte popular pentru comprimarea fotografiilor fără a pierde calitatea de la Smush.it. Dar gradul de compresie a fotografiilor din PunyPNG mi s-a părut mai mare, poate datorită utilizării unor scripturi mai reușite.

Am copiat folderul cu imaginile blogului meu pe computer și le-am încărcat pe toate (în pachete de 15 bucăți, pentru că există o astfel de limitare în PunyPNG) în acest serviciu online și apoi le-am descărcat arhiva generala, care conține imagini deja optimizate de pe blogul meu.

În general, după ce am petrecut o jumătate de oră, am reușit să comprim imaginile PNG cu aproximativ 7 procente în medie și cu 5 procente.

Ca urmare, dimensiunea totală a tuturor imaginilor folosite pe blogul meu a scăzut cu câțiva megaocteți, ceea ce va afecta fără îndoială atât creșterea vitezei de încărcare a site-ului, cât și va reduce ușor încărcarea pe serverul de găzduire.

Ei bine, ultimul și, de asemenea, unul dintre cei mai mulți moduri eficiente accelerare, poate exista o reducere a numărului de solicitări http care vor fi generate la încărcarea paginilor din resursa dumneavoastră. Le puteți reduce prin reducerea numărului de obiecte încărcate împreună cu pagina web. Am vorbit deja la începutul articolului despre unificare Css externși fișierele Js sunt doar pentru acest scop.

Dar cea mai mare parte a cererilor se duce întotdeauna la încărcarea graficelor. Poate fi imagini de fundal, care au fost menționate în fișierul de stil, sau imaginile specificate direct în cod HTML pagini.

Pentru a reduce numărul acestora, trebuie să analizați dacă este necesar să încărcați o anumită imagine împreună cu pagina. În acest fel, am scăpat de câteva zeci de solicitări http în plus. Aceeași imagini de fundal din șablon, care va fi în continuare necesar pentru funcționarea resursei dvs., poate fi combinat în așa-numitele . Drept urmare, în loc de o duzină de solicitări, va trebui să faceți doar una.

În general, creșterea vitezei de încărcare a site-ului va duce inevitabil la o creștere cel puțin ușoară a încărcăturii pe hosting, care, cu trafic mare, poate fi ultima picătură. Acum, cu 5.000 de mii de vizitatori pe zi, sarcina pe procesorul serverului se apropie de maximul permis.

Am început deja să mă gândesc la un pas atât de radical ca să-mi fac blogul aproape static, în folderul rădăcină al căruia va fi fișiere obișnuite HTML și tot Motor WordPress va lucra în folder separat. În acest fel, sarcina va fi menținută la minimum.

Puteți implementa acest lucru în WordPress folosind pluginul miracol Really Static. Adevărat, versiunea sa nu a atins încă nivelul de unul, dar recenziile lucrării sale sunt extrem de pozitive. De fapt, este un analog complet al celebrului script Maxsite Cache, pe care, de exemplu, Mikhail Shakin îl folosește pe blogul său.

Prețul pentru reducerea încărcării va fi pierderea unor funcționalități, dar cred că cu setările corecte pentru actualizarea cache-ului (în acest caz vor fi pagini Html obișnuite, ca pe site-urile de la începutul acestui mileniu) va fi posibil să se reducă la minimum toate aceste neajunsuri. În orice caz, nu observ nicio crimă cu Shakin când îi citesc blogul.

Dacă cineva are deja experiență cu pluginul Really Static WordPress, aș fi foarte recunoscător dacă ați lăsa recenzia dvs. despre acesta în comentarii. Vă mulțumim pentru atenție. Articolul s-a încheiat în liniște. Este timpul să o lustruiți și să o pregătiți pentru publicare.

Multă baftă! Inainte de pe curând pe paginile site-ului blogului

Puteți viziona mai multe videoclipuri accesând „);”>

S-ar putea să fiți interesat

Comprimarea Gzip pentru a accelera încărcarea site-ului - cum să o activați pentru Js, Html și Css folosind fișierul .htaccess
Crearea de sprite-uri CSS în generator online Sprites Me pentru a reduce numărul de solicitări către server
Măsurarea și creșterea vitezei site-ului în GTmetrix, precum și configurarea încărcării bibliotecii jQuery din Google CDN
Cum să obțineți un site web rapid - optimizarea (comprimarea) imaginilor și scripturilor, precum și reducerea numărului de solicitări Http
Optimizare și compresie CSS în Viteza paginii - cum să dezactivați fișierele externe de foi de stil și să le îmbinați într-unul singur pentru a accelera încărcarea

Buna baieti!

Astăzi va fi unul dintre cele mai importante subiecte în optimizare internă site-ul. Materialul este mare, dar practic și util. Am susținut momentele dificile cu lecții video.

Vom vorbi despre cum să grăbiți încărcarea site-ului dvs., folosind 7 metode de lucru. Poate că sunt cunoscute de toată lumea. Dar am observat că nu toată lumea le folosește. Și în complex, mai ales puțini oameni.

În general, în conținut voi descrie toate metodele punct cu punct, apoi voi citi și pune totul în practică.

Înainte de a accelera site-ul, vreau să spun câteva cuvinte despre importanța acestei acțiuni și despre modalitățile de verificare a vitezei de încărcare.

Se știe de mult că viteza de încărcare a resurselor este unul dintre factorii de clasare în rezultatele căutării. Dacă luați absolut 2 pagini identice, dar una se încarcă mai repede, atunci va avea poziții mai mari în rezultatele căutării. Dar asta nu înseamnă că primul va fi pe poziția 30, iar al doilea pe poziția 1. Nu, doar că un site de încărcare mai rapidă se va clasa puțin mai bine.

Prin urmare, dacă există modalități ușoare de a ne depăși concurenții în cel puțin ceva, atunci trebuie să o facem. În plus, există o mulțime de astfel de metode. Folosindu-le pe toate, vom merge în direcția corectă și vom depăși concurenții noștri.

În ceea ce privește verificarea vitezei de încărcare a site-ului, am folosit întotdeauna serviciul webwait. Odată ce accesați acesta, trebuie doar să introduceți adresa oricărei pagini de pe site-ul dvs. și să începeți verificarea.

În mod implicit, serviciul va verifica viteza de încărcare a paginii de 5 ori pentru a determina valoarea medie. Intervalul dintre cereri va fi de 5 secunde. Dacă doriți să modificați ambele valori, am evidențiat setările corespunzătoare cu o casetă albastră în imaginea de mai sus. Primul este numărul de verificări, al doilea este intervalul dintre solicitări.

Tocmai am verificat viteza de încărcare a unuia dintre articolele mele. Pe baza rezultatelor a 5 verificări, am primit un rezultat mediu de 0,82 secunde.

Desigur, poate fi dificil să se obțină o valoare mică și aceasta depinde de mulți factori:

• Cantitatea de conținut pe pagină;
• Numărul de scripturi încărcate;
• Dimensiunea graficelor de pe pagină și de pe site în ansamblu;
• Numărul de pluginuri.

Prin urmare, trebuie să încercați să reduceți influența tuturor acestor factori. Despre asta începem să vorbim în continuare. Să trecem la prima și poate cea mai simplă metodă.

Optimizare grafica

Nu este un secret pentru nimeni că cel mai important element al fiecărui site este grafica. Aceasta include atât grafica pe fiecare pagină, cât și grafica generală. În ceea ce privește graficele de pe fiecare pagină, acestea sunt grafice de conținut - imagini, capturi de ecran, fotografii. Grafica generală este grafică care este inclusă în designul site-ului web. Putem optimiza toate acestea.

Nu ar trebui să includeți niciodată elemente grafice de dimensiune completă în articolele dvs. Această eroare se exprimă clar pe site-urile dedicate subiectelor culinare și fotografiilor, când toate fotografiile sunt încărcate în articole la dimensiune completă.

O fotografie făcută cu o cameră SLR de calitate medie va cântări câțiva megaocteți. Dacă încărcați o astfel de fotografie pe site, vizitatorul va descărca întreaga fotografie la intrarea în pagină. Imaginează-ți cât de mult ar dura încărcarea unei pagini dacă ai posta 10 imagini cu volum mare.

Acordați atenție acestui punct atunci când publicați conținut. Am scris odată un articol despre fără pierdere de calitate. Materialul vă va fi foarte util.

În ceea ce privește designul, încercați să folosiți mai puține imagini. Puteți realiza un design complet sănătos și organic folosind stiluri CSS. Acest lucru va fi și mai bine. Dacă te uiți la resurse foarte populare, vei observa că designul lor este în esență fundal alb cu linii de separare. Acest lucru joacă foarte mult în mâinile tale și ucide 2 păsări dintr-o singură piatră:

Reduce timpul de încărcare;

Mărește confortul consumului de conținut.

Dacă nu puteți trăi fără imagini colorate, atunci un articol despre reducerea dimensiunii imaginilor (link de mai sus) vă poate ajuta.

Memorarea în cache

Memorarea în cache este poate cel mai important element în încărcare rapidă paginile site-ului. In mod deosebit această funcție util pentru frecventa mare când sunt create multe interogări de bază de date.

Pentru a face memorarea în cache pe un site web (pentru WordPress), trebuie să instalați pluginul Hyper Cache. Instrucțiuni complete Citește mai departe. Am mestecat totul acolo.

De asemenea, puteți adăuga câteva coduri la fișierul .htaccess care va permite și stocarea în cache, precum și compresia gzip. Sincer să fiu, nu am observat efectul lor asupra site-ului meu. Poate pentru că blogul meu era deja complet optimizat. Și nu văd prea mult rost în ele. Și există o problemă, deoarece nu vom putea șterge memoria cache. Atunci nicio modificare nu va fi vizibilă pe site. Prin urmare, nu vă voi da aceste coduri, astfel încât să nu vă grăbiți mai târziu dacă apar probleme.

Eu nu le folosesc. Memorarea în cache folosind pluginul Hyper Cache este mai mult decât suficientă.

Optimizarea încărcării scripturilor

Dacă site-ul tău este destul de funcțional (diverse butoane sociale, glisoare, contoare de trafic etc.), atunci are o mulțime de scripturi.

Scripturile reprezintă întotdeauna o sarcină suplimentară și grea pe site. Scăpați întotdeauna de ele dacă este posibil. Dacă acest lucru nu este posibil, atunci le puteți încărca ultimele și, de asemenea, le puteți elimina din codul șablonului de temă în sine.

Pentru a încărca scripturile chiar la sfârșitul încărcării paginii, acestea trebuie să fie plasate chiar în partea de jos a codului paginii, adică în subsol. În WordPress, acest lucru se face prin plasarea acestuia în fișierul footer.php înainte de eticheta de închidere.

De asemenea, puteți plasa scripturile într-un fișier separat, mai degrabă decât în ​​fișierul footer.php. Și apoi încărcați acest fișier la sfârșitul fișierului de subsol. Acesta este cel mai bun mod de a încărca scripturi pe site.

Îți voi arăta în practică cum să faci totul. Voi începe cu un tutorial video.

De obicei, majoritatea scripturilor sunt plasate în fișierul header.php între etichete și sunt plasate între . Ca exemplu, arăt un script din fișierul meu antet.

Am evidențiat cu un cadru roșu piesa de care avem nevoie. După cum puteți vedea, este inclus în etichetele de deschidere și de închidere ale scriptului, care este evidențiat rame albastre. Am evidențiat eticheta de închidere cu un cadru negru pentru a arăta unde se află scriptul în sine.

Pentru a plasa acest script într-un fișier separat, trebuie să luăm conținutul său (caseta roșie) și să-l plasăm într-un fișier nou, pe care îl creez folosind editorul Notepad. Conținutul noului fișier va arăta astfel.

Acum să economisim acest fișierîn format .js și numiți-i un nume convenabil. Îl voi numi „footer-scripts.js” pentru a înțelege clar că acesta este un fișier de scripturi care sunt afișate în subsolul site-ului.

Acum puteți încărca acest fișier pe site, astfel încât scripturile să funcționeze. Pentru a face acest lucru, trebuie să plasați o linie de cod care specifică calea către acest fișier. Trebuie să plasați codul în fișierul footer.php înainte de eticheta de închidere /

Aici este linia mea de cod.

În el, va trebui să înlocuiți calea către fișier și numele acestuia, dacă a fost numit diferit. Pentru a fi mai ușor de înțeles, ofer o linie cu indicii.

Calea fișierului din această linie este potrivită pentru site-urile WordPress. Dacă aveți un site web cu un alt motor sau doar o pagină HTML, atunci calea va trebui modificată pentru a vă potrivi.

Când o linie a fost schimbată, o plasăm în fișierul de subsol înaintea celui de închidere eticheta corporală. Va arăta ca imaginea de mai jos.

Ar trebui să fie cam la fel și pentru tine. După cum puteți vedea, pe lângă această linie, sunt afișate și alte scripturi. Astfel, acestea sunt încărcate ultimele când se încarcă site-ul. Codul site-ului în sine devine mai curat și mai plăcut pentru motoare de căutare. Acest lucru joacă, de asemenea, un rol în promovare.

În acest fel, ar trebui să scăpați de numărul maxim de scripturi din fișierele șablon și să încercați fie să le eliminați cu totul, fie să le încărcați printr-un fișier, așa cum am arătat mai sus. Aceasta este una dintre cele mai bune modalități de a accelera un site dacă are multe scripturi.

Dacă trebuie să plasați nu un script, ci mai multe într-un fișier, atunci pur și simplu indentați-l în jos și plasați noul cod. Dar atunci este mai bine să semnați fiecare script pentru a nu vă încurca mai târziu. De exemplu, puteți descărca fișierul meu pentru a vă referi la el.

Și încă o notă. Nu toate scripturile funcționează în subsolul site-ului. Unele funcționează doar când sunt plasate în antet, adică în fișierul Header.php între etichete. De exemplu, butonul social„Îmi place” de la Vkontakte nu funcționează în subsol dacă îi luați codul de pe rețeaua de socializare. În acest caz, va trebui să plasați scriptul în antet.

Eliminarea solicitărilor inutile din codul șablonului

Acesta este cel mai mult calea greaîn accelerarea unui site care rulează pe un fel de motor, de exemplu WordPress. Esența sa este de a înlocui liniile de cod PHP din fișierul șablon cu codul deja generat pentru a scăpa de generarea inutilă de interogări în baza de date.

Vom avea nevoie de fișierul header.php și de tot ce se află în el între etichete. Codurile PHP care generează cereri și afișează informații de bază sunt stocate între aceste etichete. Întreaga idee va fi mai ușor de înțeles cu ajutorul tutorialului video pe care l-am pregătit mai jos.

Acum versiunea text.

Voi arăta totul folosind exemplul unei linii care generează o solicitare de afișare a codificării site-ului. Linia din fișier arată astfel.

După cum puteți vedea, acesta este cod PHP. Dacă ne uităm la codul sursă (ctrl+u) al oricărei pagini de pe site, vom vedea că acest cod PHP nu mai există, dar va exista cod HTML cu codificarea specificată.

Pentru a scăpa de această solicitare de a genera codificare, trebuie să luați o linie gata făcută din codul sursă și să modificați codul php din fișierul șablon cu acesta. Până la urmă va fi așa.

Am scăpat de o cerere. În același mod, trebuie să înlocuiți alte linii posibile. Desigur, nu va fi posibil să faceți totul, deoarece nu totul este în cod sursa este afisat. Dar trebuie să ne străduim pentru număr maximînlocuire

De asemenea, aș dori să vă atrag atenția asupra faptului că există un cod pentru generarea numelui site-ului. De obicei este conținut în etichete. Dacă intenționați să schimbați numele resursei, atunci fie nu înlocuiți acest cod, fie nu uitați să schimbați mai târziu numele în codul fișierului, deoarece după înlocuire, numele va fi scos din linia finală cu numele. Numele site-ului nu va fi generat, deoarece nu va exista cod PHP. Luați în considerare acest punct.

De asemenea, nu uitați să efectuați toate astfel de manipulări cu fișiere numai după . Și faceți-le pe computer folosind programe de editare, astfel încât să puteți anula editările. Folosesc Notepad în scopuri similare.

Dezactivarea revizuirilor

Te voi tortura din nou cu un tutorial video.

Revizuirile sunt salvarea automată a copiilor înregistrărilor care se fac atunci când înregistrările sunt create la anumite intervale de timp.

De fapt, acesta este un lucru util, dar uneori creează mult gunoi și încarcă baza de date. Nu aș recomanda cu tărie dezactivarea acestei funcționalități, deoarece uneori ajută. Lumina se poate stinge brusc și apoi ce? Și, dacă există copii ale înregistrării, atunci vă puteți restabili progresul în siguranță. Acest lucru s-a întâmplat de mai multe ori, știu din proprie experiență.

Le-am dezactivat oricum, dar dacă ești începător, nu recomand să faci asta. Timp mai bunȘtergeți baza de date a revizuirilor din când în când, pe măsură ce acestea un numar mare de creează o sarcină semnificativă.

În rădăcina motorului există un folder WP-includes, care conține fișierul default-constants.php. Trebuie să-l deschideți și să găsiți următorul conținut în el.

if (!defined("AUTOSAVE_INTERVAL")) define("AUTOSAVE_INTERVAL", 60); /** * @din 2.9.0 */if (!defined("EMPTY_TRASH_DAYS")) define("EMPTY_TRASH_DAYS", 30); if (!defined("WP_POST_REVISIONS")) define("WP_POST_REVISIONS", true);

define („AUTOSAVE_INTERVAL” , 60 ) ; * @din 2.9.0 definesc ("EMPTY_TRASH_DAYS" , 30 ) ; dacă (! definit ("WP_POST_REVISIONS")) define ("WP_POST_REVISIONS" , true );

La momentul scrierii acestui articol, toate acestea se găsesc începând de la linia 277. Tot acest cod este responsabil pentru siguranța înregistrărilor noastre. Este format din 3 părți, fiecare începând cu dacă.

Prima parte este responsabilă pentru intervalul pentru crearea automată revizuiri. Valoarea implicită este de 60 de secunde, ceea ce înseamnă că o copie a înregistrării va fi creată la fiecare minut. Imaginați-vă că petreceți mai mult de o oră scriind un articol. Poate sa valoare dată crește, de exemplu, la 10-20 de minute. Această setare funcționează numai când revizuirile sunt activate.

if (!defined("AUTOSAVE_INTERVAL")) define("AUTOSAVE_INTERVAL", 600);

dacă (! definit ("AUTOSAVE_INTERVAL")) define („AUTOSAVE_INTERVAL” , 600 ) ;

Valoarea este setată în secunde.

A doua parte este responsabilă pentru timpul de stocare a intrărilor șterse în coșul de reciclare. Când ștergem intrările, acestea merg la coșul de gunoi. În mod implicit, acestea sunt stocate acolo timp de 30 de zile, după care sunt șterse. Dacă setați valoarea la 0, atunci intrările nu vor merge în coșul de gunoi, ci vor fi șterse imediat fără posibilitatea de recuperare.

if (!defined("EMPTY_TRASH_DAYS")) define("EMPTY_TRASH_DAYS", 0);

dacă (! definit ("EMPTY_TRASH_DAYS") ) define ("EMPTY_TRASH_DAYS" , 0 );

A treia parte este responsabilă pentru activitatea de audit. Sunt activate implicit. Dacă doriți să o dezactivați, atunci valoarea adevărată trebuie schimbată în fals sau setată la 0.

Viteza site-ului este una dintre cele mai rapide indicatori importanți atunci când creați un site web și aplicații de internet.

Potrivit cercetărilor diverșilor analiști Google, oamenii urmăresc de obicei mai puțin de primele 25 de secunde ale unui videoclip, iar unii chiar urmăresc mai puțin de 10 secunde.

Pe baza acestui fapt, ar fi indicat să faci conținutul site-ului să se încarce cât mai repede posibil, astfel încât utilizatorii să poată decide dacă îl folosesc în continuare sau nu.

Aceasta poate fi o judecată superficială, dar oamenii judecă site-urile după viteza lor de încărcare, acest lucru se întâmplă des și ar trebui să luăm această stare de fapt de bună.

Atunci când vă optimizați site-ul web, trebuie să acordați o atenție deosebită vitezei de încărcare. Din fericire, există multe opțiuni disponibile în WordPress și alte motoare. pluginuri bune care ne ajută cu asta. Cu toate acestea, acest articol va ține cont de faptul că site-ul dvs. poate fi pe o altă platformă decât WordPress, așa că vom acoperi câteva moduri eficiente optimizarea site-ului, indiferent de locul în care se află. Înainte de a începe să accelerezi site-ul, folosește serviciile din articolul despre blogul tău pentru a măsura rezultatele înainte și după optimizare.

Accelerarea unui site web folosind optimizarea imaginii

Optimizarea dimensiunii imaginii poate fi o sarcină dificilă și există multe opțiuni dintre care să alegeți. Acestea ar putea include formate de fișiere, diverse instrumente de optimizare a imaginii, cele mai bune practici pentru cod și CSS care vă vor ajuta să salvați și să interacționați cu imaginile în cel mai bun mod posibil.

Să ne uităm la un exemplu pentru a arăta de ce acest lucru este atât de important. ÎN În ultima vreme Dezvoltatorii iOS și creatorii de aplicații au descoperit că afișarea unui desen finalizat pe ecranele Retina necesită de 2-4 ori mai mult timp și spațiu pe spatiu pe disc telefon mobil decât a fost în versiunile anterioare atunci când pur și simplu descărcați și rulați aplicația.

Acest lucru nu este la fel de relevant pentru dezvoltatorii și designerii web, dar arată cât de importantă este afișarea imaginilor pe mai multe platforme. Mai jos sunt câteva dintre ceea ce cred că sunt cele mai importante îndrumări de luat în considerare atunci când optimizați imaginile pentru web.

Formate de imagine

Formatarea imaginii este cel mai important subiect și este așa pentru că toată lumea știe asta diverse formate afectează viteza de încărcare a imaginii. Cu toate acestea, există o opinie stabilită în această privință, pe care o putem folosi ca standard de facto. JPEG este pentru fotografii, GIF este pentru imagini plate care conțin un număr mic de culori, iar PNG este pentru orice altceva. Majoritatea designerilor și dezvoltatorilor web pe care îi cunosc folosesc PNG pentru aproape orice, cu excepția butoanelor cu o culoare și două culori, unde folosesc GIF.

Acum vă puteți juca cu specificațiile date, dar rețineți întotdeauna că există standarde atunci când păstrați imagini mici, ușoare și mari, grele. Dacă rulați un site de fotografie și încărcarea imaginilor dvs. durează mai mult decât alte site-uri web, atunci încercați metodele de mai jos.

Cod imagine

Cel mai rău lucru pe care îl putem face care va avea un impact negativ asupra vitezei de încărcare a imaginii este să permitem codului să seteze automat dimensiunile imaginii. Ei bine, ai putea spune: „Să lăsăm codul să facă ___ pentru noi.” În acest caz, ei spun de obicei: „Dacă o poți face mai bine, fă-o singur”, iar acest lucru este cu adevărat corect. Folosind indicatori precum width=’60px’ height=’50px’, puteți reduce cu adevărat sarcina pe server și timpul necesar pentru încărcarea imaginii, deoarece serverul citește informații despre pagină și vede sarcinile care i-au fost atribuite. Prin urmare, asigurați-vă că sunteți pe drumul cel bun și faceți acest lucru cu toate imaginile dvs.

Instrumente de optimizare a imaginii

Instrumentele sunt întotdeauna utile. Bine, de cele mai multe ori... Uneori le stau în cale și sunt o distragere a atenției, dar în acest caz vor fi de fapt foarte utile. Dacă se întâmplă să găsiți un instrument grozav de optimizare a imaginii, în primul rând, vă rugăm să scrieți despre el în comentarii, deoarece întotdeauna căutăm cel mai bun. Următoarele instrumente sunt preferatele mele. Îmi place ImageOptim pentru Mac și Riot pentru Windows. Sunt foarte diferiți unul de celălalt, dar îndeplinesc aceeași sarcină.

Puteți pune o imagine în ele, iar ei vor găsi o modalitate de a o optimiza și apoi returnează rezultatul final pentru a fi salvat în același format în care a fost încărcat. Instrumentele sunt într-adevăr foarte bune și își fac treaba bine. În plus, au o funcție de analiză a imaginii care va indica ce format va fi cel mai potrivit pentru acesta. Se poate spune cu ușurință că acesta este unul dintre cele mai multe instrumentele necesare, cu excepția textului și editor grafic, desigur.

Accelerează încărcarea site-ului prin optimizarea CSS și JavaScript

CSS și JavaScript sunt limbaje importante atunci când vine vorba de design web și mai ales atunci când se creează conținut dinamic. Cred că oamenii uită adesea că își pot optimiza conținutul dinamic și, de asemenea, nu își îmbunătățesc JavaScript și CSS. Desigur, acestea nu sunt cele mai necesare pentru site-urile mici, dar pentru cele mari sunt cu adevărat importante, mai ales pentru cele care se bazează pe multe decizii de design. Să ne uităm la câteva „Reguli pentru JavaScript și CSS” care sunt destul de bine standardizate la crearea aplicațiilor web.

Prima regulă pentru CSS și JavaScript

• Dacă o poți face în CSS, atunci fă-o în CSS

Uităm adesea că avem un instrument atât de minunat și aș spune că sistemul CSS este cel mai minunat lucru pe care îl are un web designer. Aș adăuga, de asemenea, că designerii sunt prea rapizi să transfere munca în Photoshop (dar aceasta este treaba lor și nu îi vom învinovăți pentru asta). Când proiectați, trebuie să luați în considerare faptul că, pe lângă editorul grafic, browserul vă poate ajuta puțin și dacă utilizați CSS3. Profită din plin! Având un instrument în care machetele pot fi realizate foarte rapid, nu mai trebuie să utilizați HTML pentru a le compune. Sunt sigur că poți implementa totul folosind CSS!

A doua regulă pentru CSS și JavaScript

• Reduceți, reduceți, reduceți!

Minimizarea codului este poate una dintre cele mai simple și mai bune modalități de a crește viteza de încărcare a site-ului. Vă rugăm să rețineți că vorbim de milisecunde, dar au și un efect pozitiv, mai ales atunci când folosiți, de exemplu, biblioteca jQuery. Rețineți că instalând un plugin JavaScript/CSS și setând setările pentru a descărca o versiune redusă a codului site-ului (nu este nevoie să o editați), veți îmbunătăți viteza de încărcare a site-ului, așa că faceți-o! Instrumentele mele preferate sunt Code Minifier pentru Mac, Minify pentru Windows și JSCompress/CSSCompressor pentru cei care doresc o experiență mixtă între browsere. micsorare fericita!

A treia regulă pentru CSS și JavaScript

• Spune în linie „nu-nu”

Este o practică proastă să folosiți in-line în CSS sau JavaScript, mai ales când vine vorba de CSS. Problema aici nu este doar că aceasta este o metodă învechită, ci și că dacă lăsați CSS-ul în codul HTML (în special în linie), acesta va citi așa: HTML/CSS/HTML/CSS/HTML/CSS/ HTML /CSS, nu doar HTML => CSS. Știți că acest lucru este foarte rău pentru timpii de încărcare a serverului și ar degrada majoritatea aplicațiilor web care au folosit această abordare pentru fișierele individuale. Acest lucru, desigur, nu va dezactiva site-ul dvs., dar poate duce la necesitatea apelării unui specialist care va afla unde este eroarea - și acest lucru este deja important. Prin urmare, fii întotdeauna cel care poate rezolva problemele, nu cel care le creează.

A patra regulă pentru CSS și JavaScript

• Deplasați-vă în jos

Dacă trebuie să inserați JavaScript într-o pagină realizată în HTML și nu există nicio modalitate de a o evita, atunci plasați-l în partea de jos a documentului HTML. Acest lucru va ajuta la reducerea timpului de încărcare a site-ului, deoarece toate funcțiile și procesele încorporate în JavaScript vor fi executate după ce pagina s-a încărcat. Acest lucru va reduce, de asemenea, probabilitatea ca o eroare să afecteze funcționarea întregului sistem. Prin urmare, este mai bine să vă asigurați că site-ul dvs. va funcționa corect și să preveniți evenimentele nedorite care pot deteriora chiar și browserele.

A cincea regulă pentru CSS și JavaScript

• Optimizare DOM

Faceți DOM-ul mai mic dacă este posibil. De exemplu, folosiți adesea jQuery, care creează o mulțime de elemente DOM sau citește totul prin DOM - toate acestea încetinind semnificativ site-ul dvs. Există un proverb care îmi place și care poate fi folosit în acest caz: „Dacă o faci pentru că este singura cale corectă, atunci există modalități mai bune.” Ai putea spune, de asemenea, „Dacă faci asta pentru că este singurul mod corect pe care îl cunoști, atunci o faci greșit”, dar acea versiune este puțin dură.
Caută și vei găsi ceea ce cauți. Dacă lucrați cu elemente div în HTML doar pentru că sunt necesare pentru unele sarcini mici, și știți doar acest lucru singura cale de lucru, atunci s-ar putea să nu fie cea mai bună cale. Acum, desigur, înțeleg că utilizarea etichete div necesare pentru CSS, dar puteți găsi și alte modalități de a le folosi în afară de stil.

Recent am ajuns la asta, deoarece lucram la un proiect în Ruby on Rails. Puțin mai devreme de săptămâna aceasta, am făcut ceva ce îmi doream să fac de mult timp - am tradus aproximativ 5 elemente div unu-la-unu în HAML (am mutat un folder într-un folder și apoi din nou într-un folder). Am făcut asta doar pentru că nu știam cel mai bun mod, și ca urmare am ajuns cu un fel de prostii pe care a trebuit să le refac. Această muncă s-a dovedit a fi mult mai dificilă, dar am învățat o mulțime de lucruri utile din ea, m-a forțat să învăț Metoda noua abordarea unor probleme similare în viitor. Treceți mai departe și obțineți noi cunoștințe! Adevărul este foarte aproape.

Lucrări de bază pentru a crește viteza de încărcare a site-ului

Acesta este un subiect atât de larg de conversație încât pur și simplu nu se încadrează în domeniul de aplicare al acestui articol, cu toate acestea, cred că merită o atenție specială. De fapt, unele dintre următoarele lucruri importante pot fi folosite pentru a vă accelera site-ul sau aplicația web.

• Bare în linkuri

Acest lucru este extrem de important. Când un utilizator deschide un link fără bare oblice pe un server la distanță de pe site, trebuie să afle ce tip de adresa specificată va fi un fișier sau o pagină. Serverul va fi forțat să adauge singur bare oblice, iar acest lucru va dura milisecunde și toate vor fi rezumate. Mă întâlnesc adesea cu webmasteri care nu se gândesc la asta, iar codul lor neoptimizat nu are nicio încărcare, dar până la urmă tot contează. Dacă economisești sferturi timp de zece ani, vei ajunge cu mulți bani, la fel este și aici, doar într-o măsură mai mică sau mai mare, în cele din urmă vei întâmpina probleme cu traficul site-ului tău.

• Favicons

Browserele caută întotdeauna fișiere favicon.ico în directorul rădăcină al serverului dvs., astfel încât să puteți continua în siguranță și să adăugați un favicon. Chiar dacă ai făcut ceva temporar, . Dacă nu există favicon, browserul generează o eroare pentru el însuși și memorează o astfel de eroare doar în secțiunea sa favicon.ico, ceea ce crește timpul de încărcare.

Acest subiect este foarte larg și, din păcate, nu sunt implicat în el. bun expert. Cu toate acestea, scopul stocării în cache este destul de simplu. Stochează fișiere (de obicei cod HTML/CSS) de pe site-urile pe care computerul dvs. le vizitează frecvent, astfel încât să nu fie nevoit să le descarce de fiecare dată.

Această tehnologie este într-adevăr foarte utilă și a fost adoptată pe scară largă de majoritatea aplicațiilor web în ultimii câțiva ani. Există multe soluții de stocare în cache, dar probabil cea mai comună este Memcached. Sarcina sa este de a salva fișiere din aplicațiile web deschise pe computer în browser. De exemplu, dacă ai profiluri diferite, salvează poza de profil pe computer, iar în următoarea fază apar toate deliciile Memcached. Datele dvs. codificate pot fi vizualizate (trăgându-le și bazele de date) pe serverul Memcached și verificând versiunea stocată în cache a fișierelor. Și dacă acest fișier nu este acolo, atunci îl puteți introduce în baza de date, astfel încât mai târziu să ajungă în cache. Acesta este un exemplu excelent de stocare în cache a unor cantități mari de informații și, în ultimii doi ani, a permis sutelor de companii să își îmbunătățească performanța serverelor și bazelor de date.

Să rezumam rezultatele preliminare. Acestea nu sunt toate modalitățile de a îmbunătăți viteza de încărcare a site-ului dvs., dar sunt un loc bun pentru a începe să căutați mai departe și să vă îmbunătățiți experiența.