Miksi ammattilaisten nettisivut ovat niin paskoja?

[love_doctor]

Yritän vielä teroittaa pointtiani:
Saitti lataa ensilatauksella 7 megatavua tavaraa 150:llä http kutsulla. Sinä keskityt renderöintikirjastoon ja CSS kirjastoon, joka kokonaisuudessa on 200 kilotavua (joka oikein käytettynä tippunee pariin kymmeneen kilotavuun tai alle). Mielestäni näyttää siltä ettet näe metsää puilta, tässä kontekstissa renderöintikirjasto on täysin yhdentekevä, kuin myös käytetty CSS kirjasto.

EDIT:
Mikro-optimointi voi olla kivaa, mutta useimmissa (yli 99 % tapauksista) sovelluksissa se on täysin yhdentekevää.

Otin ihan yleisesti kantaa Tailwindiin. Se on raskas silloin kun uudelleensiirrettävän datan määrä alkaa olla merkittävä suhteessa muuhun sisältöön. Tuo hesarin sivu oli vaan esimerkkinä sivusta, jossa sitä oli. Jos vaikka menen hesarin sivulle uudestaan, kaikki se muu 7 megaa voi tulla cachesta, mutta inline-css ei välttämättä, jos etusivulla muuttuu yksikin pieni palikka sisällössä. Eli silloin sen css:n osuus siitä uudelleenlatauksesta kasvaa huomattavasti. On paljon pieniä alisivuja eri sivustoilla, jossa joku 200 kB tyyliä olisi jo valtava pommi. Tietenkään se ei nykyään välttämättä tuntuisi kovin hitaalta, kun muu sivun on niin kevyt. Tässäkin on kaksi näkökulmaa - yksittäisen sivulatauksen näkökulmasta modernilla päätelaitteella ei välttämättä vaikuta latausaikaan, mutta jos jollain on vanha laite tai katotaan kokonaisuutena verkkoliikenteen kasvua vaikka miljoonalla sivulatauksella, niin vaikutus kertautuu. Toki tällaisetkin voi ampua alas vaan kun toteaa, että kaista on nykyään niin halpaa ja liittymät nopeita, että ei millään ole mitään väliä.

 

[kolistelija]

Otin ihan yleisesti kantaa Tailwindiin. Se on raskas silloin kun uudelleensiirrettävän datan määrä alkaa olla merkittävä suhteessa muuhun sisältöön. Tuo hesarin sivu oli vaan esimerkkinä sivusta, jossa sitä oli. Jos vaikka menen hesarin sivulle uudestaan, kaikki se muu 7 megaa voi tulla cachesta, mutta inline-css ei välttämättä, jos etusivulla muuttuu yksikin pieni palikka sisällössä. Eli silloin sen css:n osuus siitä uudelleenlatauksesta kasvaa huomattavasti. On paljon pieniä alisivuja eri sivustoilla, jossa joku 200 kB tyyliä olisi jo valtava pommi. Tietenkään se ei nykyään välttämättä tuntuisi kovin hitaalta, kun muu sivun on niin kevyt. Tässäkin on kaksi näkökulmaa - yksittäisen sivulatauksen näkökulmasta modernilla päätelaitteella ei välttämättä vaikuta latausaikaan, mutta jos jollain on vanha laite tai katotaan kokonaisuutena verkkoliikenteen kasvua vaikka miljoonalla sivulatauksella, niin vaikutus kertautuu. Toki tällaisetkin voi ampua alas vaan kun toteaa, että kaista on nykyään niin halpaa ja liittymät nopeita, että ei millään ole mitään väliä.

Ohitit vielä kätevästi sen että Tailwind oikein käytettynä ei ole 200 kilotavun pala, vaan hyvin tehtynä alle reilusti 10 kilotavua tai ehkä 20 kilotavua jos sivulla on monimutkaiset tyylit.

 

[Paapaa]

Se on raskas silloin kun uudelleensiirrettävän datan määrä alkaa olla merkittävä suhteessa muuhun sisältöön.

No kun ei ole raskas. Tailwind bundlaa mukaan vain sen mitä käytetään ja se siirretään pakattuna. Puhutaan tyypillisesti kilotavujen tai pahimmillaan muutaman kymmenen kilotavua dataa. Sinne ei tule käyttämättömiä tyylejä/luokkia. Ja jos joku käyttäisi leijonanosan Tailwindin luokista, joutuisi hän ilman Tailwindiä myös käyttämään hirmu määrän tyylimäärittelyjä. Tailwind ei tee mitään maagista, vaan on vain kokoelma järkevästi niputettuja atomisia luokkia.

Sä keksit nyt ihan hatusta ongelmia joita ei missään ole. Ei myöskään HS:llä. Keskity oleelliseen. Tailwind ei ole mikään ongelma ja sulla on jäänyt levy päälle sen suhteen. Veikkaan, ettei sulla ole kokemusta Tailwindistä ja siksi sulla on siitä väärä käsitys.

 

[Sompi]

Vaikka JavaScript ei olekaan ns. tehokas kieli siinä mielessä kuin vaikka C, niin nykyselainten JavaScript-tulkit ovat kuitenkin erittäin hyvin optimoituja ja melko suurikin määrä JavaScript-koodia kääntyy tavukoodiksi hyvinkin kohtuullisessa ajassa. Myös se tavukoodin ajaminen on hyvin optimoitua. JavaScript on korkean tason kieli, jolla voi melko pienellä määrällä koodia tehdä hyvinkin monimutkaisia asioita ja nopeuttaa sivun käyttökokemusta merkittävästi esim. päivittämällä sivun sisältöä dynaamisesti sen sijaan, että lataisi aina koko sivun uudestaan.

