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ö.