Koti » Mobiilisivun nopeus on tärkeä

Mobiilisivun nopeus on tärkeä

Ei ole merkitystä kuinka nopea internet-yhteys puhelimessa on, vaan miten verkkosivut on suunniteltu. Tämä on nykyisin verkkosivun suunnittelijan todella tärkeä tehtävä. Se miten verkkosivut latautuu puhelimeen vaikuttaa siihen, kuinka sivuston vierailija näkee sivuston. Kuinka monta sekuntia olet valmis odottamaan, että verkkosivusto latautuu puhelimeen? Keksimäärin 1-3 sekuntia, mutta ehdottomasti enintään 10 sekuntia. Hakukoneet suosivat hyvin optimoituja verkkosivuja hakutuloksissaan (SEO).

Tälläinen nopeus verkkosivulle tuo haasteita verkkosivujen kehittäjille, sillä paljon kuvia omaavan sivun tulee optimoida hyvin kuvien latautuminen. Myöskin nykyaikaiset javascript elementtien latautumista pitää hyvin säädellä miten latautuvat verkkosivulla.

Googlella on hyvä työkalu, jonka avulla voit testata verkkosivusi latausnopeuksia 3G-nopeudella. Työkalu antaa vinkkejä, miten voit optimoida sivustoa. Toinen hyvä työkalu on Googlelta PageSpeed Insights.

Chrome-selaimissa on lisäksi kehittäjäkonsolissa (F12) työkalu nimellä Audits, jonka avulla saa yksityiskohtaisesti tietoa.

Tässä on raportti tästä meidän sivustosta. Pääsemme kuitenkin suhteellisen nopeaan latausnopeuteen ladatessa verkkosivuja, mutta emme päässeet optimiin 3s latausnopeuksiin.

Keskeisimmät asiat verkkosivun latautumisen nopeuteen:

Lataa näkyvä sisältö ennen tyylitiedostoja, javascriptejä sekä fontteja

Tämä tarkoittaa, että siirrä tyylitiedostojen, javascriptin ja fonttien latautumiset sivuston lopppuun, alatunnisteen (footer) alapuolelle. Kuitenkin lataa sivuston ylätunnisteessa tärkeimmät CSS (Critical CSS), niin sivusto latautuu latautuu nopeasti ja sivusto näyttää heti oikein kun latautuu oikein.

Tähän löytyy ilmainen työkalu täälä. Kopioi kaikki CSS-tiedosto ja liitä osoite sivustoosi, niin työkalu luo sinulle valmiiksi tärkeimmät CSS, jonka liität suoraan ylätunnisteeseen <style> tagilla.

Pakkaa HTML/CSS/JS tiedostot

Pienennä CSS/JS tiedostot. Tällä vähennetään turhaan siirrettävää tavuja. Tähän löytyy työkaluja verkosta: CSS ja JS. Kommentit ja rivivälit kannattaa poistaa. Useissa CSS/JS kirjastoissa on valmiiksi pakattu tiedostot saatavilla.

Pidä kuvat järkevän kokoisina

Ei ole järkeä ladata hirveän suuria kuvia verkkosivulla, vaan pienennä ne sopiviksi. Voit myös käyttää erikokoisia kuvia eri näyttökokoja varten. Tämä on suositeltavaa, niin ei kärsi verkkosivun laatu ollenkaan.

Pakkaa verkkosivut

Palvelimen päästä tulee ottaa pakkaus, tämä vähentää paljon kaistankäytöä. Tälläisiä tekniikoita on esimerkiksi GZIP.

Pienennä palvelimen vasteaikaa

Panosta webhotellisi valintaan! Halvin ei ole paras. Kannattaa varmistaa, että verkkosivustosi on nopeiden yhteyksien varrella ja mahdollisimman lähellä sivuston vierailijaa. Näin se pystyy tarjoamaan parhaan mahdollisen viiveen sivuston vierailijoille.

Jos verkkosivusi tulee toimia nopeasti ympäri maailmaa, suosittelen käyttämään kuvien, CSS ja JS tiedostojen latautumiseen CDN-palveluja.

Käytä uusinta tekniikkaa palvelimella

Uusimmat versiot webpalvelimesta edistää verkkosivun siirtämistä todella paljon. Näitä ovat HTTP/2 ja esimerkiksi PHP7, kun sivustolla on PHP:tä käytössä. Kysy näistä lisää webhotelli palveluntarjoajaltasi.

Kommentoi