Pași simpli pentru a accelera site-ul dvs. cu imagini grele

Proprietarul site-ului poate dori în cele din urmă să-și mărească viteza de descărcare. Acest lucru mărește clasarea rezultatelor căutării; în plus, este mai plăcut pentru vizitatorii site-ului să lucreze cu el, obținând un răspuns mai rapid la acțiunile lor.

În căutarea unei soluții rapide și directe, proprietarii de site-uri instalează un număr mare de plug-in-uri, care la rândul lor consumă resurse și nu fac decât să-i încetinească activitatea. Nu avem nimic împotriva pluginurilor de optimizare, dar acestea trebuie folosite până la obiect și cu cunoaștere a principiilor muncii lor.

În plus, proprietarii de site-uri care nu au experimentat niciodată administrarea au adesea o înțelegere greșită a optimizării. În înțelegerea lor, optimizarea este accelerarea scriptului cu orice preț. Sarcina de optimizare este de a produce viteza optimă a site-ului la prețul optim al resurselor. Prin urmare, nu pot exista instrucțiuni universale pentru toate site-urile.

A face site-ul dvs. rapid este o sarcină urgentă pentru orice proprietar de resurse sau webmaster. La urma urmei, viteza de încărcare a paginii este unul dintre cei mai critici factori pentru succesul unei resurse web, alături de conținut de înaltă calitate și design grafic frumos.

Încărcarea lentă crește probabilitatea de a pierde utilizatori uneori. Mai ales când vizitatorii vin de pe dispozitive mobile. Recomandările simple pentru a accelera încărcarea site-ului, pe care chiar și un utilizator fără experiență le poate implementa în practică, vor ajuta la minimizarea probabilității de pierdere a traficului.

1. Optimizați codul HTML și fișierele CSS, JS

Optimizarea descărcărilor este imposibilă fără grija pentru „curățenia” codului transmis browserului utilizatorului la intrarea pe site. Un număr mare de caractere din codul sursă afectează semnificativ viteza de încărcare, astfel încât concizia sa este un factor critic de succes.

Cum să minimizezi codul pentru a accelera încărcarea site-ului

Eliminați caracterele inutile, elementele de marcare și etichetele de cod sursă. Automatizarea procesului va ajuta la adăugarea unei mici inserții la începutul și la sfârșitul codului HTML al site-ului.

Această metodă de stocare a conținutului HTML este destul de utilă, dar poate crea o încărcare suplimentară asupra memoriei cu acces aleatoriu.

Grupați același tip de fișiere CSS și fișiere JS. Aplicațiile PHP gratuite precum JCH Optimize, Cloudflare sau Minify, care sunt copiate într-un director separat și trec prin toate fișierele site-ului, vor ajuta la combinarea elementelor.

2. Eliminați solicitările HTTP suplimentare

Încărcarea elementelor paginii (javascript, imagini, CSS și fișiere flash) ocupă partea leului din resursele de sistem atunci când încărcați un site. Solicitările HTTP pentru astfel de elemente încetinesc vizibil site-ul.

Pentru a evita solicitările „în plus”, trebuie să reduceți numărul de componente ale paginii. Acest lucru va presupune o scădere proporțională a apelurilor pe server și va grăbi încărcarea site-ului.

Acest lucru se poate face în mai multe moduri:

• Combinați mai multe imagini într-un singur fișier grafic (sprite CSS);
• Utilizați imagini inline (inline-pictures) în foaia de stil a paginii;
• Mai multe fișiere CSS sau scripturi pe o singură pagină se îmbină într-un singur fișier;
• Minimizați numărul de scenarii și pluginuri.

3. Aranjați JavaScript și CSS în ordinea corectă

Este recomandat să plasați fișierele CSS în partea de sus a codului paginii și JavaScript în partea de jos. După această optimizare, mai întâi va fi încărcat conținutul static și apoi numai grafica dinamică.

Elementele flash sau animațiile care necesită mai multe resurse pentru descărcare nu vor „trage” înainte și nu vor strica impresia site-ului din primele secunde. Acest lucru va asigura o descărcare fără probleme a conținutului și va crește atractivitatea estetică a resursei.

