Un ghid cuprinzător pentru remedierea problemelor de performanță pe site-urile lente

Dacă vă abonați la un serviciu dintr-un link de pe această pagină, Reeves and Sons Limited poate câștiga un comision. Vezi noastre declarație de etică.

Dacă site-ul dvs. se mișcă ca unul dintre acei leneși din DMV în Zootopia, există modalități prin care puteți remedia orice ar fi încetinirea acestuia. A afla ce cauzează problema este jumătate din luptă, așa că, odată ce ați izolat cauzele, veți avea cel puțin răspunsurile la rezolvarea problemei.

Gazduirea de calitate scăzută este cel mai probabil vinovat

Când vine vorba de găzduire web, conceptul de calitate scăzută nu înseamnă întotdeauna același lucru ca și în alte contexte. De exemplu, prețul pe care îl plătiți pentru găzduire nu este întotdeauna o reflectare exactă a calității la care vă puteți aștepta. Nu este popularitatea serviciului și nici cât de bine cunoscut este numele mărcii.

De fapt, unele dintre cele mai populare mărci de găzduire sunt cele mai rele alegeri, pur și simplu pentru că prea mulți oameni le folosesc. Depinde puțin de calitatea infrastructurii lor. Dacă investesc corect în tehnologia lor, atunci este posibil să nu aveți probleme semnificative de performanță. Pe de altă parte, este posibil să partajați un singur server cu sute de alte site-uri, iar această problemă va crește pe măsură ce capacitatea de stocare pe disc continuă să crească.

Deci, în această situație, este posibil ca trecerea la un serviciu de găzduire web mai mic, mai puțin cunoscut, cu tehnologie bună, să fie o alegere mai bună. A face acest lucru poate însemna, de asemenea, că veți obține un serviciu mai personalizat pentru clienți, la un nivel de calitate mai înalt decât ați obține de la un monstru. Merită să vă gândiți și este ușor de testat, cumpărând doar un abonament de o lună pe noua gazdă și comparând performanța cu site-ul dvs. existent.

Folosiți tasta F12

Majoritatea browserelor web sunt reglate pentru a avea acces la consola de depanare prin intermediul tastei F12, iar al tău nu este probabil o excepție. Și vorbind despre excepții, cam asta căutați sau, mai exact, erorile din codul dvs. JavaScript care generează excepții și afectează performanța.

Veți găsi aceste erori atât în ​​propriul cod, cât și în bibliotecile de coduri importate, cum ar fi jQuery. Doar pentru că jQuery este mare și popular nu înseamnă că este impecabil. Iată un exemplu de tipul de lucru pe care îl căutați:

Erorile semnalizate în albastru sunt doar erori CSS și, în general, vă puteți aștepta să le vedeți din cauza cantității de shimming pe care dezvoltatorii trebuie să o facă atunci când construiți foi de stil, pur și simplu pentru că încă nu există un singur standard care a fost adoptat în toate browserele. În mod normal, acestea nu ar trebui să afecteze performanța decât dacă folosiți o mulțime de animații sau efecte de tranziție.

Dar acea eroare marcată în portocaliu este o eroare JavaScript, și nu numai asta, în acest caz este jackpot-ul, deoarece ne spune în mod specific că această eroare specială va face ca codul să ruleze foarte lent.

Obțineți sfaturi gratuite de la Google

Știați că Google vă poate analiza pagina web gratuit și vă poate oferi sfaturi despre cum să remediați orice problemă? Tot ce trebuie să faceți este să accesați pagina Google Speed ​​Speed ​​Insights și să introduceți adresa URL a paginii pe care doriți să o analizați.

Într-adevăr nu ar putea fi mai ușor, deși este posibil să nu doriți neapărat să urmați toate sfaturile lor religios. Sistemul Google este bun în a afla ce ar putea încetini pagina dvs., dar este posibil ca unele remedieri să nu rezolve atâtea probleme pe cât le creează.

În mod ideal, doriți să vedeți scoruri peste 85. Deși nimeni nu știe cu siguranță, se crede că timpii de încărcare a paginilor au o influență semnificativă asupra rangului dvs. de pagini în Google. Nu disperați dacă site-ul dvs. nu este chiar acolo sus, în partea de sus a zonei verzi, deoarece multe site-uri importante nu obțin scoruri fantastice.

Câteva exemple notabile includ:

  • http://bbc.com (70m/77d)
  • http://cnn.com (47m/65d)
  • http://whitehouse.gov (58m/56d)
  • http://microsoft.com (49m/71d)
  • http://apple.com (61m/72d)
  • http://linux.com (33m/44d)
  • http://ubuntu.com (69m/81d)
  • http://linuxmint.com (59m/67d)
  • http://youtube.com (53m/69d)
  • http://facebook.com (49m/81d)

Niciunul dintre aceste exemple nu este într-adevăr o scuză pentru a permite propriului site să funcționeze prost, dar demonstrează că un site lent nu este neapărat sinonim cu eșecul.

Folosiți corect imaginile

Daca ar sti cineva imaginea corecta formatE de folosit și când, ar trebui să fie designeri, nu? Dar, în mod uimitor, pare că mulți dintre voi nu știți, sau când o faceți, credeți că nu contează. Ei bine, iată vestea: contează, tot timpul.

Această problemă a crescut din moment ce un anumit stil șablon a fost adoptat ca standard defacto pentru site-urile de afaceri și este o tendință care nu prezintă semne de încetinire. În calitate de designer profesionist, vă datorați dvs. și clienților dvs. să nu cădeați în capcana comenzilor rapide de design leneș.