Jostain syystä kuitenkin alalla näyttää nykyään olevan paljon koodareita, joilta tuollainen JavaScriptin käyttö järkevästi ei vain onnistu. Sen sijaan he luovat nettisivuja, joilla ei ole yhtäkään toiminnallisuutta, joka varsinaisesti tarvitsisi JavaScriptiä (ei edes mitään dynaamisesti latautuvaa sisältöä) mutta silti sivulle on jotenkin onnistuttu ahtamaan useita megatavuja minifoitua JavaScriptiä, joka minifoimattomana olisi mitä todennäköisimmin vähintään 20-kertainen määrä koodia. Se on monta kertaa enemmän kuin vaikkapa alkuperäisen Doomin lähdekoodi, ja siitä on tullut nykywebissä uusi normaali. Lisäksi tuollainen määrä JavaScriptiä alkaa olla jo oikeasti hidasta kääntää ja ajaa melko tehokkaillakin tietokoneilla.

Ylenmääräinen JavaScript-kirjastojen käyttö on myös vakava tietoturvariski. Kirjoitan tästä taas, vaikka aiempien kokemusten perusteella aiheesta keskustelu onkin täällä foorumilla kielletty kirjoittamattomissa säännöissä ja johtaa helposti kuukauden porttikieltoon. Harva oikeasti tietää, mitä kaikkea joku megatavujen kokoinen paketti jotain minifoitua JavaScriptiä tekee. Juuri äskettäin suositussa Polyfill-kirjastossa oli toimitusketjuhyökkäys, joka kosketti useita nettisivuja: Polyfill[.]io Attack Impacts Over 380,000 Hosts, Including Major Companies

On todennäköistä, että vihamielistä koodia on suosituissa JavaScript-kirjastoissa enemmänkin ja paljastuvat tapaukset ovat vain jäävuoren huippu.

Lähitapiolan nettisivut näyttävät olevan nykyaikatyyliin tehty päin helvettiä. Sekä SeaMonkeyllä että Firefoxilla selaimen konsoli tulee täyteen JavaScript-virheitä. Firefoxilla sivu ehkä renderöityy vähän vähemmän väärin. Latausajat ovat kuitenkin pitkiä ja elementit vilkkuvat ja hakevat paikkaansa. HD-resoluutioisella näytöllä sivut ovat hankala selata, kun selaimen viewportissa näkyy niin vähän informaatiota. Pitäisi ilmeisesti olla isompi näyttö.

 

[asentaja1]

Kyllä on Nettiauton sivutkin osattu paskoa melko perusteellisesti. Aikaisemmat sivut olivat hyvät ja selkeät, oli koko ruutu tehokkaassa käytössä, hyvin maltillinen määrä ylimääräisyyksiä/mainoksia ja nekin hyvin sivuston reunoilla häiriten minimaalisesti. Oli selkeä hakupalkki sivun oikeassa reunassa ja hakutuloksia avautui sivun täydeltä, kun avasi jonkun hakutuloksista, avautui kokoilmoitus selkeästi heti näkyviin. Hakupalkki oli sen lisäksi koko ajan siinä sivun reunassa nähtävillä valmiina ja oli helppo siitä säärää hakuspeksejä sopivammaksi. Nyt on mm nämäkin kaikki ominaisuudet saatu toimimattomaksi tai piilotettua näkyvistä.

Nykytilanteessa: Etusivu on kokonaan pääosin valkoinen, puolikkaan ruudun kokoinen turha banneri yläreunassa, hakusivulla näkyy vain jokunen hassu tulos kerrallaan ja saa scrollata valtavasti ja painaa seuraavaa sivua tuon tuostakin. Ja kun sitten jonkun sivun klikkaa auki, tulee siitä vain yläosa näkyviin ilman scrollausta. Jos hakua pitää täsmentää, on etsittävä hakunappi uudestaan ja sitten hitaasti avautuvasta (hyvin hankalasta ja monimutkaisesta) hakusivusta on taas scrollattava haluttu kohta esille.

Hyvästä ja toimivasta sivustosta on saatu erittäin vastenmielinen ja hankala käyttää, nämä nyt vaan ihan ensimmäisiä esimerkkejä. Ennen tuota sivua saattoi päivittäin surffata ajankuluksi töissä, nyt ei kyllä vapaaehtoisesti tuota käytä sekuntiakaan jos ei ihan hirveä tarve ole.
Käyttöliittymän käytettävyys on aivan tuntematon käsite tämän suorituksen tehneille. Täysin tarpeeton uudistus vain uudistamisen takia, korjattu asiaa, mikä ei ollut rikki alunperinkään.


Nämä screenshotit on adblockerin takaa, mutta se ei sinänsä layouttiin vaikuttanut mitenkään, muutama vilkkubanneri tulee lisää kun ottaa sen pois päältä.

 

[Paapaa]

Etusivu on kokonaan pääosin valkoinen, puolikkaan ruudun kokoinen turha banneri yläreunassa

Siellä on tosiaan valtava täysin tyhjä elementti sivulla (luokka "huge-banner"), jolle määritelty vähintään 400px korkeutta sisällöstä riippumatta. Sama tyhjä elementti niin etusivulla kuin jos avaat jonkun ilmoituksen. Joko bugi tai sitten tuo on terkoitus täyttää esim. mainoksilla ja mainosten lataaminen ei toimi tms. Veikkaan, että se ei vielä siis näytä lopulliselta.

Ja kannattaa antaa sivustolle palautetta. Järkevät palvelut ihan oikeasti ovat kiinnostuneita käyttäjäpalautteesta ja niihin halutaan reagoida joissain raameissa.