Verkkosivun selainpuolen suorituskyky

Opinnäytetyössä pohditaan web-sivun selainpuolen suorituskyvyn tärkeyttä ja esitellään keinoja parantaa sitä. Opinnäytetyössä ei ollut toimeksiantajaa. Verkkosivuston selainpuolen suorituskyky on erittäin tärkeää yritysten liiketoiminnan kannalta. Pienikin hidastuminen sivun latausnopeudessa voi laskea konversiota ja myyntiä. Sivuston täytyy olla nopea myös mobiililaitteilla, sillä valtaosa Internet-käyttäjistä käyttää älypuhelinta tai taulutietokonetta. Selainpuolen suorituskykyä voi optimoida monilla tavoin, mutta suurin osa niistä liittyy jollain tavoin tiedostojen lataukseen tai HTML-dokumentin jäsentämisen ja suorittimen pääsäikeen vapauttamiseen. Dokumentin nopea jäsentäminen on tärkein asia latausajan parantamisessa. Kuormittamaton suoritin takaa sivun interaktiivisuuden. Yksittäisiä optimointikohteita ovat esimerkiksi CSS-tyylit, JavaScript-ohjelmat, kuvat ja web-fontit. Kuhunkin liittyy omat haasteensa. CSS-tyylitiedostot pysäyttävät HTML-dokumentin jäsentämisen, mutta sen voi ohittaa jakamalla tyylit kahteen osaan, ja lataamalla vähemmän tärkeät tyylit myöhemmin. JavaScript-ohjelmissa on tärkeää olla lataamatta ylimääräistä koodia. Modernit tekniikat helpottavat ohjelmien suorituskyvyn optimointia. Kuvien optimoinnissa tärkeintä on kuvatiedoston koon pienentäminen sekä oikean kuvatiedostoformaatin valinta. Kuvien lataamisessa tulisi käyttää lazyload-tekniikkaa. Web-fontit ovat tiedostokooltaan suuria, eivätkä ne ole verkkosivun sisällön kannalta tärkeitä. Fontit voidaan ladata viivytetysti käyttämällä font-display-ominaisuutta, selaimen font loading-ohjelmointirajapintaa tai FontFaceObserver-lisäkettä.The thesis explores the importance of performance in the client-side of a website, and presents ways to improve it. The thesis was not commissioned by a client. Client-side performance of a website is vital to success of a company. Even a small increase in page load times can decrease conversion and sales. Websites also must load fast on mobile devices, since most of Internet users browse using smartphones or tablet computers. Client-side performance can be optimized in many ways, but most of them are in some way related to resource downloading, HTML document parse or freeing the main thread of the processor. Parsing the HTML document is the most important factor when it comes to improving page load times. An unburdened processor guarantees that the page is interactive. CSS styles, JavaScript programs, images and web fonts are among the things to optimize. Each of them has its own set of challenges. CSS stylesheets block HTML document parsing, but it can be circumvented by splitting styles in to two parts, and loading less important styles later. In JavaScript programs, it’s important not to send any unnecessary code to the user. Modern techniques make optimizing JavaScript easier. When optimizing images, it’s important to decrease the image file size and choose the correct file format. Images should be loaded using the lazyload technique. Web fonts have large file sizes, and they are not needed for the user to start consuming content. Fonts loading can be deferred using the font-display property, font loading application programming interface or the FontFaceObserver plugin