Etusivun latautumisnopeus/testaus

[teutari]

Etusivun latautuminen on se ratkaiseva tekijä millä nuo vierailijat joko pidetään tai häädetään sivuilta.
Jonkinlainen nyrkkisääntö (sanovat viisaammat) tuohon etusivunlatautumiseen on max. noin 4 sekunttia jonka sivuille tulija vielä jaksaa odottaa mutta jos tuohon aikaan tulee sekuntteja runsaasti lisää niin vierailija melko varmasti häippäisee sivulta pois.

Yksi hyvä etusivun testaamiseen on http://www.webpagetest.org/
Se listaa kaiken etusivulta ja näyttää millisekuntteina kuinka kauan filujen/kuvien latautumiseen oikein vierähtää aikaa joten listasta näkee helposti mitä pitäisi optimoida että etusivun lataus tulisi nopeammaksi.

Sivun foorumilta löytyi myös linkki http://www.punypng.com  jossa pystyy kuvan kokoa pienentämään ilman että sen laatu kärsii.

[weatherc]

Tätä ollaan myös Snowin kanssa viimeiset päivät harrasteltu eli optimointia ja nopeutta lisää.  
Esimerkkinä nwn5:sen testi-sivu sai Firebugin PageSpeed Analyyzerissä alunperin noin 75 pojoa 100:sta. Sinänsä ei huono kun ajattelee että on javascript-härpäkettä ja ikoneita zillioona ja on tuo kartta.
Nooh, pienen säädön jälkeen ollaan 92 pojossa 100:sta  

Tässä pientä listaa mihin kannattaa paneutua jos haluaa nopeutta:
(Firefoxin Firebug ja sen palikka PageSpeed on hyvä testeri näihin)

- requestit palvelimelta. Mitä enemmän, sen hitaamin sivu latautuu. Ja joka ikinen kuva, ikoni, js jne on 1 request.
Vanha nwn-sivu tarvi noin 150 requestiä ja noin 1.2 MB latautuakseen
- cache eli välimuisti, tallenna staattiset filut (kuvat, js:ät, css:ät) selaimen välimuistiin vaikkapa 30 päiväksi, jolloin niitä ei ladata uudestaan jatkuvasti = vähemmän requestejä ja dataa.
- pakkaa css ja js-filut, esim, js-filujen koko pinenee neljännekseen hujauksessa
- zillioonan ikonin sijasta käytä css-spritejä eli iso kuva jossa monta ikonia josta sitten näytetään haluttu css:llä.
- lataa kuvat, js:ät ja css:ät eri subdomainista, tällöin saat enemmän yhteyksiä palvelimelle koska selain osaa avata vain x määrä yhteyksiä per domain.
Tämän jälkeen tippui uuden nwn5-sivun requestien määrä uudelleenlataessa niin että nyt on 17 requestiä ja uutta dataa haetaan vain 70 KB.

Mitä ollaan tehty Snowin kanssa dedillä hänen sivulla sekä nwn5-sivulla:
- kuvat, css:ät ja js.ät tulevat kaikki eri subdomaineilta, näille asetettiin myös Nginx:ssä omat cache-ajat (30 vrk). Juju tässä on se että ne kuvat jotka vaihtuvat usein tulevat www:stä ja "ei-muuttuvat" vaikka static:sta.
- css ja js-filut toimitetaan myös pakattuna Nginxin toimesta (koskee kaikkia dediläisiä)
- css-spritet, 99% kuvista ja ikoneista (paitsi kartan ikonit) nwn5-sivulla tulee nytten yhteensä 5:stä isosta kuvasta. Nämä kun ovat selaimen välimuistissa niitä ei täten ladata.
- php-cache, kokeilussa 20 sekunnin cache-aika php-sivuille omalla ja snowin sivulla. Tämä ei häiritse ajax:lla päivittyviä reaaliaikaisia tietoja.

[Snowi]

