Kuinka parantaa kotisivujen Google PageSpeed Insight -pisteitä?

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 […]

Digimarkkinointi

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.

Ota yhteyttä