1.
Sivuston nopeuden optimointi

2.
Konteksti:
Enterprise tai verkkokaupat.
2

3.
Saitti on hidas.
Nopeutetaanpas sitä.
3

4.
Tyypillinen nopeusoptimointiprosessi
4
1. Totea saitin olevan hidas
2. Käytä Googlen PageSpeed Insights-työkalua
3. Kerro asiakkaalle “teidän pitää poistaa renderöintiä blokkaavat skriptit” yms
sivulta.
4. ???
5. Nauti tukka putkella sivustolla surffailusta

5.
5

6.
“Eliminate render-blocking JavaScript and CSS in above-the-fold content”
“Reduce server response time”
“Minify CSS”
“Leverage browser caching”
“Optimize images”
6
Googlen Pagespeed Insightsin “insights”

7.
Saako tuo “insight” devaajat
tekemään asioita?
7

8.
Kumpi on tärkeämpää bisnekselle,
puhua latausnopeudesta
sekunneista vai asteikosta 0-100?
8

9.
Case: DNAn tuotesivut

10.
Ratkaistaan tilanne Chromen
DevToolsin avulla.
10

11.
11
Joko näppäinkomento tai More tools -> Developer Tools.

12.
12
“Reduce server response time”
Ongelma:
● Ei kerro mitään konkreettista.
○ Miten?
○ Millä tavalla?
○ Miksi?
Ratkaisu:
● Selvitetään miten nopeasti serveri
oikeasti reagoi.
● Onko ongelmana oikeasti serverin
vasteaika vai esimerkiksi sen tai DNS:n
hitaus?

13.
Devtoolsin Network tab → leijuta hiirtä ensimmäisen rivin kohdalla
sinisen palkin päällä → modaali
13

14.
14
“Eliminate render-blocking JavaScript and CSS
in above-the-fold content”
Ongelma:
● Mitä skriptejä ne on?
● Miten paljon ne viivästyttää?
● Jos siirrän ne lähdekoodissa alas,
nopeutuuko sivusto? (ei)
Ratkaisu:
● Selvitetään skriptit ja etenkin onko niiden
sisällä hukkaa.
● Siirretään renderöimisen kannalta
tarpeettomia skriptejä myöhemmäksi tai
jätetään lataamatta.
● Käytä async tai defer.
○ <script async src="foobar.js"></script>

15.
Devtoolsin Network tab → Valikosta JS
15

16.
Devtoolsin sisällä löytyy “more tools”, ja sieltä Coverage-raportti, joka
näyttää miten paljon ladatuista skripteistä käytetään.
16

17.
17

18.
18
“Minify CSS”
Ongelma:
● CSS:n minifiointi, eli välilyöntien ja
rivivaihtojen poistaminen on helppoa,
mutta sen oletuksena on, että ladataan
pelkästään tarvittavaa CSS:ää.
Ratkaisu:
● Napataan turhat CSS:t pois
sivupohja-tasolla (esim. tuotelistaussivut,
tuotesivut, …) aka code-splitting.

19.
19
“Optimize images”
Ongelma:
● Mikä oikeastaan on kuvien suhteen
ongelma? Liikaa? Liian isoja?
● Miten niitä voi pakata?
● Hidastaako ne oikeasti sivunlatausta?
Ratkaisu:
● Selvitetään kuvien koot.
● Missä vaiheessa kuvia ladataan sivulle.
● Lazy-loading(?)
● Voiko kuvat ladata HTTP/2:lla samalta
palvelimelta?

20.
Devtoolsin Network tab → Alavalikosta “IMG”.
20

21.
Devtoolsin Network tab → Alavalikosta “IMG”. Sortattuna kuvien
kokojen mukaan. Suurimmat voitot tulee näistä kuvista ja kuvien
määrän minimoinnista.
21

22.
Yhteenveto

23.
1. Näkee konkreettisesti tiedosto-tasolla ongelmat ja mahdollisuudet.
2. Pystyy emuloimaan eri päätelaitteita (desktop vs vanha kännykkä) ja liittymän nopeutta (oikea vs
hidas 3G).
3. Aina mukana ja asiakkaan devaajat pystyy käyttää samaa “stackia” ja siten todentaa suositukset.
4. Devtoolsilla voi ylikirjata esim. style.css omalta koneelta ja siten testata muutoksia ja niiden
vaikutusta latausaikaan → valmiita tiedostoja devaajille.
23
Miksi nopeutta optimoidaan Devtoolsilla?

24.
“The DOMContentLoaded event is fired when the document has been completely
loaded and parsed, without waiting for stylesheets, images, and subframes to
finish loading (the load event can be used to detect a fully-loaded page)”
24

25.
1. Mitä nopeampi serveri ja sen vasteaika, sitä nopeampi sivusto.
2. Ladataan kaikkea mahdollisimman vähän.
a. Yhdistellään ja minifioidaan tyylitiedostot ja skriptit.
b. Ladataan samoilta palvelimilta.
3. Mikäli mahdollista, käytetään HTTP/2 (demo).
4. Optimoidaan latausjärjestystä, eli ladataan alkuun tärkeimmät tyylit ja
skriptit, muut sitten kun ehtii (asynkronisesti).
25
Yleisiä ohjenuoria nopeuden optimointiin

26.
Chrome
Devtools
26
❤

27.
oikio.fi
Kiitos!
Joona Tuunanen
Head of SEO & Partner
040 480 4708
joona@oikio.fi