4. Reduceți numărul de scripturi externe

Scripturile externe sunt bucăți de cod (texte) care sunt accesate printr-un link extern. Linkurile creează solicitări suplimentare către multe servere diferite, ceea ce în cele din urmă încetinește site-ul. Pentru a evita acest lucru, este recomandat să folosiți în principal scripturi locale încorporate în structura codului sursă al paginii.

Desigur, concentrarea asupra scripturilor locale va crea anumite limitări în aspectul și funcționalitatea site-ului. Dar avantajul rezultat al vitezei de descărcare merită aceste „sacrificii”.

5. Activați Flush

Această funcționalitate PHP vă permite să nu așteptați până când serverul utilizatorului încarcă informații din resursă, ci să le scoateți în părți. În timp ce datele sunt transmise către browser, fereastra deschisă nu va rămâne goală, ci va fi umplută fără probleme cu elemente încărcate ale site-ului. O astfel de accelerare este necesară în special pentru resursele web cu o interfață complexă și trafic ridicat.

Este mai bine să plasați funcția de flush la începutul codului sursă a paginii, imediat după cap. Din antet, conținutul HTML se va deschide mai repede și puteți activa și încărcarea paralelă a elementelor CSS și JavaScript.

6. Memorați paginile în cache

Memorarea în cache salvează unele informații din paginile site-ului (flash, grafică, JavaScript și CSS) în browserul utilizatorului. La următoarea rulare, aceste fișiere sunt descărcate instantaneu din browser, oferind site-ului o viteză suplimentară.

Puteți activa stocarea în cache adăugând un antet de expirare la codul HTML. Site-urile WordPress sunt ușor de memorat în cache folosind instalarea de pluginuri cu funcționalități gratuite sau parțial gratuite, cum ar fi W3 Total Cache, Cache Enabler sau Zen Cach.

Pentru site-urile noi, este mai bine să utilizați memoria cache numai după pregătirea completă pentru lansare. Dacă activați funcția în timpul dezvoltării, este posibil ca alte modificări să nu fie afișate corect pe site.

7. Utilizați un CDN

Content Delivery Network – un lanț de servere împrăștiate în centre de date din întreaga lume pentru a crește viteza cu care conținutul este transferat vizitatorilor. Cu cât vizitatorul este mai aproape geografic de serverele CDN, cu atât mai rapid sunt transmise pachetele de date de pe site.

Utilizarea CDN-ului este deosebit de importantă pentru portaluri de conținut și cu încărcare mare, a căror audiență principală este foarte departe de serverele fizice. Acest serviciu minimizează timpul de așteptare pentru descărcări de pe site-uri de peste mări, contribuind la creșterea clasamentului acestora în rezultatele căutării locale. La urma urmei, conținutul este descărcat de pe serverul de stocare cel mai apropiat de utilizator din țara sa.

8. Optimizați grafica și video

Trebuie să selectați formatul corect de grafică și video, deoarece formatul de fișier afectează direct viteza cu care informațiile sunt prezentate vizitatorilor.

Formate recomandate pentru diferite conținuturi web:

• SVG – pentru logo-uri vectoriale și elemente de interfață simplă;
• PNG – pentru scheme și logo-uri non-vectorale;
• JPG – pentru fotografii și imagini;
• MPEG4 – pentru video și animație.

De asemenea, pentru video și animație, este disponibil un format WEBM relativ nou. În cele mai multe cazuri, oferă o dimensiune video mai mică, cu aceeași calitate. Cu toate acestea, formularul are suport limitat pentru browser (de exemplu, nu există suport în browserul macOS / iOS Safari). Prin urmare, este recomandat să utilizați un fișier WEBM ca sursă video prioritară și să instalați MPEG4 ca sursă alternativă. De asemenea, puteți utiliza singurul MPEG4 dacă partajarea este inacceptabilă sau incomodă.

Separat, observăm că formatul vectorial (SVG) permite scalarea fără pierderea calității graficii.

Etape de optimizare a imaginii

Pasul 1 – Reducerea dimensiunii imaginii.

