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!

[Ward van der Put]

Deze sitetestsite van Google vindt de homepage nu ook "Excellent".

En maakt nog een rapport met tips. ;)

 

Edit: ook verkrijgbaar in het Nederlands.

[Richard Theuws]

is het misschien een idee om ook eens een copywriter / reclameman mee te laten kijken naar de visuele aantrekkelijkheid?

[Edo van Santen]

is het misschien een idee om ook eens een copywriter / reclameman mee te laten kijken naar de visuele aantrekkelijkheid?

is een andere discussie, maar je hebt vast een reden om dit te melden :-) Laat maar komen hoor!

 

overigens, wat heeft een copywriter te doen met visuele aantrekkelijkheid?

[Acrobat Reader]

is het misschien een idee om ook eens een copywriter / reclameman mee te laten kijken naar de visuele aantrekkelijkheid?

 

Eigenlijk is 99% van de inhoud van die site overbodig.

 

Dit is de essentie. De ultieme site-pitch (die ík ga lenen van je):

[Edo van Santen]

:-) ✓

[Richard Theuws]

is een andere discussie, maar je hebt vast een reden om dit te melden :-) Laat maar komen hoor!

 

overigens, wat heeft een copywriter te doen met visuele aantrekkelijkheid?

 

Eerste wat mij bijvoorbeeld opvalt is die 'lege zaal' op de foto, en de klassieke long copy zoals je 'm vaak op van die tell sell achtige pagina's tegenkomt.

 

Ook de grafische elementen kunnen volgens mij net iets mooier afgewerkt/uitgewerkt worden zonder dat je pagina daar zwaarder van wordt.

 

Een copywriter kan je helpen om het allemaal net iets anders te verwoorden; als je hier de SEO Mythe "keyword stuffing" op los zou laten zou Google je direct 50 posities moeten laten zakken op je voornaam ;)

 

Qua andere discussie: volgens mij is een site bedoeld voor conversie, leuk als ie snel is maar als de klant niet klikt is het toch verloren moeite.

 

[Edo van Santen]

Qua andere discussie: volgens mij is een site bedoeld voor conversie, leuk als ie snel is maar als de klant niet klikt is het toch verloren moeite.

 

Conversie: die is juist heel hoog, zonder enige acquisitie gemiddeld 150 aanvragen per jaar.

 

Juist om die reden zit er veel long copy in, mijn klanten zijn meestal corporate en dga mkb, die willen eerst (veel) lezen en zien voordat ze tot een aanvraag besluiten.

 

[Edo van Santen]

Eerste wat mij bijvoorbeeld opvalt is die 'lege zaal' op de foto, en de klassieke long copy zoals je 'm vaak op van die tell sell achtige pagina's tegenkomt.

de "lege zaal" converteert beter dan de volle zaal foto's (bv Elevator-Pitch-Voorbeelden), die kennelijk toch een te hoge drempel opwierpen.

 

[Richard Theuws]

ah perfect, als het (voor de juiste mensen) werkt dan werkt het.

[Edo van Santen]

overigens is het ontwerp (zie screenprint) in zijn basis in 2005 gemaakt door ons HL-lid remwerk, en er zijn sindsdien natuurlijk wel wat aanpassingen geweest ;-)

[NDO.]

Pas je code zo aan dat de images als background-image van een div geladen worden, dan worden ze niet opgehaald door de browser als ze vanwege de viewport/css niet zichtbaar zijn. Dus maak er zoiets van:

 

[Edo van Santen]

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

heb dit even uitgetest op desktop, ipad en mobiel. ziet er goed uit!

scheelt inderdaag veel Kb en laadtijd.

nog even puzzelen hoe dit in combinatie met playlists werkt, en dan kan ik alles op dit script overzetten :-)

[Edo van Santen]

Pas je code zo aan dat de images als background-image van een div geladen worden, dan worden ze niet opgehaald door de browser als ze vanwege de viewport/css niet zichtbaar zijn. Dus maak er zoiets van:

 

Thx, ga ik ook uitproberen!

[WalterBrokx]

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.

 

Is de overheid zo groot? ;)

 

(Die computers werken straks toch niet meer: er komt wel weer een cyberattack achteraan.)

[Edo van Santen]

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

heb dit even uitgetest op desktop, ipad en mobiel. ziet er goed uit!

scheelt inderdaag veel Kb en laadtijd.

nog even puzzelen hoe dit in combinatie met playlists werkt, en dan kan ik alles op dit script overzetten :-)

ik kreeg het helaas niet goed werkend op (schaalbaar) mobiel en in combinatie met Youtube playlists (die ik heel veel gebruik). Ook vond ik de laadtijd bij het aanklikken van de video erg lang. Dan maar wat langere laadtijd bij het inladen van de pagina. jammer, maar wel bedankt voor de interessante tip!

[Edo van Santen]

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

 

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

 

Dank Rik99, was weer even puzzelen maar is goed gelukt!

De pagina's waar de klantlogo's worden opgehaald, doen dit nu alleen daar waar de sidebar daadwerkelijk getoond wordt.

zie: https://www.edovansanten.nl/Edo-als-Spreker en https://www.edovansanten.nl/Klantervaringen

[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... ;)

 

Alle Youtube script heb ik nu omzeild door alle video's in YT zelf te laten afspelen, middels een link. Scheelt heel veel laadtijd, en heeft het voordeel dat comments/like/unlike buttons nu bij de video's zichtbaar zijn. Staat tegenover dat de verblijfstijd op de pagina wellicht weer korter wordt. Eens kijken wat dat met de pageranking doet.