Puzzel voor HTML/CSS programmeurs

[Edo van Santen]

De snelheid van je website is, zeker voor mobiel, een belangrijk punt in het kader van gebruiksvriendelijkheid. Ik loop ergens tegenaan en ik denk dat het voor alle ondernemers met een website een relevante vraag is.

 

In mijn website heb ik het goed voor elkaar. HTML-only, een webpagina is zo'n 15Kb. Viewports voor widescreen, desktop, tablets en mobiel. Werkt als een zonnetje.

 

Echter, ook al geef ik in de viewport aan dat bepaalde content niet getoond dient te worden, wordt het wel ingeladen. Dit heeft dus een effect op de laadtijd van de pagina's.

 

De enige oplossingen die ik kan vinden, gaan met javascript of ajax. Bijna het paard achter de wagen spannen vind ik. Je laadt een vrachtwagen vol met scripts om iets miniems voor elkaar te krijgen.

 

De uitdaging is dus: Hoe zorg ik ervoor dat bepaalde delen (in mijn geval de "sidebar") niet geladen worden, puur in HTML/CSS.

 

Wie-o-wie zet mij op het goede spoor? Thx!

[mmint]

Als je niet wil dat het geladen wordt, dan moet je het niet verzenden. Kom je dus uit op serverside scripten of ajax.

[Rik ·]

Puur HTML5... (hé, jij vroeg om html :) )

 

 

Je kunt dit dan ook af laten hangen van je screensize e.d. zoals voor de link tag normaal is.

 

media="handheld, only screen and (max-device-width: 320px)" href="phone.css">

 

Als het geen HTML5 mag zijn zul je naar server-side scripting of javascript moeten gaan om de juiste bits te laden. Maar zo complex hoeft dat niet te zijn. Dat is echt geen vrachtwagen vol.

[Ward van der Put]

Waarom wil je content verbergen voor mobiele gebruikers? Of waarom heb je content die alleen geschikt is voor desktop?

 

De keuze om iets te verbergen of juist te tonen voor specifieke gebruikers is veel belangrijker dan de technische implementatie van die keuze.

 

[Edo van Santen]

Waarom wil je content verbergen voor mobiele gebruikers? Of waarom heb je content die alleen geschikt is voor desktop?

 

De keuze om iets te verbergen of juist te tonen voor specifieke gebruikers is veel belangrijker dan de technische implementatie van die keuze.

 

Ha Ward,

is geen kwestie van verbergen, maar een mobiele gebruiker heeft een kleiner scherm en andere informatiebehoefte. Ik heb feitelijk 4 kolommen, waarvan de linker 3 op mobiel getoond worden.

De 4e kolom (rechts) wil ik niet op mobiel/tablet tonen. Tot zover gaat alles functioneel goed. Waar het mij hier om gaat, is dat de 4e kolom wel geladen wordt, hetgeen invloed heeft op de laadtijd. Daar zoek ik dus een simpele technische oplossing voor.

 

[Edo van Santen]

Puur HTML5... (hé, jij vroeg om html :) )

 

 

Je kunt dit dan ook af laten hangen van je screensize e.d. zoals voor de link tag normaal is.

 

media="handheld, only screen and (max-device-width: 320px)" href="phone.css">

 

Als het geen HTML5 mag zijn zul je naar server-side scripting of javascript moeten gaan om de juiste bits te laden. Maar zo complex hoeft dat niet te zijn. Dat is echt geen vrachtwagen vol.

 

Thx, ga ik mee puzzelen. Ogenschijnlijk lijkt het hier dat het toch ook geladen wordt...

[Rik ·]

Ogenschijnlijk lijkt het hier dat het toch ook geladen wordt...

De html uit de link wordt alleen geladen op mobiel of desktop afhankelijk hoe je die media tag instelt. En aangezien dit op het device zelf gebeurd wordt die html dus niet geladen als je die goed instelt.

 

Probleem is wel dat HTML5 niet door oudere browsers ondersteund wordt. En hoe vang je dat dan weer op?

 

[R.I.P. | Peter Bonjernoor]

Hier een pagina waar alles wordt uitgelegd - 1e link op Google, dus hun SEO zit ook wel goed! ;)

 

Probleem is wel dat HTML5 niet door oudere browsers ondersteund wordt. En hoe vang je dat dan weer op?

Die 0,5% of zo? Meh.

[espen]

en over hoeveel data heb je het precies? Als daar een paar regels in staan, dus waarschijnlijk minder dan een KB zou ik me daar niet druk om maken, dan kun je beter op andere punten zorgen dat de hoeveelheid data klein blijft, compressie, andere kleinere fotos voor mobiel etc

[R.I.P. | Peter Bonjernoor]

Er wordt op de site een script van YouTube gehaald dat gecomprimeerd 440K is, dus daarmee valt andere optimalisatie redelijk in het niet... ;)

[willemj]

De HTML content van de sidebar zal altijd geladen worden. Lijkt me ook niet heel zinvol om voor die paar kb kunstgrepen uit te gaan halen. Afbeeldingen worden als het goed is niet geladen.

 

