Website optimalisatie, een stap verder
Je kunt ver gaan in het optimaliseren van je website, door requests en laadtijd te reduceren. Het één is eenvoudiger door te voeren dan het ander. Waar exact kun je verder optimaliseren?
Nieuws
Google Fonts optimalisatie
Voorheen trof je fonts als Arial, Verdana en hopelijk nooit Times New Roman aan op websites. Inmiddels komen lettertypes in verschillende soorten en maten, en daarmee ook in verschillende (bestand)groottes. Waar wil je je bezoekers mee opzadelen, en kan dit optimaler?
Wordpress en resource hints
Vanaf Wordpress versie 4.6, voegt Wordpress automatisch resource hints toe aan de broncode van je website. Dit lijkt echter zonder enig beleid te gebeuren. In dit artikel tref je dan ook een praktijk-voorbeeld omtrent resource hints, van hoe het niet moet.
Resource hints
Met de vele bronbestanden welke door websites gebruikt worden, kunnen resource hints de browser vertellen welke bronnen belangrijk zijn om prioriteit te geven bij het laden. Laadtijd en performance kun je ermee versnellen, doordat je de browser alvast vooruit kunt sturen met specifieke taken.
Frontend web: Thema-maanden
De afgelopen maand zijn er bijna twee handen vol artikelen omtrent frontend web ontwikkeling verschenen. Meerdere onderwerpen hebben de revu gepasseerd. Minstens zo interessant, is waar een marketeer, SEO-specialist, de webbouwer, front- of backendprogrammeur of gewoonweg een directeur over wil lezen.
AMP binnen een uur door Google geïndexeerd
Reeds een dag na mijn eerdere publicatie, lijkt de AMP uitrol die het weekend heeft plaats gevonden, door Google deels te zijn geïndexeerd. Van de inmiddels zeven geïndexeerde pagina's, is er zelfs één AMP uitschieter.
AMP implementatie en snelheids test
Het zal geen geheim zijn dat ik graag in alle hoeken van het speelveld mag experimenteren omtrent snelheid- als ook performance winst en onnodig ballast te laten varen. Accelerated Mobile Pages is daar een voorbeeld van. Maar hoe snel is Google's AMP?
Wordpress plugins: de afkomst
Het grote voordeel van Wordpress, is direct ook zijn nadeel. Uiteraard hebben we het dan over plugins, hoe verrijkend zijn ze en voor wie? Een beknopte inzage in de kanttekeningen vanuit de bron.
HTTP/2 in de strijd tegen bloated websites
Zowel de hoeveelheid, mogelijkheden, als ook grootte per stuk van plugins, groeien als kool. Daarmee ook de website resources en dus de laadtijd. Neem de veelvoud en grootte van afbeeldingen mee, en je hebt website bloat.
HTTP/2 introductie en ondersteuning
Vijftig tot wel honderden bestanden, terwijl de browser 6 tot 8 requests tegelijk af kan handelen. Dit betekent een lange laadtijd van je website voor je bezoekers. HTTP/2 maakt dit verleden tijd.
100% PageSpeed score en Mobilegeddon
Druk bezig om een pagespeed score van 100% te behalen? Vele factoren spelen een rol, waarbij Google's PageSpeed Insights onder meer met zaken als blokkerende bronnen strooit, als ook niet gecachte bestanden en optimaliseren van afbeeldingen.
Page Speed Insights' naakte waarheid
Ondanks het feit dat heden ten dage onze projecten voor 90% uit maatwerk webapplicaties bestaan, is de affiniteit voor puur frontend development in zijn breedste zin intact gebleven. Reeds in 2005 hield ik mij bezig met de semantiek van HTML; tabellen voor layout-doeleinden was tot dat moment hèt middel, maar uiteraard not-done.
Critical Path CSS / above the fold
Critical Path CSS zul je vooral tegen komen, wanneer je je website door Google's PageSpeed Insights haalt. Critical path CSS houdt het volgende in: zo snel mogelijk aanleveren van kritieke CSS -verantwoordelijk voor de bovenkant van de website-, direct in het html-document. Het nut? Hiermee kan de bezoeker op een langzame internet verbinding alvast beginnen met lezen van het above-the-fold deel van de webpagina.
Recruitment site & responsive upgrade voor Nuon
In een wisselwerking hebben we naast een upgrade van een webapplicatie voor Nuon, ook de wervings website voor Nuon Sales Force mogen realiseren. Beide zijn in Bootstrap gerealiseerd ten behoeve van smartphone- en tabletgebruik en hebben dezelfde CMS als basis.
Asynchrone fonts en de nieuwe font-property
In navolging van web performance, als ook requests optimalisatie vorige maand, hebben we er voor gekozen om de custom Google Font asynchroon in te laden. Geen issue's zover, mits je surft over goed internet.
Hamburger menu en slideshow met enkel CSS
In het kader van performance optimalisatie (en wellicht micro-optimalisatie, zoals Critical Path CSS?), heb ik me gestort op het inwisselen van een door JavaScript aangestuurde hamburger/uitklap menu en carousel. Middels CSS selectors kunnen omliggende elementen voor praktische doeleinden aangestuurd worden.
Chromes network throttling optie
Over het algemeen mogen we niet klagen over de internetsnelheden in Nederland. Zware websites hoeven geen issue meer te zijn. Toch gaat deze vlieger niet altijd op. Naast je eigen wifi, laat ook mobiel internet in Nederland je wel eens in de steek. Of denk aan vakantie-gangers, die vanaf Spanje of onze eigen waddeneilanden toch je media-site/blog of zakelijke diensten wil raadplegen.
Toegankelijkheid (ARIA) en frameworks
Hoe doen CSS en JS frameworks het wanneer we het hebben over de toegankelijkheid van een website? Onderzoek dit in het aanbestedings-traject, en ga na hoe je de toegankelijkheid kunt verbeteren door inzet van WAI ARIA specificatie.
Blue 2 Blond naar Martinikerkhof
De geplande groei heeft dusdanig doorgezet, dat wegens ruimte en netwerk beperkingen in het voormalig onderkomen (Entrepeneur) besloten is om een nieuw onderkomen te vinden. Deze missie op zichzelf is geslaagd bij het Walburguys aan de Martinikerkhof, waarin Blue 2 Blond sinds mei 2017 gehuisvest is onder dezelfde dak als IT bedrijven (wordpress, python) en pionieren in hun vakgebied (tekstschrijvers, marketing, vormgeving).
Blue 2 Blond groeit
Blue 2 Blond verhuist wegens groei van de projecten en opdrachtgevers, zowel qua personeel als locatie. Onze focus is de afgelopen jaren steeds meer op webapplicaties komen te liggen, met toename in omvang van projecten. In combinatie met de groei van eigen opdrachtgevers, als ook nieuwe opdrachtgevers uit een hoger segment, heeft tot de beslissing geleid om de fundering van Blue 2 Blond als bedrijf te veranderen.
