Sivuston optimointi

Julkaistu kirjoittaja Andreas

Ajattelin kirjoitella omasta kokemuksesta sivuston optimoinnista, koska itselläni on nyt tilanne jossa optimoin sivun suoritusta ja nopeutta. Lähden kertomaan step by step mitä olen tehnyt ja testaillut sivua. Laitan myös mukaan hyödyllisiä vinkkejä ja linkkejä mistä olen saannut ohjeita ja neuvoja sivuston optimointiin.

Ensimmäinen vaihe on tarkistaa sivut niin että kaikki suunnittelu vaiheet on tehty, tämä lähinnä sen takia jotta css ja javat voidaan midifioida ( pakkaa ) tarkista siis ne huolella.
Kun ole tarkistannut sivut on aika ruveta käärimään hihat ja tekemään optimointia.

Mistä siis aloitta?
Ensiksi pitää tietää kuinka hitaat sivusi ovat http://gtmetrix.com/  on erinomainen sivut testaa sivun lataus aikaa ja suorituskykyä.
Oman sivun latausaika oli 14.3 sekuntia 28.03.2012 joka oli turhan pitkä, joten työtä oli tehtävä jotta pääsisin noin alle 5 sek latausaikaan joka olisi kohtuullinen.

Gtmetrix antoi hyviä vinkkejä css:n ja java kirjastojen pakkaamiselle ja erityisesti tyylitiedostojen laittaminen yhteen samaan style.css tiedostoon. Samalla kun määrittelin tyylit samaan tiedostoon tein pakkauksen http://www.refresh-sf.com/yui/ sivun avulla joka perustuu Yahoon YUI 3 pakkaukseen.  Sivulla on code input kenttä johon css tyylit kopioidaan voit käyttää myös tiedostolatausta tai url tyyppiä saada tyylitiedostot.
Tämän jälkeen valitaan onko kyseessä js vai css tiedostomuoto. Optimoneista voidaan valita vielä hienosäätöjä itse jätin ne default muotoon.

Tämän jälkeen formi tekee pakatun css tyylitiedoston jonka voi kopioda omalle tyylitiedostoon. Itse käytän yhtä style.css nimistä tiedostoa jossa on pakattuna resetointi, text ja erillaiset javascripti plugineihin olevat tyylit. Merkkasin myös pakattujen css tiedostoihin väliin kommentti kentä mikä alkuperäinen css tyyli tiedosto on kyseessä, joka helpottaa navikaatiota jos jotain tyyliä pitää muokata.
Tee samalla myös js versiot.

Etenkin wordpressissä on tärkeätä laittaa tyylitiedostot ja js oikein  ja tähän löysin erinomaisen artikkelin  rensponsiivisien frameworkkien käyttöön tarkoitetun tavan.
Lisäksi normaaleihin themeihin arkittelilöytyy tästä.

Käytännössä avataan function.php tiedosto theme kansiosta ja lisätään wp_enqueue_script muodossa ( huom. foundation grid malli ) tämä siis lisä javat

[php]function responsive_scripts_basic()
{
//register scripts for our theme
wp_register_script(‘foundation-mod’, get_template_directory_uri() . ‘/js/modernizr.foundation.js’, array( ‘jquery’ ), true );
wp_register_script(‘foundation-main’, get_template_directory_uri() . ‘/js/foundation.js’, true );
wp_register_script(‘foundation-app’, get_template_directory_uri() . ‘/js/app.js’, true );
wp_enqueue_script( ‘foundation-mod’ );
wp_enqueue_script( ‘foundation-main’ );
wp_enqueue_script( ‘foundation-app’ );
}
add_action( ‘wp_enqueue_scripts’, ‘responsive_scripts_basic’, 5 );
[/php]

Java tiedostojen jälkeen lisätään itse css tyylitiedostot

[php]function responsive_styles()
{
//register styles for our theme
wp_register_style( ‘foundation-style’, get_template_directory_uri() . ‘/css/foundation.css’, array(), ‘all’ );
wp_register_style( ‘foundation-appstyle’, get_template_directory_uri() . ‘/css/app.css’, array(), ‘all’);
wp_enqueue_style( ‘foundation-style’ );
wp_enqueue_style( ‘foundation-appstyle’ );
}
add_action( ‘wp_enqueue_scripts’, ‘responsive_styles’ );
[/php]

Muista tarkistaa selaimen lähdekoodista että koodi tulostuu oikein.

Nyt ollaan jo päästy hyvään alkuun ja jos tarkastelet nyt lataus aikoja voi huomata huomattavaa eroa.

Seuraavaksi tarkasteluun menee kuvien optimointi, tähän on monenlaisia tapoja joita devaajat käyttävät. Itse pyrin tekemään optimoinnin heti photoshopista exportin jälkeen ja siihen käytän PNG comperssori nimistä ohjelmaa jonka voi ladata apple app storesta hintaan $2.99 joka ei ole pahan hintanen hyvästä ohjelmasta. Etenkin png kuvien pakkaaminen photoshopista on hyvä tapa opetella tekemään automaattisesti.

Sen lisäksi että kuvat pakataan itse desktopilla on myös erinomaisia online pakkaajia kuten http://www.jpegmini.com/ jonka kuvapakkaus laatu on erinomainen.

WordPressiin löytyy hyviä plugin pakkaajia ja itselläni on käytössä  WP Smush.it joka toimii erittäin hyvin media kirjastossa. Kun plugini on aktivoitu klikkaa itsesi  admin paneelin media kirjastoon josta näet ladatut kuva voi helposti massa valinnan avulla Smushata kuvat pienemmäksi muutamalla klikkauksella. Pakkauksen prosettin määrän alkuperäisestä näet kuvan Smush.it kohdasta joka kertoo paljonko tiedosto on pienentynnyt.

Voit tehdä nyt Gtmetrixillä testin ja katsoa mitkä kuvat kaipaavat optimointia vielä.
Omaan tulokseeni sain 02.04.2012 12.4 sekunttia joka oli 1,9 sekunttia parempi kuin alkuperäinen.

Seurvaaksi päätin tutustua CDN (Content delivery network) palveluihin jotka nimensä mukaan lähettävät contenttia eteenpäin. Muutamassa artikkelissa oli mainittuna Cloudflare joka on maksullinen palvelu ja kustantaa 20 dollaria per kuukausi.
Ajattelin kokeilla palvelua kuukauden ja katsoa kuinka paljon se tosiaa nopeuttaa sivujani.

Kun tarkastelee latausaikaa nyt niin erittäin hyödyllinen palvelu, sivun lataus aika on nyt mitattuna lontoosta 4 sekunttia. Teen erillisen artikkelin vielä CND palveluista.

Yhteenveto: Sivuston latausajat ovat pienistä asioista kiinni joita front-end kehittäjän ottaa huomioon se vain vie hieman työaikaa mutta on sen arvoinen toimeenpide.

This entry was posted in Blogi and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>