50% din traficul pe Internet se situează deja pe cota dispozitivelor mobile, iar utilizatorii se așteaptă ca paginile site-ului să fie încărcate aproape instantaneu. Prin urmare, în acest articol, vom examina modul de verificare a vitezei de încărcare a paginii cu ajutorul instrumentului gratuit Google PageSpeed Insights pentru a obține 100/100 de puncte atât pentru versiunile mobile, cât și pentru cele desktop ale site-ului.
Cum de a crește viteza de încărcare a paginilor
Înainte de a merge direct la sfaturi, merită menționat faptul că instrumentul PageSpeed Google oferă numai recomandări, după care puteți obține o performanță mai mare a site-ului. Rezultatul final depinde în primul rând de infrastructura serverului, de resursele și setările selectate.
Pentru a aplica câteva sfaturi, aveți nevoie de cunoștințe tehnice profunde, pentru alții - o înțelegere destul de generală a principiilor site-ului. Toate recomandările sunt potrivite pentru utilizarea în orice sistem CMS.
Pasul 1: optimizarea imaginilor
Instrumentul PageSpeed Insights va verifica imaginile de pe site-ul dvs. și dacă viteza de descărcare nu este suficient de ridicată, Google le va oferi posibilitatea de optimizare. Puteți mări viteza de încărcare a imaginilor reducând greutatea și dimensiunea acestora. Pentru a rezolva această problemă este suficient să efectuați doi pași:
- Mai întâi, comprimați toate imaginile cu instrumente cum ar fi Compressor.io sau TinyPNG. Ambele instrumente sunt gratuite, dar extrem de eficiente. În unele cazuri, ele comprimă imaginile cu 80% fără pierderi de calitate.
- Reduceți dimensiunea imaginilor la cea mai mică posibilitate. Să presupunem că doriți ca dimensiunea imaginii afișate pe site să fie de 150x150px. În acest caz, dimensiunea reală a imaginii stocate pe serverul dvs. nu trebuie să depășească dimensiunea imaginii afișate, adică ar trebui să fie și 150x150px. Nu personalizați dimensiunea imaginii utilizând codul CSS sau HTML.
Puteți să descărcați toate imaginile, să le comprimați și să le redimensionați. Este o idee bună să optimizați fiecare imagine nouă înainte de a o adăuga la site. Adică toate imaginile trebuie să fie de dimensiunea corectă și să fie comprimate fără pierderi de calitate.
Google va oferi imediat descărcarea de imagini optimizate pe site.
De exemplu, codul din documentul de mai jos,
poate fi redus la:
Pentru a rezolva rapid această problemă, puteți instala pe server un instrument numit Gulpjs. Pe baza fișierului dvs., acesta creează automat un nou fișier CSS, în care sunt șterse toate spațiile inutile. De fapt, acest instrument poate ajuta la reducerea dimensiunii fișierului la jumătate. Mai multe informații despre modul de eliminare a elementelor de cod redundante pot fi găsite în manualul Google oficial.
Iar pentru site-urile Wordpress este recomandat să instalați pluginul Autoptimize.
Pasul 3: Utilizați memoria cache a browserului
Pentru multe site-uri, punctul despre utilizarea cache-ului browser-ului este un test real. Pentru a rezolva această problemă, puteți utiliza rețeaua CDN.
Să presupunem că serverul principal al site-ului este situat în Texas, în cazul în care nu utilizați un CDN, utilizatorul care se află în Amsterdam, va trebui să aștepte până când serverul dvs. american va încărca conținutul pentru ea, și poate dura o lungă perioadă de timp. În același timp, utilizarea CDN vă permite să descărcați un site dintr-un punct situat la utilizator cât mai aproape posibil. Și în acest caz, cât mai aproape de Amsterdam.
Ca urmare, site-ul se încarcă mult mai repede.
Această problemă poate fi rezolvată prin înlocuirea contoarelor cu imagini pe care le puteți stoca în condiții de siguranță cu ajutorul CDN. În loc să plasați scripturi ale unor terțe părți care primesc informații despre numărul de abonați din Twitter, Facebook, Google Plus și alte rețele sociale, puteți să vă păstrați singuri aceste date, reducând astfel viteza încărcării paginilor.
Dacă site-ul dvs. este integrat cu Google Analytics și nu doriți să renunțați la integrare, atunci rezolvarea problemei poate necesita eforturi suplimentare.
Dacă scriptul detectează modificările, noua versiune este descărcată automat și stocată în rețeaua dvs. CDN.
Aceeași operațiune se va repeta de fiecare dată când codul este actualizat. Noua versiune este descărcată și salvată în CDN. Același script poate fi folosit pentru alte resurse ale unor terțe părți.
Pasul # 5: Activați compresia
Puteți activa compresia direct în setările serverului. Dacă nu știți cum să faceți acest lucru, contactați administratorul de sistem și solicitați să activați compresia GZIP pe server.
Pasul # 6: optimizați site-ul pentru dispozitivele mobile
Cum utilizatorii de dispozitive mobile confortabil de a lucra cu site-ul dvs. depinde de mai mulți factori, în primul rând de faptul dacă designul site-ului pentru dispozitive mobile este optimizat, așa cum apare de la utilizator, cât de bine fundalul ales, este gândit site-ul convenabil de navigare și așa pe.
concluzie
Articolul descrie numai pașii cei mai importanți care pot fi întreprinși pentru a optimiza viteza site-ului. Rețineți că nu trebuie doar să vă concentrați asupra optimizării numai a paginii principale, dar trebuie să acordați atenție și paginilor interne.
Mai jos sunt enumerate pe scurt trei etape principale care vor ajuta la obținerea unei performanțe sporite a site-ului:
V-ați stabilit sarcina optimizării vitezei site-ului? Dacă da, ce măsuri ați luat?
Acum, la designeri. aceleași soluții Ukoz și WIX au două avantaje: în primul rând, acestea sunt propriile servere și găzduire, ceea ce face mult mai ușor pentru orice utilizator să-și lanseze proiectul. În al doilea rând, aceasta este o apărare completă împotriva atacurilor DDos, care este, de asemenea, un avantaj tangibil.
Din cauza faptului că designerii se vor prăbuși. controversată opinie; același WIX are modele remarcabile, care în Rusia să facă și nu au învățat de fapt, să fiu cinstit. În plus, site-urile de designeri sunt bine avansate, dacă știți cum să faceți acest lucru. Ele sunt de asemenea bine clasate de motoarele de căutare, iar sistemul Ajax este unul dintre cele mai recente pe care Google le-a recunoscut în SUA la conferința dezvoltatorilor IT. Nu pentru nimic că același Yandex a început să coopereze cu WIX, Ukoz și alții. Dacă ar fi fost o utopie, atunci sensul.
Acum, despre optimizare, nu doar codul, ci și conținutul. Uneori folosiți nu trei fonturi, ci toate cele șapte, ceea ce face și site-ul mai greu. În plus față de toate acestea, trebuie să înțelegeți în continuare ce este site-ul. Atrageți calea rapidă către clienți sau le informați și spuneți despre ei înșiși. Dacă doriți ca site-ul să fie optim, rămâneți la 4-5 secunde de descărcare, acesta este momentul în care utilizatorul așteaptă de obicei descărcarea. Și nu pierdeți un punct important, viteza fiecărui utilizator pe Internet este diferită și depinde mult de modul în care nu veți îmbunătăți descărcarea și viteza site-urilor dvs. Dacă internetul funcționează lent, atunci site-ul dvs. va fi încărcat ca o broască țestoasă la toate eforturile))
Apropo, sistemul Ajax, utilizat în mod egal cu HTML 5 pe WIX, este sistemul de descărcare a întregului site simultan, și nu în partea de sus a paginii. Acesta este avantajul. ))