Nopeuta sivustoasi - Google PageSpeed

Useilla keskeisillä hakukoneoptimointifoorumeilla on tullut esiin Googlen painotus suosia sivuja, joilla on mahdollisimman nopea sivulataus. Tätä ominaisuutta arvostetaan, sillä HTML-sivustoista kun on tullut ”läskejä”. Jopa 2 Mb sivut (yleensä etusivut) eivät ole tavattomia. Yleensä järjestelmillä tehdyt www-sivustot ovat täynnä valtavia määriä erilaisia JS- ja CSS-kirjastoja. Tämä kaikki vaikuttaa sivulataukseen, sivuston käyttökokemukseen ja tätä kautta hakukoneoptimointiin ja Googleen. Google ei halua näyttää sivustoja, jotka latautuvat hitaasti. Tarinat kertovat sivulatauksen nopeuden olevan lähes pakkomielle Googlelle – siihen siis kannattaa panostaa.

Tässä Googlen oma työkalu, jolla voit testata sivusi latausnopeutta:
https://developers.google.com/speed/pagespeed/insights/

Muutamia helppoja tapoja nopeuttaa omien sivujen latautumista

Head-osion sivulautaukset

Jos sivun head-osassa on paljon JS- ja CSS –tiedostoja, jotka pitää ladata ennen kuin sivu voidaan piirtää selaimelle, tämä on yleensä eniten sivulatausta hidastuttava osio. JS-tiedostojen latauksessa kannattaa käyttää requirejs-javascript-kirjastoa. Requirejs lataa JS-tiedostot asynkronisesti eli kaikki samaan aikaan - ei yksi kerrallaan.

Ks. http://requirejs.org/

Kirjoita CSS-tiedostot auki

Sen sijaan että teet CSS-tiedostoon viitteen
<link rel="stylesheet" type="text/css" href="css/default.css">
Niin tee se näin
<?php include(./css/default.css)?>
Näin koko CSS-tiedosto latautuu heti sivupohjaan ja selain voi aloittaa välittömästi sivun muodostamisen. Muuten selaimen pitäisi tehdä erillinen http-kutsu CSS-tiedostoa varten. Tämä nopeuttaa merkittävästi.

Apache-moduulit juuren .htaccess-tiedostoon

Tässä esimerkki .htaccess –tiedostosta, joka saattaa yksistään nopeuttaa sivustoasi 20 - 40%. Pelkästään tällä olen saanut WordPressin, jonka nopeus oli vaatimattomat 25/100 suoraan 55/100 eli huomattava parannus.

Huom! Jos serveri ei ole konfattu oikein saattaa sivustolle tulla ”Internal Server Error”. Jos näin on, niin kokeile poistaa ensin kaikki moduulit ja sitten lisätä niitä yksi kerrallaan.

Tässä valmis copy-paste-määritys. Tallenna sivuston juureen .htaccess-tiedostoon.

#Pitaa sivullasi kuvia, JS ja CSS-tiedostoja valimuistissa
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

#Google kehittama oma pagespeed module –asennusohjeet alla
<IfModule pagespeed_module>
ModPageSpeed on
ModPagespeedRewriteLevel CoreFilters
ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters defer_javascript
ModPagespeedEnableFilters sprite_images
ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
ModPagespeedEnableFilters collapse_whitespace,remove_comments
</IfModule>

#Pakkaa sivustosi sisallon selaimelle lahetettaessa – pienempi pakattu tiedosto latautuu nopeammin
<IfModule mod_deflate.c>
<filesMatch "\.(js|css|html|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>

Lataa tästä

Jos .htaccess on uusi asia niin lue: http://www.htaccess-guide.com/
Hakukoneoptimoijalle .htaccess on tärkeä tiedosto, sen avulla voi parantaa montaa asiaa!

Google PageSpeed

Googlen kehittämä Apache-moduuli sivulatauksen nopeutusta varten.
Ks.https://developers.google.com/speed/pagespeed/module/
Tuossa mukana asennusohjeet. Asentuu asiantuntevalta kaverilta 3 minuutissa. Ei ole ikinä rikkonut minulla mitään sivustoa (ei myöskään Magentosta tai WordPressistä).

Kuvien optimointi

Kuvat kannattaa pakata ja optimoida - tällä saat mukavasti lisäpisteitä.
WordPressiin on saatavilla kätevä plugin: https://wordpress.org/plugins/wp-smushit/.
Muuten voit käyttää jotain online-työkalua esim. http://www.imgopt.com.

Varo fontteja

Uusilla raflaavilla sivustolla on usein käytössä erikseen ladattavia fontteja. Erikseen ladattavat fontit ovat tietysti näyttävämpiä. Koodaajat perustelevat erikseen ladattavien fonttien käyttöä helpon päivitettävyyden takia. Erikseen ladattavat fontit kuitenkin hidastuttavat sivuston latausta merkittävästi. Tallenna fontit omalle palvelimellesi.

Webhotellit vs. virtuaaliserverit

Yleisesti virtuaaliservereiden ja tietysti omien servereiden konffaaminen on helppoa ja nopeaa, kun omistaa täydet valtuudet tehdä mitä haluaa. Kuitenkin useilla isoillakin webhotellin tarjoajilla ei ole tukea äskeisen .htaccess-tiedoston moduuleille. Itse otin virtuaaliserverin äskettäin täältä: https://www.yourserver.se/en/linux
Vain 40 € / vuosi ja saat oman virtuaaliserverin sijainnilla Göteborg, Ruotsi. Tuolla hinnalla ei yleensä saa edes järkevää webhotellia Suomesta.

Serverin vasteaika

Serverin vasteaika riippuu yleensä serverin kuormasta ja tietoliikenneyhteyksistä. Serverit kannattaa laittaa yleensä kiinni runkoverkkoon, jolloin vasteaika saadaan optimiksi. Serverin kuormaa voi yrittää pienentää erilaisilla cache-ratkaisuilla. Esim. WordPressiin suosittu cache-plugin on https://wordpress.org/plugins/wp-super-cache/. Tuolla saa sivuston suoritusaikaa mukavasti alas.

Valmiiksi optimoitu Bootstrap-pohja

Täältä saat valmiin toimivan Bootstrap-pohjan https://github.com/danriti/bootstrap-pagespeed. Tuo tosin on nyt jo 2 vuotta vanha, mutta Bootstrap-tiedostot voi halutessaan helposti päivittää. Tuossa valmis pohja, joka oikealla serverillä saa suoraan Google PageSpeed -pisteet 100/100.