Uudelleen formatoituna ja postattuna, yhdistin viestini yhdeksi artikkeliksi.
Niin no... http://validator.w3.org/check?uri=http%3A%2F%2Foff-the-record.appspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Kieltämättä aika mielenkiintoista, että puolet virheistä oli noiden leikkaa ja liimaa laajennusten aiheuttamia. Esim.
Google Analytics ja
AddThis.
Myös suoraan
Google Sites palveluun Wikinä toteutetut kotisivuni
eivät läpäise testiä. Huomatuksena voisin sanoa että Google Sites palvelussa en pysty mitenkään vaikuttamaan sivujen HTML rakenteeseen. Kaikki tulee suoraan WYSIWYGINÄ kun naputtelen tekstin sivuille. Tästä herää suuri kysymys, onko Googlen porukka epäpätevää vai onko validaattori päässyt vanhentumaan? Mainittakoon että myös
www.google.com ei läpäise testiä.
Mielestäni validaattorin voi ainakin jollain tasolla kyseenalaistaa. Tarkistin ~20 suosittua sivustoa sillä, eikä yksikään mennyt läpi tarkastuksesta virheittä.
OTR sivusto on myös testattu Firefoxilla, Skyfirellä, Opera Minillä, S60 OSS Browserilla, Operalla, Internet Explorer 8:lla ja on toiminut kaikilla moitteitta, kuten on tarkoitus. Myös käyttämäni formi kikkailu jossa sivu skaalataan sopivaksi ruudulle myös pystysuunnassa on toiminut. Vaikka se ei välttämättä ole standardein mahdollinen ratkaisu. CSS:n puolelta voisi löytyä paljon korrektimpi vaihtoehto nykyaikana.
Toisaalta erilaiset layout kikkailut sotivat perusajatustani vastaan. Mitä yksinkertaisempaa ja selkeämpää, sitä parempaa. Turhat CSS ja flash pelleilyt ja muut roskat pois ja sivustojen selkeys, nopeus ja käytettävyys paranee usein olennaisesti. Valitettavasti nykyinen kehityssuunta webin suhteen tuntuu johtavan johonkin aivan muualle.
Voisin joskus tuunata periaatteen vuoksi tuo sivuston kuntoon. Joskin se vaatisi ylitsepursuavaa pilkuviilaus energiaa.
Kotisivullani muotoilu on aikalailla hassua Googlen toimesta. S60 browserilla (3rd edition) sivusto näkyy siten, että vasen menu on normaalikokoinen ja sitten oikealla puolella oleva teksti rivittyy todella lyhyiksi riveiksi. Sivusta tulee erittäin pitkä ja usein riville mahtuu vain yksi sana. Mobiili päätteitä varten pitäisi suosilla tehdä oma
XHTML MP sivusto. mm. Yahoo näyttää kunnostautuneen tämän asian osalta. Useimmista palveluista löytyy erinomaiset XHTML MP versiot.
Löysin sivuston joka on suosittu ja menee läpi tarkistuksesta. Se on
Wikipedia. Epäilinkin, että tuolla porukalla voisi olla sitä tarvittavaa pilkuviilaus energiaa tarvittavissa määrin. Joskin tuo sivu johon tässä viittasin, ei mene läpi varoituksitta. Mutta englanninkielinen etusivu menee.
OTR sivustolla taustakuva ja logo ovat todellakin tarpeettoman raskaita. Ne voisi korvata kevyemmällä mustalla taustalla ja tiukasti pakatulla JPEG logolla. Nykyiset graafiset komponentit ovat PNG muodossa. Myös bittejä on turhan paljon käytössä / pikseli, jos viilaamaan ruvetaan. Tiedostan kuvien olevan isoja ja siksi olen asettanut niille vuoden TTL:n. Mikäli tietoja ei poisteta selaimen välimuistista, ei kyseisiä kuvia tarvitse ladata uudelleen tai edes tarkistaa ovatko ne päivittyneet. Jos muutan kuvia olennaisesti julkaisen uudella osoitteella.
Huviskeen voisi katsoa kuinka monella web-sivustolla jokaisen komponentin cache parametrit mm. TTL on asetettu järkevästi ja tarjotaanko myös etag:ia, onko http:n kanssa gzip/deflate pakkaus käytössä, onko tukea keep-alivelle ja pipeliningille. Sekä tietysti mikäli sivustolla käytetään käyttäjätunnuksia ja salasanoja pitäisi HTTPS olla jatkuvasti käytössä. Samalla voi tarkistaa onko SSL session resume / cache käytössä. Jos ei ole, suorituskyky laskee olennaisesti.
Mitä tuli vielä tuohon ettei mene validaattorista läpi, niin mainittakoon että sentään merkistöt toimivat moitteitta sivustolla.
Olen törmännyt viimeaikoina useisiin Web-sivustoihin joissa merkistöt on pielessä. mm.
http://www.sofia.fi/ Kun vaihdat selaimen oletusmerkistön joksikin kummalliseksi, alat huomaamaan pian että monilla sivustoilla merkistöasiat eivät ole kunnossa. Käytettävä merkistö pitäisi aina ilmoittaa.
http://www.huuto.net/ palvelussa on myös vastaavia ongelmia.
JavaScriptin kanssa ei tietenkään ole mitään ongelmia eri selaimilla, eihän. Aika epäkiitollisena voisin tuota hommaa pitää.
http://www.jumbofiles.com/ download ei toimi Chromella tai Operalla.
Niin no... http://validator.w3.org/check?uri=http%3A%2F%2Foff-the-record.appspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Totta se turisee, ei mene läpi validoinnista mutta toimii kaikilla testaamillani selaimilla mainiosti. Kotin äsken laittaa sivuston kuntoon ja korjata tuon taulukoon perustuvan virityksen CSS:llä. Noin kahden tunnin manaamisen jälkeen totesin että ei taida olla vaivan arvoista. Pitänee yrittää myöhemmin uudelleen. Näyttää siltä että CSS ihmiset tekevät juuri sen perusvirheen, eli tekevät sivuston aina jollekkin tietylle pikseli korkeudele tai leveydelle. Henkilökhotaisesti pidän tuota suunnitteluvirheenä. Oikein tehty sivusto muovautuu erilaisille näytöille aivan hyvin. Optimi tilanteessa sivustosta on vielä eri versiot riippuen käytettävästä selaimesta.
Verkkosivustoja testaavia palveluita on verkko pullollaan:
http://www.webpagetest.org/result/100411_6W5K/1/performance_optimization/Juuri mainitsemani etagit ja cache-expiret puuttuvat aika monelta komponentilta. CDN jakelu staattiselle sisällölle puuttuu. Koska TTL / expire arvot eivät ole kunnossa, tulee turhia kyselyitä staattiseen sisältöön koska selain ei tiedetä onko sisältö muuttunut vai ei.
Mutta muuten tuo
http://www.webpagetest.org/ on kyllä mainio palvelu. Tuosta ETagin käytöstä on useita mielipiteitä. Riippuu nimittäin taas palvelinalustasta toimiiko ETag hyvin. Optimi tilanteessa revalidointi aika on ilmoitettu. Tai vaihtoehtoisesti ETag on olemassa. Mutta jotkut suosittelee että ETagia ei käytetä, koska ETagin generointi on usein serveri kohtaista ja klusteroidussa ratkaisussa tämä voi johtaa turhiin uudelleen latauksiin. Staattisen sisällön kanssa siis ei kannattaisi käyttää ETagia vaan riittävän pitkää TTL / revalidate / expire aikaa ja kokonaan uutta polkua jos sisältö muuttuu. Tietysti ratkaisusta riippuen ETag voidaan järjestää samaksi myös klusteroidussa ratkaisussa jolloin sen käyttö on suositeltavaa myös expiren lisäksi. Tämä tilanteissa joissa ei voida ennakoida sisällön päivittymistä ja refreshiä ei voi tehdä järkevästi esim. 5 minuutin välein.
Lopuksi pakko todeta, että kaiken kuntoon sätämisessä ja laittamisessa on ihan uskomattomasti duunia. Olisi hauska nähdä tilastoja, onko edes 1% web-sivustoista ns. hyvässä kunnossa. Todennäköisesti ei ole. Useimmat eivät tiedä, eivätkä ymmärrä ja nekin jotka tietää, niin eivät todennäköisesti välitä.
Ja hyvää välipalaa iltalukemiseksi:
http://developer.yahoo.com/performance/rules.htmlPalataanko sitten sovelluskehitykseen ja GAE alustasta keskustelemiseen HTTP/HTML/CSS/JS aiheen sijasta. Niistä on nimittäin pitkät turinat monessa foorumissa.
P.S. Jos jostain löytyy referenssi miten body-tagin stylellä saa koko sivun sisällön keskitettyä sen kuten se on nyt keskitettynä taulukkoa käyttäen, niin otan mielelläni vastaan. Se on myös syy miksi DOCTYPE määrittely puuttuu OTR sivustolta. Jos lisään doctypen sinne, nykyinen table height="90%" valign="middle" ratkaisu lakkaa toimimasta. Kaikki validaattorin ilmoittamat virheet on korjattu, poislukien tuo puute ja "plugin" komponenttien tuomat virheet.