Yootheme Pro review betreffende Performance & SEO

logo pdb
Ryte.com (voorheen On-page.org) is een van de beste on-page SEO tools, aanbevolen door Joomlaseo.com (zie onze review). Gratis voor 1 account (voor altijd)!!!

Ik was al een tijdje van plan een review te schrijven over Yootheme Pro. Ik gebruik het persoonlijk voor de meeste van mijn nieuwe projecten. De laatste updates hadden vooral betrekking op performance, dus tijd voor een analyse.

Voor degenen die het framework niet kennen, Yootheme is een template provider die regelmatig nieuwe templates uitbrengt, meestal om de 1 of 2 maanden. Ik hou persoonlijk wel van de cleane designs, maar dat is natuurlijk persoonlijk. Ze gebruiken een erg flexibel mechanisme om layouts mee te maken, zodat je ook makkelijk af kunt wijken van de voorgebouwde templates. Zaken als sliders, galleries, video en grid-layouts zitten er allemaal in. En het balangrijkste is dat je dit allemaal in een handige visuele Pagebuilder: in een soort splitscreen kun je handig je layouts visueel in elkaar zetten. Zowel handig voor redelijke beginners als gevorderden:

yootheme page builder

Ze voegen regelmatig nieuwe features toe aan het framework, al is er nog een flinke backlog. Veel van deze zaken staan al vrij lang op de lijst. Maar gelukkig gebeurt er ook veel goeds. De laatste updates hadden namelijk vooral betrekking op performance. Veel van de zaken die ik op mijn blog behandel zitten er intussen in, waardoor het een van de meest snelle frameworks is. Tijd voor een review dus.

Performance in Yootheme Pro

Als je de gevanceerde instellingen in Yootheme Pro bekijkt zie je de performance issues:

performance settings

 

  • De Compression setting zorgt ervoor dat losse CSS en JS bestanden tot 1 bestand worden gecombineerd. Dit scheelt een hele hoop HTTP-requests
  • Lazy-loading vermindert gebruikte bandbreeedte voor je gebruikers omdat plaatjes onder de vouw pas geladen worden als je er naar toe scrolled
  • Next-gen images ondersteunt WebP format plaatjes in ondersteunde browsers (Chrome en Opera). Deze plaatjes laden extreem snel. Voor andere browsers wordt het standaard formaat aangeboden

Je kunt alles aanzetten, maar als je bang bent dat er iets niet goed gaat kun je het ook uitzetten.

Locaal opgeslagen Google fonts

Een erg fijne verbetering is dat de Google fonts waaruit je kunt kiezen niet meer bij elke pagina-weergave van de Google servers hoeven te worden geladen, maar lokaal, op je eigen webserver worden opgeslagen. Google fonts zijn een notoire vertrager en dat ben je nu kwijt. Tot nu toe moest ik met ingewikkelde proecedures dit zelf regelen, en nu is het egwoon standaard. Erg fijn. Ik heb wat testjes met en zonder het gebruik van lokale fonts gedaan, net voor en na de laatste upgrade, en er is direct een verschil te zien:

Voor de upgrade:

before upgrade

Na de upgrade:

after upgrade

GTmetrix geeft me er een extra puntje voor en het scheelt een HTTP-request, maar het belangrijkste is dat ik daadwerkelijk snellere tijden registreer. Op basis van 5 metingen, zowel voor als na upgraden scheelde het me 10 - 15 %, bij een website die al best snel was! 

De font sworden nu niet meer geladen van fonts.gstatic.com, maar van je eigen site. 

Srcset-geladen plaatjes

Een ander terrein waar Yootheme probeert de performance te optimaliseren is met plaatjes. Ze adviseren om je plaatjes zelf op flink hoge resolutie te uploaden. Het framework zorgt er dan zelf voor dat dit plaatje wordt bijgesneden in meerdere varianten, optimal voor elk device. Zo krijg je op een desktop een flink groot en scherp plaatje, en op een mobieltje een klein, snel ladend exemplaar. De bijgesneden plaathes worden opgelagen in de /template/cache/ folders.

