Kā nebūt lēnam. 1.daļa: Pamatu pamati

Kā nebūt lēnam. 1.daļa: Pamatu pamati

Pie mums ļoti reti gadās sastapties ar to, ka mājaslapas lēni ielādētos, bet pirmais iespaids ir ļoti mānīgs, un iemesls tam ir ļoti ātrie interneta pieslēgumi Latvijā. Rezultātā, lai arī šķiet, ka mājaslapa ir ātra kā sporta auto, īstenībā tas ir kravas auto uz steroīdiem. Tomēr piekritīsiet, ka sporta auto ir krietni pievilcīgāks par kravinieku, tāpēc dalīšos pārdomās un vienkāršos padomos, kā taisīt ātras lapas.

Kas iespaido lapas ātrumu?

Pēc būtības mājas lapa ir vairāku dažādu failu (html, js, css, jpg, png, gif, utml) kopums.
Pirmā lieta, kas šos failus raksturo, ir izmērs.
Kā arī tiem failiem, kas satur kodu, ir arī izpildes laiks un manipulāciju apjoms, ko tie veic ar lapu.

Lai arī failu izmērs ir svarīgākais, tomēr, ja apskatāmies no tehniskās puses, kas īsti notiek, kad pārlūks mēģina ielādēt kādu failu, redzam, ka šim procesam ir vairāki posmi, kas ir saistīti ar savienojuma izveidi, kā arī gaidīšanas laiku.
Gaidīšanas laiks veidojas no tā, ka pārlūki ierobežo savienojumu skaitu (vairumā gadījumu tie ir 6 savienojumi no viena domeina). Vienkāršas matemātikas rezultātā iegūstam arī to, ka mazāks failu skaits ir labāks failu skaits.

Ja runājam par izpildes laiku, tad jāizdala 2 gadījumi:

Servera puse (backend)

Lielākoties visas mājaslapas atspoguļo dinamisku saturu un, lai to sagatavotu, tiek pieprasīta informācija no datubāzēm un veikta šīs informācijas apstrāde. Ātrums šim procesam ir atkarīgs no servera jaudas/noslodzes, informācijas daudzuma un koda kvalitātes.

Klienta puse (frontend)

Šajā gadījumā ātrumu ietekmē jebkas, kas notiek pēc lapas ielādes/pārlādes; lielākoties - javaskripts (JavaScript). Kustīgi elementi lapā, forma nosūtījās bez lapas pārlādes, galerijā parādījās lielāka bilde - tas viss ir javaskripts (dažreiz CSS). Tāpat kā servera pusē arī frontend tas, cik labi šīs fīčas strādās, ir atkarīgs no datora vai viedierīces jaudas, manipulāciju apmēra un, protams, koda kvalitātes.

Ar ko pārbaudīt?

Pirmais un vienkāršākai veids, kā pārbaudīt, vai lapas ātrumam ir kādas problēmas, ir Google PageSpeed. Protams, šis rīks ne tuvu neparādīs visas iespējamās problēmas, tomēr ļaus gūt aptuvenu ieskatu tajā, cik ātra vai lēna ir lapa. Lai identificētu konkrētas problēmas, kas padara lapas lēnas, ir jāver vaļā pārlūkos iebūvētie izstrādes rīki un jāsāk skatīties potenciālās problēmas.

Kā nebūt lēnam 1: Bildes

Lai bildes vienmēr būtu pēc iespējas vieglākas (jā, vieglākas bildes ir labākas bildes), pirmā lieta, kas jāievēro, ir pareizais formāts.
Bilžu formātu varianti:

  • Kustīgas -> gif
  • Caurspīdīgs fons -> png
  • Pārējie gadījumi -> jpg

Tālāk vajadzētu ievērot to, lai bildes nav lielākā izšķirtspēja nekā nepieciešams. Attiecīgi nemēģināt likt, piemēram, 3000x2000px bildes mobilajā lapā, izņemot gadījumus, kad tas tiešām ir nepieciešams un tas tiek darīts ar mērķi.
Protams, jāievēro arī tas, ka katrai ierīcei vajadzētu rādīt piemērotu bildes versiju.

Lai arī tas nav plaši zināms fakts, tomēr gandrīz jebkuras bildes svaru var samazināt, nezaudējot attēla kvalitāti. Šim nolūkam ir speciālas bilžu optimizācijas programmas, kas, izmanotojot salīdzinoši lielu datora jaudu, aprēķina, kā labāk saspiest katru bildi. Tā lūk!

Turpinājums sekos...