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.

 

[Sompi]

EU-direktiivin 2016/2102 37. artikla vaatii tekemään julkisen sektorin nettisivuista selainriippumattomia: Directive - 2016/2102 - EN - EUR-Lex

Jostain syystä tätä ei kuitenkaan Suomessa missään noudateta. Asiat menevät jatkuvasti huonompaan suuntaan. Finlexin vanha versio toimii kaikilla selaimilla, mutta uusi vaatii joko Chromen tai uusimman Firefoxin. Kehitys on samansuuntaista joka paikassa ja saavutettavuus huononee jatkuvasti. Sitten saavutettavuusselosteessa mainitaan ongelmista ja luvataan korjata ne joskus tulevaisuudessa.

Traficomin sivuilla viimeisimmät määräykset ovat niin monen JavaScript-dropdownin takana, että edes Google ei osaa niitä indeksoida sieltä enää.

Ei tämän asian nyt oikeasti pitäisi olla kovin hankalaa ammatikseen web-sivuja kehittäville.

 

[kolistelija]

EU-direktiivin 2016/2102 37. artikla vaatii tekemään julkisen sektorin nettisivuista selainriippumattomia: Directive - 2016/2102 - EN - EUR-Lex

Jostain syystä tätä ei kuitenkaan Suomessa missään noudateta. Asiat menevät jatkuvasti huonompaan suuntaan. Finlexin vanha versio toimii kaikilla selaimilla, mutta uusi vaatii joko Chromen tai uusimman Firefoxin. Kehitys on samansuuntaista joka paikassa ja saavutettavuus huononee jatkuvasti. Sitten saavutettavuusselosteessa mainitaan ongelmista ja luvataan korjata ne joskus tulevaisuudessa.

Traficomin sivuilla viimeisimmät määräykset ovat niin monen JavaScript-dropdownin takana, että edes Google ei osaa niitä indeksoida sieltä enää.

Ei tämän asian nyt oikeasti pitäisi olla kovin hankalaa ammatikseen web-sivuja kehittäville.

Aika pitkä dokumentti. Saisiko jonkun viittauksen kohtaan joka mainitsee millaisia selaimia pitäisi tukea ja kuinka laajalla festuresetillä?

 

[qtba]

Asiakirjassa ei ole suoraa mainintaa selainriippumattomuudesta. Asiakirjan pääpaino on julkisen sektorin verkkosivustojen ja mobiilisovellusten esteettömyyden parantamisessa, erityisesti vammaisille henkilöille.

Asiakirja korostaa, että verkkosivustojen ja mobiilisovellusten tulisi olla havaittavissa, käytettävissä, ymmärrettävissä ja vankkoja. Nämä periaatteet on käännetty testattaviksi kriteereiksi, jotka on kuvattu eurooppalaisessa standardissa EN 301 549 V1.1.2. Standardi määrittelee toiminnalliset esteettömyysvaatimukset ICT-tuotteille ja -palveluille, mukaan lukien verkkosisältö.

Vaikka selainriippumattomuutta ei mainita erikseen, vankkuuden periaate viittaa siihen, että sisällön tulisi olla riittävän vankka tulkitaan luotettavasti useilla eri selainohjelmilla, mukaan lukien apuvälineteknologiat. Tämä viittaa epäsuorasti selainriippumattomuuden tärkeyteen esteettömyyden kannalta.

Asiakirja kannustaa myös teknologianeutraaliuteen, mikä tarkoittaa, että esteettömyysvaatimukset eivät määrää tietyn teknologian käyttöä. Tämä mahdollistaisi sen, että verkkosivustot ja mobiilisovellukset voitaisiin toteuttaa eri teknologioilla, kunhan ne täyttävät asetetut esteettömyysvaatimukset.

On kuitenkin tärkeää huomata, että asiakirja keskittyy ensisijaisesti julkisen sektorin verkkosivustoihin ja mobiilisovelluksiin. Se ei anna suoria ohjeita selainriippumattomuudesta yleisesti.

-------

Tuollaista NotebookLM kaivoi dokumentista, en myöskään jaksanut itse sitä lukea.

 

[Sompi]

Englanninkielinen versio on kirjoitettu niin, että aika selvästi tarkoitetaan selainriippumattomuutta. Valitettavasti suomenkielinen käännös on tehty aika huonosti.

 

[Sompi]

Aiemmin advokoin aina Jitsiä joka paikassa vapaan koodin vaihtoehtona sellaisille vakoiluohjelmille kuin Zoom ja Teams. Nyt näköjään Jitsinkin kehittäjätiimiin on soluttautunut jotain pöhisijöitä ja Jitsi toimiikin sitten enää vain Chromella, joka on suljetun koodin selain. Edes Firefoxilla ei enää toimi. Tämä menee koko ajan hullummaksi.

Chromiumkaan ei enää edes käänny lähdekoodista ilman Googlen omaa rust-forkkia. Eipä se kovin montaa targettia tue muutenkaan. Firefoxissakin eri alustojen tuki on kaventunut paljon.

 

[kolistelija]

Englanninkielinen versio on kirjoitettu niin, että aika selvästi tarkoitetaan selainriippumattomuutta. Valitettavasti suomenkielinen käännös on tehty aika huonosti.

Avataanko siellä mitä se selainriippumattomuus on? Pitääkö saitin toimia esim. Netscape Navigator 1.0:lla?

 

[Vaateri]

Englanninkielinen versio on kirjoitettu niin, että aika selvästi tarkoitetaan selainriippumattomuutta. Valitettavasti suomenkielinen käännös on tehty aika huonosti.

Jaa, mun nähdäkseni siellä ei oteta teknologiaan tarkoituksellisesti mitään kantaa, vaan ydin on tämän mukaista:

The four principles of accessibility are: perceivability, meaning that information and user interface components must be presentable to users in ways they can perceive; operability, meaning that user interface components and navigation must be operable; understandability, meaning that information and the operation of the user interface must be understandable; and robustness, meaning that content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.

 

[Sompi]

"Wide variety of user agents" selvästi tarkoittaa selainriippumattomuutta. Eihän tuota voi muulla tavalla tulkita.

 

[kaarlos]

"Wide variety of user agents" selvästi tarkoittaa selainriippumattomuutta. Eihän tuota voi muulla tavalla tulkita.

Ei se kyllä selainriippumattomuutta tarkoita, eihän se ole edes mahdollista. Jos teen selaimen joka osaa tulkita vain pienen osajoukon kaikesta ECMAScript / HTML / CSS toiminnallisuudesta niin varmaan iso osa web-sovelluksista jää käyttämättä.

 

[qtba]

"Wide variety of user agents" selvästi tarkoittaa selainriippumattomuutta. Eihän tuota voi muulla tavalla tulkita.

Kyllä se mielestäni tarkoittaa, että pitää olla tuettu monilla eri selaimilla. Ei tarvitse tukea kaikkia.

 

[love_doctor]

Kyllä se mielestäni tarkoittaa, että pitää olla tuettu monilla eri selaimilla. Ei tarvitse tukea kaikkia.

Nykyään moni frontend selaintekniikalle käyttää sisäisesti Chromen koodipohjaa, joten sillähän se ratkeaa. Applen Safarillakin on yhteistä historiaa Chromen koodipohjan kanssa. Pian saattaa käytä niin, että jos Firefoxin kehitys loppuu, ei ole kuin yksi koodikanta, mistä kaikki selaimet rakennetaan. Se mahdollistaa esim. sen, että netin toimintaa ei tarvitse enää speksata vaan koodi itsessään toimii dokumentaationa.