responsive-siteAfgelopen jaren is Website Performance Optimization (WPO) een steeds belangrijker feit geworden. Elke website moet sneller en sneller worden. Waarom? Omdat conversie gerelateerd is aan de snelheid van de site/shop. En dit geldt ook voor een website, of in dit geval webshop, die bekeken wordt op een smartphone en/of tablet.

Met de komst van Responsive Webdesign denken we het “gouden ei” gevonden te hebben, maar dit is dit wel zo? In de Magento User Group van afgelopen donderdag 27 juni besteedden we met zo’n 20 enthousiastelingen aandacht aan de voor- en nadelen van deze oplossing.

Performance analyse: Graphite en New Relic

Performance optimaliseren vereist automatisch ook performance analyseren. Als warmmakertje vertelde Daniel Genis van Byte kort iets over hoe Byte als hoster de serverbelasting en performance van sites analyseert en monitort. Voor de continue monitoring van serverbelasting en -performance werkt Byte sindskort met Graphite. Daniel liet kort met grafieken zien hoe dit in z’n werk gaat.
Daarnaast besteedde hij kort aandacht aan New Relic. Deze gave dienst zal Byte haar Magento klanten zeer binnenkort aanbieden, dus houd ons in de gaten! En als mooi bruggetje wist één van de aanwezigen te vertellen dat New Relic ook een feature kent voor de analyse van Mobile sites … 😉

https://www.slideshare.net/Byte_Internet/presentatie-mug-27-juni-2013-graphitenew-relic

Responsive design en Magento mobile performance

Na het warmmakertje van Daniel was het woord aan Ray Bogman van SupportDesk. Met een mooie Prezi-presentatie vol voorbeelden ging hij flink de diepte in over responsive design en de mythes die er zijn m.b.t. performance. Voor de duidelijkheid: responsive design betekent dat de site zich aanpast aan het medium waarop het wordt weergegeven.

Ray begon zijn presentatie met dat we kunnen zeggen dat responsive design de basis heeft gevormd voor de ondersteuning van mobiele telefoons, maar dat het waarschijnlijk de grootste mythe is dat het alles is wat je nodig hebt om je Magento shop op een mobiel platform een succes te maken. Er zijn namelijk meerdere beperkingen waar je tegenaan loopt. Zo is het scherm natuurlijk veel kleiner en heeft een mobiel apparaat minder power (processorkracht) dan een desktop. Daarnaast moet je rekening houden met een speed limit als men met 3G of 4G surft. Ook een shop met responsive design vereist dus de nodige optimalisatie.

Mobiele performance optimalisatie: tips

De algemene tips om websiteperformance te optimaliseren zijn bekend (HTTP requests minimaliseren, content inkorten, samenvoegen css/js, afbeeldingen optimaliseren, etc). Maar gelden deze tips ook voor mobiele performance optimalisatie? Ja zeker! Maar er is meer dat je kunt doen als het gaat om mobiele performance. Hieronder een korte samenvatting van Ray’s uitgebreide tips:

  1. Less is more. Gebruik zo min mogelijk resources, omdat mobiele telefoons via 3G een trage verbinding hebben. Wees kritisch en maak keuzes in wat je wilt laten zien. Is het bijvoorbeeld echt nodig om ieder knopje en balkje te voorzien van een afbeelding of icoon, of kan het het allemaal wat minder? Streef je naar optimale performance, voorkom dan het gebruik van image tag (<img>) voor buttons, achtergronden, visuele scheidingstekens of titels. Gebruik afbeeldingen echt alleen waar nodig (zoals een logo, of een verklarende afbeelding bij een artikel). En nog een kleine tip: voorkom dat een afbeelding groter is dan 124kb, anders wordt deze direct in het geheugen geladen.
  2. Verminder het aantal HTTP en DNS requests. Dit is een algemene performance tip, maar bedenk je dat elke HTTP request nog eens langer duurt vanuit een mobiele telefoon dan vanuit een desktop. Voor een snelle mobiele responsive site is het dus uitermate belangrijk om zo min mogelijk requests te genereren.
  3. Maak gebruik van Document Type voor mobiel. Weinig mensen weten dat er voor mobiele documenten een aparte Document Type is die bij mobiele apparaten een geoptimaliseerde modus activeren.
  4. Maak gebruik van Local Storage. Hierdoor worden kleine afbeeldingen en CSS documenten opgeslagen in een aparte site-specifieke container op het mobiele apparaat. Deze content is beschikbaar zodra er op de site geklikt wordt en is ook beschikbaar als het apparaat niet verbonden is met het internet.
  5. Sla afbeeldingen in base64 geëncodeerd op binnen de CSS. Hiermee vermijd je dat smartphones de afbeelding apart moeten ophalen. In combinatie met caching is dit een goede manier om voor zo min mogelijk HTTP requests te zorgen.
Gezellige borrel na afloop

Gezellige borrel na afloop

Natuurlijk wil je de performance van jouw mobiele website graag testen, en daar zijn gelukkig goede tools voor. In zijn presentatie noemt Ray bekende en minder bekende: Google Pagespeed insight – mobile, ready.mobi, mobileperf – firebug mobile, validator.w3.org/mobile/, weinre en tot slot mobitest Akamai.

Less is more!

De rode draad in de presentatie was duidelijk: Less is more! Je kunt een prachtige responsive shop maken, maar als deze te zwaar is voor het mobiele apparaat dan is deze traag en haken bezoekers alsnog af. Om dit nog eens kracht bij te zetten besprak Ray een voorbeeld van een mobiele site die super responsive was, maar die qua performance echt dramatische cijfers gaf: een download van maar liefst 2MB en een dramatische score in GT Metrix (Mobile beta versie).
Less is more, dat blijkt wel … 

Maar het strippen van je mobiele shop heeft ook consequenties voor de desktop variant, en dat is natuurlijk best jammer. Wat is dan een goede oplossing? Maak een aparte storeview aan. Eén die specifiek geoptimaliseerd is voor mobiele telefoons. Voordeel? Je hoeft niet je hele webshop te ‘strippen’ en herbouwen.

Bekijk de uitgebreide presentatie van Ray Bogman hier:

 

Volgende MUG: workshop Magento & SEO

Gaan de technische onderwerpen je wat boven de pet, maar zou je wel graag samen met andere Magento gebruikers sparren over meer marketing gerelateerde onderwerpen? Dan is de volgende MUG een must voor je! Vrijdag 30 augustus organiseert het Competence Center een workshop Magento & SEO. Inclusief boottocht door de Amsterdamse grachten en BBQ.
Meer informatie en inschrijven (t/m 31 juli Early Bird) op meetup.com.

 

Magento Trial

 

Scan je eigen Magento shop op veiligheidslekken