Una dintre aceste comenzi rapide nefericite a fost utilizarea de imagini PNG mari pentru unitățile de eroi din partea de sus a unei pagini (sau oriunde altundeva, dar acolo le veți găsi în mod normal). Acum, este de la sine înțeles că nu ar trebui să faceți acest lucru niciodată, chiar dacă aveți nevoie de secțiuni transparente în imagine.

Iată elementele fundamentale pe care ar trebui să le țineți cont atunci când creați acea capodoperă:

  • Utilizați imagini mari cu ușurință, dacă este deloc

Imaginile mari sunt o idee teribilă, deoarece cu cât este mai mare imaginea, cu atât durează mai mult să se încarce. Acum există câteva tehnici diferite pe care le puteți folosi pentru ca imaginile mari să funcționeze mult mai eficient, dar înainte de a intra în asta, să spunem doar că ar trebui să utilizați imagini mai mici de cele mai multe ori și să le salvați pe cele mari pentru când sunt chiar nevoie.

  • Setați valoarea PPI / DPI în mod corespunzător

În funcție de ce editor grafic utilizați, acesta poate afișa valori pentru DPI sau PPI. Acesta din urmă este mai bun, deoarece indică că editorul dvs. de grafică este conceput pentru utilizare pe web în loc de imprimare. Problema cu modificarea DPI în unele versiuni de PhotoShop este că acestea vor ajusta nu numai DPI, ci și dimensiunile fizice ale imaginii. Aceasta nu este o problemă în cea mai recentă versiune a PhotoShop (care folosește PPI), deci dacă utilizați o versiune mai veche, este timpul să faceți upgrade. Sau folosiți GIMP în schimb.

  • Decupați imagini mari

De aici începe magia. Veți găsi mulți oameni care vă spun că tăierea imaginilor nu îmbunătățește timpul de încărcare, deoarece descărcați în continuare același număr de octeți și orice îmbunătățire percepută este doar psihologică. Acei oameni folosesc cea mai leneșă versiune de feliere a imaginilor, așa că nu cunosc adevăratele posibilități.

După ce vă tăiați imaginea, aveți șansa de a o optimiza. Presupunând că imaginea originală a fost în PNG format, acum puteți converti orice porțiuni netransparente în JPG format, și salvați o mulțime de octeți, lăsând porțiunile care necesită transparență ca imagini PNG.

Apoi, puteți juca cu nivelul de compresie al fiecărui indivifelie dublă până când felia respectivă este perfect optimizată. Efectul general al acestei optimizări poate duce la economii mai mari de 50% în comparație cu imaginea originală neoptimizată.

Videoclipul poate fi optimizat și

Arta compresiei video se bazează pe două lucruri: țintă format și codecul pe care îl utilizați pentru codificare. Care format selectați depinde în totalitate de nevoile dvs. În general, dacă aveți nevoie de calitate înaltă, MP4 cu codificare H.264 va oferi cea mai bună calitate la compresie ridicată, dar când nu aveți nevoie de acea calitate înaltă, WebM și FLV oferă fișiere de dimensiuni mai mici. Software-ul dvs. de editare video poate oferi în continuare FLV ca opțiune, dar nu este recomandat să utilizați acest lucru format.

Dacă aveți nevoie de calitate DVD, MP4 cu codificare H.264 va da rezultate excelente, dar costă să fie o descărcare foarte mare. Pentru streaming video, WebM oferă o compresie mult mai bună. Problema este că nu toate sistemele de operare mobile acceptă încă WebM (ar trebui, dar par să aibă un motiv nebunesc să nu o facă, urmând, eventual, regula de aur a dezvoltatorului de telefonie mobilă: vei deranja și confunda clientul cât de mult poți).

Ar trebui să utilizați codecul MPEG-4 în loc de H.264 cu videoclipuri MP4? În general nu, deoarece are ca rezultat dimensiuni mai mari de fișiere la același nivel de calitate. Dar dacă videoclipul dvs. va avea dimensiuni fizice mici și doriți o transmisie perfectă a videoclipului pentru streaming, MPEG-4 este un codec bun, deoarece are corecție de eroare încorporată pentru a asigura integritatea datelor.

Dar WMV? Ei bine, acesta este un caz special. Oferă practic aceeași calitate video ca MP4, dar cu o compresie chiar mai bună. Dezavantajul este că utilizatorii de Mac și iOS pot vizualiza videoclipul dvs. numai dacă utilizează un convertor video payware, ceea ce introduce o întârziere în redare, ceea ce este exact ceea ce am încercat să evităm în optimizarea paginii noastre.

Fișierele WMV nu au probleme pentru utilizatorii de Android, Windows sau Linux. Dar cu 12.5% din comunitatea de internet care utilizează dispozitive Apple, va trebui să decideți dacă merită să le deranjați. Personal, nu v-aș recomanda să faceți asta doar pentru a obține un timp de încărcare mai rapid.

Și, în sfârșit, pentru că este un videoclip pe internet, dacă nu permiteți redarea pe ecran complet sau în mod teatru, micșorați dimensiunea fizică a videoclipului până la dimensiunea pe care o veți afișa pe pagina dvs. și vedeți câte octeți puteți salva .

Bogdan Rancea

Bogdan este membru fondator al Inspired Mag, acumulând aproape 6 ani de experiență în această perioadă. În timpul liber îi place să studieze muzică clasică și să exploreze artele vizuale. Este destul de obsedat și de fixe. El deține deja 5.

Comentarii Răspunsuri 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Evaluare *

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.