Ollaan vähän weatherc:n kanssa viime päivinä juuri näitä asioita säädetty ja pakko sanoa, että hyvin saa aikaa kulumaan näihinkin hommiin  . Yllättävän iso homma on ollut, varsinkin css spritejen kanssa, mutta kyllä se ehdottomasti kannattaa. Mulla tulee nyt oikeestaan kaikki sivuston kuvat css spritejen kautta. Esimerkiksi wxsim-ennusteen requestit tippui 89:sta 33:een, ero on siis huima. Sivun latautuminenkin nopeutui huomattavasti.
Tein kolme subdomainia dedille ja weatherc laittoi niille nginxiin 30 päivän cachet ja filut myös pakataan samalla, joten filujen koot tippuivat aika mukavasti, sekä sivun latausnopeus nopeutui selvästi cachen ansiosta.

Firebugin PageSpeedin tulokset nousivat huimasti operaation ansiosta. Nyt oman sivuston lähes kaikki sivut vetää yli 90 pojon pisteitä, kun 100 on maksimi  . Muutama sivu jää vielä alle 90 pojon. Muutama puolestaa vetää jopa 95 pojoa  . Firebugin mukaan enää oikeestaan pitäisi saada noi 5-7 eri js-skriptiä samaan pakettiin, mutta ne on kuitenkin helpompi pitää erillään, joten en ole lähtenyt niitä yhdistämään. Toinen mitä se valittaa on sivuston "tyylikuvat" eli kaikenlaiset pikkuvarjot ja moniväriset taustat, nämä kuvat ovat aina tyyliin 1px leveitä ja sitten sen korkuisia mitä tarvii olla ja repeattina "maalaa" vaikka valikon, nämä firebug haluaisi myös css spriteiksi ja sitä jo kokeilinkin, mutta ei onnistunut tolla perinteisellä tavalla, joten pitää katsoa sitä myöhemmin vähän tarkemmin.

Tein myös sivuston läpikäymisen validoinnin osalta, mutta aika hyvin oli viime vuotinen validointi vielä voimassa, sillä sen verran hyvin sivut läpäisivät testin, mutta oli siellä myös jonkun verran korjattavaa, nyt näiden erilaisten säätöjen osalta mitä on tullut viime päivinä tehtyä. Nyt lähes jokainen sivu läpäisee testin, mutta css:n osalta testiä ei näytä läpäisevän Jquery UI:n tabsit, mutta tälle asialle ei nyt vaan voi mitään. Eli validointikin kannattaa samalla katsoa kun ryhtyy sivuston kevätremonttiin  

[Naruskan Ukka Matinpoika]

Ukkakin on kehittynyt tässä hommassa. Osaan kymmenen kertaa nuo edellä kirjoitetut kolme viestiä luettuani lukea ne takeltelematta ääneen. Sisällöstä en vielä ymmärrä mitään, mutta omaan kehityskelpoisuuteeni luotan kuin jäävuoreen.

Laitoin asiaa koskevan linkin tähän keksusteluketjuun pureskeltavaksi Keminmaalle, missä vävypoikani operoi pikkuyritykseni kotisivujen kanssa. En minä sillä tätä linkkiä lähettänyt, etteivätkö kotisivuni suhteellisen sukkelastai avautuisi, mutta ajan hermolla ja reessä on pysyttävä, vaikka heppa hiittaisi minkälaiseen juoksuun.

Tosipuheessa näitä tietokoneviisauksia lukiessa Ukan on tosi vaikea peilin edessä itselleen sanoa, että kyllä sinä Ukka olet noissa tietokoneasioissa viisas mies. Mutta sanon kuitenkin. Eri asia on, uskonko omaa puhettanikaan...

[Snowi]

Sain tälläiset tulokset etusivulle WebPagetestista:
First View: 1.999s, 20 Requests, 138 KB
Repeat View: 0.647s, 5 Requests, 6 KB

Aika mukava tulos varsinkin Repeat Viewin eli toisen katselukerran osalta. Requesteja vain 5 ja sivun koko vain 6KB  . Ihmekään että lataantuu itselle aivan samalan nopeasti. Miniläppärillä sivu avautuu myöskin erittäin nopeasti, vaikka tehoa siinä ei ole muuhuin kuin surffaamiseen. Miniläppärillä IE7:n kanssa sivu latautuu myöskin aika mukavasti, kun taas hs.fi:n latautuminen kesti aivan käsittämättömän kanssa, on tuo IE7 kyllä jotenkin erittäin hidas selain. Muilla uudemmilla selaimilla latautui oma sivusto erittäin nopeasti ja hs.fi myöskin aika mukavasti.