Mocht je het toch willen dan kun je met javascript een cookie zetten voor kleine schermen. Op de server cookie uitlezen en de sidebar niet meer meesturen. De bezoeker laadt dan maar één keer de sidebar.

 

Volgens onderstaande site is de gemiddeld mobiele internetsnelheid 25Mbps in Nederland. https://opensignal.com/reports/2017/02/global-state-of-the-mobile-network

 

[Edo van Santen]

Er wordt op de site een script van YouTube gehaald dat gecomprimeerd 440K is, dus daarmee valt andere optimalisatie redelijk in het niet... ;)

helemaal eens. het iframe met youtube gedraagt zich minder lean dan ik zou willen ;-)

maar het is niet anders...

[Edo van Santen]

en over hoeveel data heb je het precies? Als daar een paar regels in staan, dus waarschijnlijk minder dan een KB zou ik me daar niet druk om maken, dan kun je beter op andere punten zorgen dat de hoeveelheid data klein blijft, compressie, andere kleinere fotos voor mobiel etc

 

het gaat hier vooral om de foto(s) (gemiddeld 800Kb) in de sidebar. belangrijk voor widescreen en desktop, een last voor tablet en mobiel....

 

nog erger is het bijvoorbeeld op de pagina "Edo als Spreker", waar tevens een 70-tal logo's van klanten worden opgehaald.

[willemj]

Kan kleiner https://www.labnol.org/internet/light-youtube-embeds/27941/

[Edo van Santen]

De HTML content van de sidebar zal altijd geladen worden. Lijkt me ook niet heel zinvol om voor die paar kb kunstgrepen uit te gaan halen. Afbeeldingen worden als het goed is niet geladen.

 

Volgens onderstaande site is de gemiddeld mobiele internetsnelheid 25Mbps in Nederland. https://opensignal.com/reports/2017/02/global-state-of-the-mobile-network

 

Afbeeldingen worden als het goed is niet geladen.... is dat zo? dan zou er geen probleem zijn. hoe kan ik dat testen?

 

gemiddeld mobiele internetsnelheid 25Mbps.... Gemiddeld dus geen probleem. Maar niet iedereen heeft een lekkere 4G verbinding. Ook die bezoekers wil ik prettig behandelen.

 

[willemj]

nog erger is het bijvoorbeeld op de pagina "Edo als Spreker", waar tevens een 70-tal logo's van klanten worden opgehaald.

 

CSS sprite van maken. Dan is het één request. Scheelt een hoop tijd. Of één grote afbeelding met een klikmap.

 

[Edo van Santen]

Kan kleiner https://www.labnol.org/internet/light-youtube-embeds/27941/

 

Cool! ga ik bestuderen. Thx

[R.I.P. | Peter Bonjernoor]

nog erger is het bijvoorbeeld op de pagina "Edo als Spreker"...

Drie iframes en dus 3 keer 440K javascript hakt er harder in dan die logo's.

 

Kijk ook eens naar je foto's - PNG's van 600K tot 800K op dat formaat zijn sowieso veel te groot.

 

Maarreh...is dit geen cruciaal vakgebied dat jij tot in de puntjes zou moeten beheersen? Beetje gratis professioneel advies komen vragen hier... :D

 

[willemj]

Afbeeldingen worden als het goed is niet geladen.... is dat zo? dan zou er geen probleem zijn. hoe kan ik dat testen?

 

Met de debug tool (F12 in Chrome of firefox) tabblad 'net' dan kun je zien wat er allemaal geladen wordt. Even getest voor je en de afbeeldingen worden wel geladen... Misschien geldt het alleen voor css background afbeeldingen. Anders kun je nog een css media selector op #sidebar img { display: none; } proberen.

 

[Edo van Santen]

CSS sprite van maken. Dan is het één request. Scheelt een hoop tijd. Of één grote afbeelding met een klikmap.

 

Thx, maar dat werkt niet lekker responsive, als de breedte van het window wordt aangepast. Kijk maar naar het gedrag van de logo's als de breedte van het window schuift...

 

[willemj]

Eén afbeelding dan inderdaad niet. CSS sprite kan wel (zo lang de logo's niet van grootte veranderen, maar dat doen ze niet)

[willemj]

Goed idee trouwens die 'lees verder' link onder aan je pagina. Die ga ik 'lenen' van je :)

[Edo van Santen]

Goed idee trouwens die 'lees verder' link onder aan je pagina. Die ga ik 'lenen' van je :)

top! :-)

[Edo van Santen]

Kijk ook eens naar je foto's - PNG's van 600K tot 800K op dat formaat zijn sowieso veel te groot.

gefixt, thx.

 

[Ward van der Put]

Dat scheelt: je 'Performance'-score is zojuist gestegen van 21/100 naar 49/100.

 

Bijgevoegd rapport uit Google Lighthouse (bèta) bevat meer tips.

Lighthouse-rapport-Edo-homepage-30-juni-2017.pdf

[Edo van Santen]

Dat scheelt: je 'Performance'-score is zojuist gestegen van 21/100 naar 49/100.

 

Bijgevoegd rapport uit Google Lighthouse (bèta) bevat meer tips.

dank, ga ik mee aan de slag...

Overigens vindt Google Page Speed Insights de pagina's al snel...