Nopeustestin tekeminen Google PageSpeed Insights tai Pingdom Website Speed Test -työkaluilla auttaa kotisivujen suorituskyvyn mittaamisessa. Työkalut kertovat sivustosi latausnopeuden sekä mobiilissa että tietokoneella omien kriteeriensä mukaan ja antavat korjausehdotuksia. Vaikka nämä mittarit voivat tarjota hyödyllistä tietoa sivuston optimoinnin parantamiseen, on myös tärkeää pitää luvut omassa perspektiivissään. Ei kannata myöskään hilata testin pisteitä ylöspäin käyttäjäkokemuksen kustannuksella.
Lisäksi on tärkeää muistaa, ettei 100/100 pisteiden saaminen ole aina edes mahdollista riippuen muun muassa palvelinympäristöstä.
WORDPRESS JA GOOGLE PAGESPEED INSIGHTS
Jos olet itse ylläpitänyt omaa sivustoasia tai vaikka ladannut palvelimelle paljon kuvia kiinnittämättä huomiota niiden tiedosto kokoon, saattaa Google PageSpeed Insight testin tulos olla hyvin alla olevan kuvan kaltainen.
WordPressin nopeuden parantaminen voi olla haastavaa. Varsinkin mahdolliset käytössä olevat kolmannen osapuolen lisäosat voivat tehdä siitä painajaismaista. Alla käyn läpi keinoja pisteiden parantamiseksi ja sivuston nopeuttamiseksi.
POISTA HAHMONNUKSEN ESTÄVÄ JAVASCRIPT JA CSS SIVUN YLÄOSAN SISÄLLÖSTÄ
Google PageSpeed Insight kertoo, että meillä on Javascriptiä ja CSS “foldin” yläpuolella. Kolme yleistä syytä, miksi tämä varoitus näkyy, ovat: Javascript/CSS tiedeostot, Font Awesome ja Google Fontit. Testipalvelimen tapauksessa kaikki Javascript ja CSS tiedostot ovat Foldin yläpuolella. Tämän korjaamiseksi palaan aiemmin asentamani Autoptimize-lisäosan asetuksiin ja tallennan seuraavat asetukset:
- Javascript Options kohdan alla ota täppä pois “Force JavaScript in <head>?” kohdasta
- CSS options kohda alla laita täppä “Inline all CSS?”
“Force JavaScript in <head>?”-valinnan pois ottaminen saattaa joissain tapauksissa aiheuttaa ongelmia, joten tapauskohtaisesti sen saattaa joutua laittamaan uudelleen päälle.
Hyödynnä selaimen välimuistia
Tämän korjaamiseksi lisään cache-control headerin lisäämällä seuraavan koodin Apachen .htaccess-tiedostoon.
<filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=84600, public" </filesMatch>
Ja tässä on koodi, jos käytät Nginx-palvelinta :
location ~* .(js|css|png|jpg|svg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}
OPTIMOI KUVAT
Seuraavaksi Google PageSpeed Insight käskee minun optimoida sivustolla olevat kuvat. Kuvien resoluutio pitäisi aina pienentää vastaamaan osiota jossa niitä aiotaan käyttää, ennen kuin niitä ladataan kotisivuille. Tämä onnistuu helposti millä tahansa kuvankäsittelyohjelmalla. Varoituksen korjaamiseksi muutan yksittäiset kuvat oikean kokoisiksi ja pakkaan ne Compressor.io -työkalun avulla ja lataan ne uudelleen sivustolle. Tämän jälkeen pisteet kasvoivat roimasti.
Vaihtoehtoisesti voi käyttää jotain WordPressin optimointi lisäosaa.
PIENENNÄ JAVASCRIPT JA CSS
Nyt Google PageSpeed Insight käskee minua pienentämään meidän JavaScript, CSS, and HTML tiedostoja. Tämän ongelman korjaamiseksi asennamme ilmaisen Autoptimize-lisäosan. Lisäosan asetuksista rastitan seuraavat asetukset:
- Optimize HTML Code
- Optimize JavaScript Code
- Optimize CSS Code
LAITA PAKKAUS PÄÄLLE
Testipalvelimella Gzip-pakkaus oli jo päällä. Alla on ohjeet sen ottamisesta käyttöön omalla palvelimellasi.
Apache
Saat Gzipin päälle lisäämällä seuraavan koodin .htaccess-tiedostoosi..
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
Nginx
Saat Gzipin päälle lisäämällä seuraavan koodin nginx.conf -tiedostoosi.
gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_disable "MSIE [1-6].(?!.*SV1)"; gzip_vary on;
VÄHENNÄ PALVELIMEN VASTAUSAIKAA
Ja lopuksi, ”Reduce server response time”-varoitus. Paras tapa vaikuttaa tähän on valita luotettava palvelimentarjoaja ja ottaa käyttöön content delivery network (CDN). Siinä kaikki! Jos onnistuit seuraamaan kaikkia ylläolevia vaiheita, ovat PageSpeed Insight -pisteesi nousseet roimasti.
ENNEN JA JÄLKEEN
Alla olevissa kuvissa näkyy Google PageSpeed insight testin tulokset.
Jokainen tekemäni muutos pienensi sivun latausaikaa. Oheisissa kuvakaappauksissa näkyvät testisivuston pisteet ennen ja jälkeen toimenpiteiden. Sivuston latauskoko pieneni 5.3Mb:stä 2.1MB ja latausaika lyhentyi huomattavasti.
YHTEENVETO
Kuten tuloksista huomaat, Google PageSpeed Insight -suositukset ovat erittäin hyödyllisiä ja niitä seuraamalla saat parannettua sivustosi latausaikaa. Kuvien lataaminen kotisivuille alkuperäisessä tiedostokoossa on varma tapa hidastaa sen toimintaa, joten kuvat kannattaa aina pakata ja tarkistaa, onko niiden resoluutio liian suuri. Testien antamat arvosanat eivät ole absoluuttisia, vaan vaihtelevat hieman muun muassa palvelimen vastausajan mukaan. Tämän takia ei kannatakaan aina pyrkiä 100/100 tulokseen, koska usein se ei ole tarkoituksenmukaista tai edes mahdollista.
Paras tapa onkin korjata niin monta virhettä kuin sinun ympäristössäsi on mahdollista ja katsoa, mihin se riittää. Ei kannata myöskään unohtaa käyttäjäkokemusta. Vaikka testi sanoisikin, että sivustosi latautuu nopeasti, saattaa kokemus olla täysin päinvastainen sivuston vierailijoille. Kannattaa lukea myös aikaisempi kirjoitus vinkeistä WordPress-sivuston nopeuttamiseksi. Jos omat WordPress-verkkosivut kiinnostavat.
