Snellere thema's ontwikkelen met de Shopify Theme Inspector

Snellere thema's ontwikkelen met de Shopify Theme Inspector

Het is een steeds belangrijker wordend gedeelte van een website: De pagespeed. De snelheid waarmee een webshop ingeladen wordt is belangrijk voor Google, maar nog belangrijker is het voor je bezoekers. Je wilt dat je website zo snel mogelijk getoond wordt, zodat je bezoekers niet afhaken en je concurrent bezoeken.

Veel standaard thema's voor Shopify zijn gemaakt met allerlei opties; Infinite Scroll, Popups, mooie filtermogelijkheden en noem het allemaal maar op. Erg fijn, maar waarschijnlijk gebruik je minstens de helft hiervan niet. Toch wordt deze code deels ingeladen, en zal het de snelheid van je site vertragen.

Dit is een van de redenen waarom we bij Shopnotch altijd custom thema's verkiezen. De snelheid hiervan is vele malen beter te optimaliseren, omdat het thema speciaal voor één unieke webshop gemaakt is.

Hoe optimaliseer ik mijn thema's?

Omdat Google de pagespeed erg belangrijk vind, heeft Google enkele handige tools ontwikkeld. Deze zijn te vinden in Chrome onder Lighthouse (of in de welbekende Google Pagespeed tool), waarbij ze meteen enkele handige tips geven om bepaalde punten te optimaliseren. Erg handig, maar ook in de Liquid code van Shopify zelf valt veel winst te behalen. En deze punten zul je niet terugvinden in Lighthouse

Shopify Theme Inspector for Chrome

Gelukkig heeft Shopify hier een hele handige voor Chrome voor ontwikkeld. Het gaat om de Shopify Theme Inspector for Chrome. Naar mijn mening is deze tool onmisbaar voor elke thema ontwikkelaar.

Na installeren van deze tool log je in op je Shopify account. Vervolgens ga je naar de site, en open je je Chrome Inspect. Als je toegang hebt tot deze shop, zul je vervolgens een nieuw tabblad "Shopify" zien in je Inspector.

Klik op het "laad" icoontje en je zult na enkele seconden gelijk de pijnpunten zien van het thema. Welk gedeelte van je template duurt het langst om te laden? Met deze tool krijg je het eenvoudig te zien.

Zodra je geïdentificeerd hebt welk gedeelte van je shop zo langzaam reageert, kun je gaan optimaliseren.

Dankzij deze tool heb ik tientallen shops kunnen optimaliseren, waardoor de shops beetje bij beetje weer wat sneller laden. Heb jij een trage webshop? Wellicht loont het dan om te kijken naar een nieuwe template, die wél snel is.