Case: Nopea frontend-optimointi

Sivuston frontend-optimointi ei ole läheskään aina kovinkaan haasteellista tai työlästä. Jos tekniikka taustalla antaa myöten nopeille korjausliikkeille, pienilläkin säädöillä voidaan vaikuttaa sivuston latausaikoihin.

Tämän kertaisessa esimerkissä sain tehtäväkseni nipistää erään pienehkön sivuston latausajan minimiin. Alustava kartoitus paljasti optimoinnin perusteiden jääneen puolitiehen, sekä palvelinarkkitehtuurin haasteet suorituskyvyn maksimoimiseksi. Päätimme tehdä sen mikä tehtävissä on kevyellä työllä ja siirtää palvelun myöhemmin optimointiystävällisemmälle palvelimelle.

Alkutilanne ei ollut mitenkään katastrofaalinen, alla kuva tärkeän ländärin nopeudesta.

Case-nopea-optim-alku

Noin parin tunnin työmäärällä tehtiin seuraavia hienosäätöjä

  • Kompressoitiin CSS
  • Minimoitiin http requestien määrää paikallisten tiedostojen osalta
  • Http responsen header -dataan lisättiin sivuston renderöintiä nopeuttavia meta-tietoja
  • Staattisten tiedostojen cache -asetuksia kasvatettiin
  • Kuvia optimointiin
  • JavaScriptitien asynkroninen lataus

Lopputuloksena selkeästi nopeammin latautuva ländäri ja sivusto.

Case-nopea-optim-loppu

Pienellä työmäärällä saatiin latausajasta tärkeitä sekunteja pois ja muutos on silminnähtävissä. Huomionarvoista tässä on myös se, että mikäli optimoinnin perusteet olisivat olleet täysin toteuttamatta tällä kyseisellä sivustolla niin samalla työmäärällä latausajat olisivat pudonneet huomattavasti enemmän ja vaikutus olisi ollut vielä näkyvämpi. Työmäärä pysyi myös hyvin vähäisenä, koska sivusto oli toteutettu moderneilla teknologioilla ja muutosten toteuttaminen vaati vain hienosäätöjä.

Sivuston latausajoista suurin osa tulee ulkopuolisista JavaScript -kutsuista, joille ei kaikille voida tehdä juurikaan mitään optimoinnin nimissä. Jatkokehitykseen jäi vielä hieman suurempia tehtäviä sovellus- ja palvelinarkkitehtuurin osalta, joiden avulla sivuston yleisnopeutta saadaan lisättyä vielä hieman enemmän.

Tässä esimerkkitapauksessa asiakkaalleni oli tärkeää minimoida yksittäisen sivun latausaika sen hakukoneen kautta löytävälle vierailijalle. Optimoinnin kustannukset jäänevät sivuseikaksi, kun pienentyneen latausajan voidaan luottaa näkyvän myynnin kasvuna. Monelle tästä vanhasta tutusta aiheesta pieni yhteenveto löytyy seuraavan linkin takaa http://zoompf.com/business-case

Kirjoittaja: Veli-Matti Viippola