Monipuolisuudestaan huolimatta, avoimen lähdekoodin Magento -verkkokauppasovellus ei ole varsinaisesti tunnettu nopeudestaan. Hyvän käyttäjäkokemuksen ja hakukonenäkyvyyden saavuttamiseksi verkkokaupan nopea lautautuvuus on kuitenkin menestystä tavoittelevalle verkkokaupalle elintärkeää.
Origodesign Oy on käyttänyt kymmenittäin tunteja Magento verkkokauppasovelluksen latauvuuden optimointiin ja onnistunut saavuttamaan Google Pagespeed Insight työkalun avulla arvioiden erittäin hyviä tuloksia.
Yleisenä ongelmana Magento kaupoissa on hitaasti toimivat lisäosat. Suurin osa Magentolle koodatuista lisäosista on koodattu toimimana mahdollisimman monessa ympäristössä välittämättä suorituskyvystä. Ongelma ilmenee yleisesti liian moneen sivuun vaikuttavana tyylitiedostona ja JavaScript-kirjastona. Mikäli kaupassa on esimerkiksi useampi maksutapamoduuli, hieno kuvagalleria ja moderniteema niin kaikki lisäosat saattavat sisältää kutsun omaan jQuery-kirjastoon. Tämän jäljiltä sivulataus sisältää neljä eri versiota samasta kirjastosta. Näistä tarvitaan vain yksi, mutta sivun kaikki neljä lataamalla selaimella kuluu kaksi sekuntia aikaa ladata ja käsitellä kolme ylimääräistä jQuery-kirjastoa.
Toinen ongelma on esimerkiksi vain kategoria sivuihin liittyvä lisäosa, jonka JavaScript-kirjastot ja tyylitiedostot ladataan myös tuotesivuilla. Siirtämällä kutsut pelkille kategoria sivuille kutsutaan resurssit vain kun niitä oikeasti tarvitaan.
Google PageSpeed Insights avulla sivun suurimpiin ongelmiin voi puuttua nopeasti. Tässä hieman selvitystä työkalun antamista virheistä ja mitä niille on tehtävissä.
Eliminate render-blocking resources
Sivujen piirtämistä ei voida aloittaa ennen kuin head -elementin sisältö on käsitelty. Esimerkiksi JavaScript ja CSS -tiedostojen käsittely pysäyttää piirtämisen kokonaan. JavaScript referenssien siirto headista footer -elementtiin poistaa tämän esteen.
CSS referenssien siirtäminen on teknisesi hieman hankalampaa, mutta tämä onnistuu LoadCSS -kirjaston avulla.
Reduce server response times (TTFB)
Time to First Byte kertoo kuinka nopeasti palvelin lähettää ensimmäisen merkin tietoa verkkosivun sisällöstä. Paremman tuloksen saavuttamikseksi suosittelemme hyvän hosting palvelun käyttöä sekä Magenton välimuistin käytön optimointia.
Preload key requests
Nettisivun lataaminen ja käsittely aloitetan käyttäjälle näkymättömän head -elementin lukemisella. Tämä elementti sisältää tyylitiedostot ja koodikirjastot joiden avulla nettisivu saadaan näkymään oikein. Joskus sivun renderöintiin tarvittavia elementtejä kutsutaan vasta sivun myöhemmin pohjalla, jolloin elementin lataus aloitetaan liian myöhään. Yleinen esimerkki tästä on fonttikirjasto joka ladataan vasta sivun footerissa. Tämä ongelma ratkeaa hyödyntämällä <link rel=preload> kutsua nettisivun head -elementin sisällä. Tällöin myöhemmin kutsuttava elementti on valmiiksi ladattuna, eikä selain joudu odottamaan latauksen valmistumista.
Defer offscreen images
Kuvat muodostavat suurimman osan nettisivun latauskoosta. Googlen tilastojen mukaan jopa 96% verkkoliikenteestä on kuvia. Lataamalla kuvat vasta tarvittaessa säästetään resursseja kriittisten resurssien käsittelyyn. LazyLoad -metodilla kuvat ladataan vasta juuri ennen kuin ne tulevat näkyviin käyttäjän ruudulle. Prosessi on käyttäjälle näkymätön, mutta nopeuttaa sivujen alkulatausta merkittävästi.
Remove unused CSS
Verkkokaupan tyylitiedostot saattavat sisältää joko käytöstä poistuneita tyylimääreitä tai muille sivuille kohdistuvia määreitä. Esimerkiksi ”Omat sivut” tyylejä ei käytetä tuotesivulla, mutta ne saattavat silti olla mukana tyylitiedostossa. Sivua piirtäessä nettiselaimen pitää käsitellä myös nämä turhat säännöt. Optimaalinen tilanne on sisällyttää kriittiset määreet head -elementin sisälle jolloin sivun yläosa näyttää heti oikealta ja myöhemmin näkyviin tulevat elementit saavat tyylitietonsa vasta myöhemmin.
Enable text compression
Sivulatauksen tiedonsiirtoa on mahdollista nopeuttaa pakkaamalla tuotesivun koodi ennen tietoverkon yli lähettämistä. Tämä säästää sivun latausaikaa pienentämällä siirrettävän tiedon kokoa.
Properly size images
Verkkosivulla on liian suuria kuvia, jotka lasketaan resurssien tuhlaamiseksi. Mikäli kohde on esimerkiksi kännykkäruutu niin ei ole järkevää ladata printtilaatuista kuvaa. Sama virhe tulee myös mikäli jonkin kuvan kuvasuhde on skaalauksen takia väärä. Lataamalla kuvat Magenton välimuistin kauttana on ne mahdollista kutsua suoraan oikeassa koossa jolloin virheilmoituksesta päästään eroon.
Minify JavaScript
JavaScript koodi on koodajien toimesta täynnä rivinvaihtoja ja kommentteja, jotka tekevät koodista helppo lukuista, mutta tilankäytön osalta tehotonta. Minifikaatio poistaa rivinvaihdot, välilyönnit ja lyhentää muuttuujanimiä. Esimerkiksi suositun jQuery JavaScript-kirjaston minified versio on tiedostokoolta 60% normaalia versiota pienempi. Tällä hetkellä Magento verkkokaupan tuotesivun tiedostosiirrosta noin 50% on JavaScript koodia. Suosittelemme käyttämään Fooman Speedster Advanced moduulia, jossa on mukana automaattinen Minify JavaScript toiminto.
Efficiently encode images / Serve images in next-gen formats
Google suosittelee käyttämän kuvien tallennukseen moderneja kirjastoja ja tiedostomuotoja. Nämä suositukset ovat petollisia sillä Googlen suosittelemilla tiedostomuodoilla on kirjoitushetkellä alle 80% yhteensopivuus nykyisillä nettiselaimilla. Parhaan yhteensopivuuden takaamiseksi päädyimme käyttämään Apptrician Image Optimizer laajennusta. Image Optimizer käsittelee kuvat taustaprosessina tehokkaimmalla mahdolliselle pakkauksella jolloin kuvat läpäisevät testin, mutta kuvat toimivat yhä kaikilla selaimilla.
Mikäli yrityksesi verkkokauppa perustuu Magento -julkaisujärjestelmään mutta et nykyisellään ole tyytyväinen sivuston latausaikoihin, niin voimme mielellämme antaa arvion sivuston ongelmakohdista ilman sitoumuksia, ja tehdä tarjouksen sivun nopeuttamisen tarvittavien toimenpiteiden toteuttamisesesta!