Multe CMS populare, cum ar fi WordPress sau Joomla, au plug-in-uri încorporate pentru a optimiza imaginile din original. Dar această metodă creează o încărcare suplimentară și poate încetini site-ul. De fiecare dată când pagina se încarcă, browserul accesează mai întâi codul sursă și abia apoi redimensionează imaginea din mers.

Pentru a evita pierderea vitezei la încărcarea imaginilor, editorii grafici încorporați în sistemul de operare, cum ar fi Preview (Mac) sau Microsoft Paint (Windows), precum și serviciile online cu funcționalități similare vă vor ajuta. Lucrul cu ei va necesita abilități minime în lucrul cu grafica.

Pasul 2 - Comprimați fișierul înainte de descărcare.

Chiar și după optimizarea dimensiunii imaginii, „greutatea” sa este de obicei departe de a fi optimă. Servicii comode și gratuite precum ImageResize sau TinyPNG ajută la reducerea dimensiunii fără pierderea calității imaginii. Majoritatea proceselor de aici sunt automatizate. Utilizatorul trebuie doar să încarce fișiere și să descarce deja comprimate la dimensiunea optimă a imaginii.

9. Aplicați compresia fișierului Gzip

Gzip este o metodă simplă de comprimare a fișierelor site-ului pentru a economisi resursele canalului și pentru a accelera încărcarea. Folosind Gzip, fișierele sunt comprimate într-o arhivă pe care browserul o poate descărca mai repede, apoi dezarhiva și afișa conținutul.

Activarea utilizării Gzip este destul de simplă – trebuie doar să adăugați câteva linii de cod în fișierul .htaccess. De exemplu, atunci când utilizați serverul web Apache, modulul mod_gzip este disponibil pentru webmasteri, pentru a activa Gzip, în acest caz trebuie să adăugați un astfel de cod la .htaccess

Comprimarea fișierului Gzip se face pentru a reduce numărul de solicitări către server de la un browser. Pe scurt, această tehnologie reduce greutatea inițială a fișierelor la 70% pentru a accelera descărcarea.

Mod de a încorpora compresia Gzip

Adăugați următorul fragment de cod în fișierul de configurare a serverului web „.htaccess”.

Pe serverul Apache

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

Pe serverul Nginx

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

10. Schimbați gazduirea

Cea mai simplă metodă de a accelera descărcările este schimbarea furnizorului de găzduire. Economiile la alocarea resurselor duce adesea la o deteriorare semnificativă a calității serviciilor, ceea ce subminează toate încercările de a accelera situl pe viță de vie.

Dacă manipulările cu conținut, cod și pluginuri nu dau rezultate, este timpul să ne gândim la alegerea unei „acasă” mai decentă pentru site. Pe o găzduire de calitate cu disponibilitate ridicată și suport tehnic atent, resursa de Internet va primi un impuls puternic pentru a crește viteza de lucru. Și acest lucru va fi apreciat de un public recunoscător.

Cel mai important lucru este…

Este necesar să depuneți eforturi pentru a accesa site-ul nu mai mult de 2-3 secunde. Nu contează dacă site-ul se deschide pentru 2 sau chiar 3 secunde, dar dacă există mai multe, și atunci acesta este un motiv pentru a vă gândi la accelerarea încărcării site-ului.

De asemenea, trebuie să înțelegeți că există doi parametri pentru viteza de încărcare a paginii.

Prima este viteza cu care este afișat conținutul (în acest moment pagina este deja deschisă și afișată utilizatorului, în timp ce indicatorul transparent de pagină este încă afișat până când toate fișierele statice și scripturile asincrone sunt conectate).

Mai mult, a doua este viteza de formare efectivă a paginii, când tot ce trebuia conectat era conectat. Trebuie să vă concentrați pe primul parametru, adică nu trebuie să treacă mai mult de trei secunde înainte ca aspectul site-ului să fie afișat.

Concluzie

Nu puteți ignora o astfel de cifră precum viteza de încărcare a site-ului. El a fost cel care, din primele secunde, creează un mediu confortabil pentru vizitatori. Cu cât utilizatorul primește mai repede conținutul dorit, cu atât este mai mare probabilitatea ca o imagine pozitivă a resursei să se formeze și să se construiască loialitatea față de aceasta.