7. etapp

Veebirakenduse optimiseerimine

Alustuseks puhastasin oma veebilehitseja cache'i ja avasin esilehe, püüdes kinni võrguliikluse Chromiumi DevToolsiga. Tulemus on järgmine:

Ehk tehti 79 päringut, kokku 459kB ja laadimine kestis kokku 2.49s

Käivitasin ka oma rakenduse peal Chromiumi "Lighthouse" auditi desktop mode'is. Lighthouse sisaldab kõiki Pagespeed omadusi. Tulemus on järgmine:

Tehtud muudatused

• Skriptifailide asünkroonne laadimine (Eliminate render blocking resources)

Lisasin htmli päises olevatele ebaolulistele skriptifailidele juurde "async" tagi.

Võtsin üldisest head fragmentist stylesheet linki, mida kasutatakse vaid pealehel, ning lisasin selle pealehe javascripti lõppu, et see laetaks alles siis, kui leht valmis on.

Ei elimineerinud kõiki render blocking elemente, sest näiteks mõne javascripti faili vales järjekorras laadimine tekitab probleeme. Ka mõne CSS faili jätsin nö. render blokkivaks, sest need on vajalikud lehe sisu korrektseks esitamiseks ning nendega viivitamine kuvaks alguses jubeda lehe.

• Kõik saadetavad html dokumendid, json objektid, css ja javascript failid pakitakse serveris enne saatmist gzipiga kokku ja lisatakse response header selle jaoks. (Enable text compression)

Lisasin application.yml konfiguratsioonifaili järgmised read:

server:
  compression:
    enabled: true
    mime-types: text/html,text/css,application/javascript,application/json

• Ebavajaliku CSS'i eemaldamine (Defer unused CSS)

Ei viinud sellega seoses muudatusi sisse, sest kõik probleemsed failid on netist tõmmatud ning neid pole tavaks modifitseerida (Bootstrap, fontawesome...).

Tulemus

Andmemaht alanes 133 kB! Performance skoor tõusis 70%