Isoin osa mulla etusivulla on tuo yläosassa oleva kuva, jonka koko oli noin 78kb:ta, mutta PunyPNG:n avulla tippui 3kb:ta  . Yläkuvan kokoa saisi helposti tiputettua vaikka 30kb:ta, kuvan mitenkään kauheasti siitä kärsien, mutta haluan sen olevan kristallinkirkas ja eikä kuvalla ole enää mitään väliä toisella klikkauksella 

[Snowi]

Tarkemmin jos selittää kaikkia näitä juttuja mitä tässä viestiketjussa on ollut niin ne menee suurinpiirtein näin:

Requestit tarkoittavat kaikkea yksittäistä osaa, jota sivusto lataa, esimerkiksi jokainen yksittäinen kuva on yksi request, kuten myös kaikki css- ja javascript filut. Requestien saaminen minimiin on erittäin tärkeää, se on tärkeämpää kuin sivuston koon tiputtaminen.

Css spritet ovat loistava apu request määrien tiputtamisessa, varsinkin jos on sellainen sivu kuin meillä on wxsim-sääennusteen sivu, jossa on monta yksittäistä kuvaa. Homma toimii niin, että tehdään vaikka vain yksi yksittäinen kuva, johon tulee kaikki ne kuvat, joita sivustolla tarvitset. Css:n avulla positionia käyttäen saadaan sitten tästä yhdestä kuvasta haettua se oikea kuva oikeeseen paikkaan. Tässä on yksi esimerkkisivusto css spriteistä Klik!. Siinä on heti alla yksi kuva, jossa on laitettu kaikki pienet kuvat yhteen kuvaan. Css-tyylien avulla tästä yhdestä kuvasta sitten haetaan oikeat kuvat.
Tässä on weatherc:n löytämä loistava css sprite generaattori http://css-sprit.es/. Tässä on myös toinen loistava generaattori http://spritegen.website-performance.org/
Generaattorit tekevät css-tiedoston sinulle automaattisesti, joten se helpottaa työtä aivan älyttömästi.

Cache eli välimuisti taas toimii siten, että tiedosto, esimerkiksi jokin kuva tai javascript tiedosto noudetaan automaattisesti välimuistista aina kun kävijä klikkaa sivua, jonka tiedostot tulevat välimuistista. Täten näitä cachefiluja ei tarvitse aina ladata uudestaan ja se nopeuttaa sivuston toimintaa selvästi.
Meidän tilanteessa weatherc hoitaa tämän homman. Itse olen esimerkiksi tehnyt kolme subdomainia, esimerkiksi minun kuvat tulee subdomainista http://img.klaukkala-saa.fi. Subdomainin pystyin tekemään helposti serverin Plesk-hallintapaneelin kautta. Kun olin subdomainit tehnyt, laittoi weatherc tälle subdomainille 30 päivän cachen, eikä siten mitään tiedostoja tältä subdomainilta ladata ainakaan 30 päivään, paitsi tietty uusi kävijä lataa aina kaiken, koska ei ole sivustolla ennen käynyt. Serverin nginx vielä pakkaa nämä filut, joten niiden koot pienenee ja jälleen sivustonlataus nopeutuu 

Firefoxin Firebug on Firefoxin pikkulisäosa, jolla voit näppärästi katsoa esimerkiksi sivuston koodia jne. Firebugin lisäosa PageSpeed on sitten tämä sivustotesteri, jonka tuloksista me puhuimme. Sen antaman palautteen perusteella pystyy näppärästi optimoimaan sivuston niin, että se toimisi mahdollisimman nopeasti. Itse kuulin tästä loistavasti lisäosasta weatherc:lta ja pakko sanoa, että menee aivan sinne kärkeen näissä hommissa  . Firebugin voit hakea vaikka tästä http://getfirebug.com/downloads

Sivuston validointi puolestaan hoidetaan näiden linkkien avulla: HTML tämän kautta http://validator.w3.org/ ja CSS tämän kautta http://jigsaw.w3.org/css-validator/

[Naruskan Ukka Matinpoika]

Ukka kiittää suomennoksesta. Toivottavasti en saa häirikön titteliä, kun paljastelen täällä tyhmyyttäni. Keräilen tiedonjyväsiä, vaikken tiedä, saanko säkkiäni koskaan täyteen. 

