A Slow Internet Day - RooyyDoe/League-of-legends-survey GitHub Wiki
Er zijn zoveel verschillende manieren om met het internet in aanraking te komen in deze tijd. Er zijn in de jaren zoveel verschillende mobieltjes bij gekomen die beschikking hebben tot het internet, maar ook consoles zoals de Switch, Playstation Portable, Xbox, Nintendo Wii en noem maar op. De ene telefoon heeft een betere verbinding dan de andere. Tegenwoordig hebben de nieuwste telefoons allemaal 4G of zelfs al 5G. Hiermee heb je een snelle laad tijd in mobiele browsers, maar wat nou als je deze verbinding niet hebt en nog vast zit aan de 2G of 3G verbindingen.. Kan je dan nog steeds alle moderne web applicaties snel inladen?
Het is zeker verstandig dat je als developer ook rekening houd met gebruikers die slomer internet hebben. Er is een groot deel van de wereld met sloom internet. Wanneer een web applicatie te veel beladen is met grote afbeeldingen of Javascript/CSS dan gaat dit voor gebruikers met traag internet veelte lang duren. Er zijn een aantal stappen die je kan nemen om de pijn van gebruikers met sloom internet te verlichten:
- Ga voor minimalistisch: als je kijkt naar Google als een voorbeeld, bestaat het uit een schaars ontwerp met meestal tekst, eenvoudige opmaak, heel weinig CSS en weinig of geen scripting. De pagina's zullen aanzienlijk sneller inladen, zelfs op browsers met slomer internet.
- Zorg voor een alternatief: Sommige websites bieden twee versies aan. Een volledige versie voor gebruikers met een goede breedband verbinding en een uigeklede versie voor gebruikers met een slechtere breedband verbinding. Op deze manier pak je beide use cases aan en geef je elke gebruiker wat hij/zij wilt.
- Maak gebruik van Responsive design: Dit verwijst natuurlijk naar het optimaliseren van je website-ontwerp voor de mobiele versie. Deze kan je ook aanpassen op de verschillende internet verbindingen die er zijn. Dus je past je design aan op de snelheid die de gebruiker heeft.
- Gebruik ouderwetse optimalisatietechnieken: Hierbij kan je denken aan de techniek waarbij afbeeldingenen zo werden gegenereerd dat hij regel voor regel in werd geladen. Ook kan je hierbij denken aan lazy loading dat er dus pas images wordt ingeladen wanneer deze in het scherm van de gebruiker zichtbaar worden. Hiermee neem je heel veel vertraging weg. Ligt natuurlijk wel aan of je veel gebruik maakt van afbeeldingen.
Connection to Twitch.tv on slow internet
Twitch.tv heeft ongeveer 20 seconden nodig om in te laden op Langzaam 3G verbinding. Twitch is een streaming platform en maakt dus veel gebruik van boxes met live video's hierin. Op deze manier is het erg beslastend voor gebruikers met een slechte internet verbinding. Toch vond ik het aardig snel gaan voor hoeveel verschillende streams er stonden op de homepagina.
Ook kon ik direct interacteren met een stream en kreeg ik al binnen 5 seconden te zien welke streamers ik volg en welke hiervan daadwerkelijk online aan het streamen waren.
Connection to bol.com on slow internet
Wanneer ik probeer met connecten bij bol.com zie ik als eerst 20 seconden een lege pagina en daarna beginnen de elementen in te laden. Bol.com maakt natuurlijk gebruik van veel afbeeldingen en dat merkt je ook wel bij het inladen. Wanneer de pagina begint in te laden zie je allemaal lege vakken die langzaam gevuld worden met plaatjes. Uiteindelijk duurde het 45 seconden voordat alle elementen met afbeeldingen daadwerkelijk zichtbaar werden.
Connection to apps.ua on slow internet
Dit is een interactieve web applicatie waar ze het proces laten zien hoe ze een Apple Cider maken. Je moet voor deze web applicatie een goede connectie hebben anders doet die het voor geen ene meter. Hij laat een video zien door middel van de interactie van de gebruiker. Jij moet op toetsen drukken om de video verder te laten spelen. Als je verbind met een slechte connectie lukt dit niet en blijft hij heel veel haperen en komen de notificaties om op een knop te klikken heel laat.
Connection to lolesports.com on slow internet
Op deze esports pagina wordt heel veel content geladen. Ik vind een plus punt dat ze een loading state aangeven dus niet een blanke pagina met niks hierop. Je ziet daadwerkelijk dat er wat aan het laden is en dat geeft de user al sneler de neiging om te wachten inplaats van weg te gaan. Daarnaast heeft de website aardig moeite met het inladen van alle images/banners.
Ik wil hier laten zien hoe je op een makkelijke manier een slome connectie kan simuleren in de Google Chrome browser
- Wanneer je op een web pagina zit moet je de Developer tools openen
- In de Developer tools ga je naar de Network tab toe en hier zoek je naar de
No Throttlingen klik je hierop
- Wanneer je hier op hebt geklikt krijg je een dropdown te zien waaruit je verschillende opties kan kiezen of een custom netwerk connectie kan aanmaken. Zelf test ik altijd tussen de
Regular 3G&Good 3G. Dit zijn de slechtere internet verbindingen. Natuurlijk kan je ook gewoon alles testen. De lijst gaat van de langzaamste connectie naar de snelste.
- Wanneer je een eigen connectie wilt aanmaken moet je dus op de
addknop klikken en dan krijg je deze pagina voor je te zien. Hier kan je de connectie een naam geven en hoeveel KB up en down de connectie moet hebben.
Best & Worst places for internet Quality
Global digital population as of January 2021
https://www.smashstack.com/articles/life-in-the-slow-lane-web-designs-for-slow-internet-connections/
https://www.nytimes.com/2020/05/20/technology/personaltech/slow-internet-speeds.html
https://www.statista.com/chart/24261/internet-quality-ranking/
https://helpdeskgeek.com/networking/simulate-slow-internet-connection-testing/