De geoptimaliseerde plaatjes zijn losslessly ge-compressed en een stuk kleiner dan de oorsporonkelijk ge-uploade plaatjes. Tenzij je al met een andere techniek image compressie toepaste. Vooral voor puur decoratieve en grote  background-images is het gebruik van Srcset perfect. Het reduceert de bandbreedte behoorlijk. Ik heb weer een paar testjes gedaan, en de mobiele weergave is duidelijk kleiner dna de desktop-versie:version:

Desktop analyse in GTmetrix.com:

gtmetrix desktop

En dezelfde site, in Google Android mode:

gtmetrix mobile

Image SEO

Met mijn SEO heb ik wel een paar opmerkingen: als je normaal gesproken een plaatje uploadt, komt hij terecht in bijvoorbeeld /images/image-xxx.jpg en daar wordt hij ook geindexeerd door Google. In Yootheme komen de plaatjes in meerdere varianten terecht in /template/cache/image-xxx-34tjtjtj5tj.jpg. Eerlijk gezegd zou ik het liefst het bron-plaatje in de /images/ map geindexeerd zien. Op zich worden de gecachte plaatjes wel geindexeerd, maar de bestandsnamen zijn niet ideaal. Wel heb ik even gechecked wat er gebeurt met de random string als je de cache cleared, maar gelukkig is die steeds constant, dus de plaatjes blijven eenmaal geindexeerd vanaf dezelfde URL benaderbaar, ook na het legen van cache.

In de meeste gevallen is het prima om het zo te laten, maar ik heb zo nu en dan plaatjes die me via de image search echt flink wat verkeer opleveren. Om ze dan toch vanuit de /images/ map aan te bieden gebruik ik in plaats van een Image-element uit de Yootheme Builder een Text of HTML element: dan wordt de optimalisatie met srcset niet toegepast.

404 pagina

Wat SEO betreft kunnen we ook nog even naar de 404 pagina kijken. De standaard Yootheme 404 pagina is erg kaal en basaal, zonder navigatie en footer. Gelukkig kun je vrij makkelijk een pagina maken die wel het gewenste uiterlijk heeft. Dat gaat als volgt:

  • Maka eerst een artikel met de gewenste tekst en eventueel links naar de Home-pagina. In het Publishing tabje van het artikel, zet de Robots setting op Noindex, No follow of Noindex, Follow en sla het op
  • Noteer het Article-ID (laatste kolom in het artikel-overzicht). Laten we het in dit voorbeeld op 999 zetten
  • Maak in de /templates/ folder een subfolder genaamd yootheme_mytheme. Het laatste deel kun je ook anders noemen
  • Ga dan naar de Yootheme template instellingen en dan naar SettingsAdvanced. Bij Child Theme stel je dan de map in van het zonet gecreeerde mapje. In mijn voorbeeld dus Mytheme.
  • Maak dan in de /templates/ folder leeg bestand genaamd error.php
  • Pas tenslotte het error.php bestand aan en voeg de volgende code toe:
<!?php
defined('_JEXEC') or die;
if (($this->error->getCode()) == '404') {
header("HTTP/1.0 404 Not Found");
echo file_get_contents(JURI::root().'index.php?option=com_content&view=article&id=999');
exit;}
?>

Vervang 999 door je eigen artikel ID. Als je nu een niet bestaande URL benaderd zou je nu je eigen 404-tekst moeten zien.

Conclusie

Kortom, Yootheme is een lekker snel en lichtgewicht template framework. Je kunt veel extensies de deur uitdoen, zowel wat betreft optimalisatie als functionaliteit vor sliders, video en dergelijke. Als ze nu ook de Roadmap items eens uitvoeren heb je straks het perfecte framewerk om je templates mee te bouwen.

Over deze site

Joomlaseo.com is volledig gebouwd en geschreven door Simon Kloostra, SEO Specialist en Webdesigner uit Utrecht. Ik heb ook een boek geschreven en blogs voor bedrijven als OStraining, TemplateMonster, SEMrush en dergelijke.