[Snowi]

Ukka kiittää suomennoksesta. Toivottavasti en saa häirikön titteliä, kun paljastelen täällä tyhmyyttäni. Keräilen tiedonjyväsiä, vaikken tiedä, saanko säkkiäni koskaan täyteen. 

Et todellakaan saa mitään häirikön titteliä vaan aina on hyvä kysyä jos ei jostakin asiasta niin hyvin tiedä. Itsekin olen oppinut tämän asian tiimoilta uutta asiaa, kun on tullut tässä viime päivät tehtyä oikeestaan pelkästään sivuston optimointia 

Piti vielä noista subdomaineista sanoa, että niiden idea on juuri tuo mitä weather sanoi, eli tavallaan huijataan selainta avaamaan kaksi tai kolme yhteyttä samaan aikaan serverille, kun muussa tapauksessa avattaisiin vain yksi. Parilla kolmella subdomainilla selain alkaa lataamaan tiedostoja samaan aikaan useammalta domainilta ja näin säästetään taas vähän aikaa.
Yahoo on tehnyt asian tiimoilta tutkimuksia ja kuulemma paras määrä subdomaineja on 2-3, eli liika on tässäkin liikaa ja eikä enää nopeusetua kuulemma saavuteta liian suurella määrällä domaineja. Toisessa tutkimuksessa kolmella subdomainilla saavutettiin jopa 40% hyöty nopeudessa ilmeisesti verrattuna vain yhteen domainiin.

[weatherc]

Juu, alkaa menemään rakettitieteen puolelle kun aletaan viilamaan mikrosekunteja kuten näissä tapauksissa
Ei enää ladata ikoneita yksitellen vaan klönttinä ja pakataan filut "laatikkoon pienempään tilaan eli gzippiin" ja muuta hubaa.

Mutta, tässä kun tuota Firebugia on kiusannut nwn5:sen tiimoilta sekä ovikartalla että vanhalla Googlekartalla niin ei edes "netin kaikkivaltias" Google ole täydellinen. Sen karttafilut saa Firebugissa sapiskaa, kun ei ole pakattu ja on liian monta filua ja niin edelleen, mitä täytyy sanoa että on kyllä vähän outoa. PageSpeedhan on Googlen perua. Tosin sama pätee ovinkin filuilla.

Mutta täytyy kyllä sanoa että kyllä ovat sen ohjeet nopeuttanut sivujen latautumista ettei ne ihan huuhaata ole. Tosin kuten Snowinkin mainitsi, ihan raamattuna niitä ohjeita ei kannata pitää, järki saa pysyä mukana siinäkin. Mullekin se ehdottaa jQuery-filujen yhdistämistä, siitähän tulisi aivan hermoton jos niin tekisin. Ja, mitä tekee koodilla kaikilla sivuilla jota tarvii vaan yhdellä?
Eikä ihan kaikkia kuvia kannata puskea spriteksi, esim taustakuvat jossa repeat ei edes toimi spritenä. Itse tein spritet sellaisita ikoneista jota tarvitaan usein tai on monta samalla sivulla kuten nwn-sivu. wxsim-ennuste uupuu vielä kokonaan.

[Snowi]

Joo ei Firebugiinkaan kannata uskoa kuin raamattuun  . Paras tapa on ajaa omaa sivustoa erilaisten testereitten läpi, mutta hämäräsivustojen analysaattoreihin ei kannata sivujansa pistää, jotta ei joudu esimerkiksi roskapostilistalle tai muuta vastaavaa.

Itsekin pistin spriteiksi vain sellaiset kuvat, joita on paljon yhdellä sivulla. Eli lähinnä wxsim ja yr.no sääennusteiden ikonit ja niitäkään en pistänyt kaikkia samaan, vaan yr.no:lle tietenkin oma kuva ja wxsimin osalta pistin isot, pienet, nuoli- ja numerokuvat omiin kuviinsa, jotta niitä olisi tarvittaessa helpompi muokata jos tarvetta sille tulee. Vielä pitäisi pistää kuu ja aurinko sivun ikonit spriteksi, sillä niitä on sillä sivulla jonkun verran. Muille sivuille en spritejä tehnyt, vaan esim. info-sivun kuvatkin tulee ihan yksittäisinä kuvina cachesta.