Yootheme Pro review regarding performance & SEO

logo pdb
Ryte.com (formerly On-page.org) is one of the best on-page SEO tool, highly recommended by Joomlaseo.com (see review). Free for 1 account (forever)!!!
yootheme pro review

For quite some time I have been thinking about writing a review about Yootheme Pro. I personally use it for most of my projects now and though there are many things I absolutely love, there are a few things I wouldn't mind seeing changed.

For those who do not know the framework, Yootheme is a template provider offering templates on a regular basis. The Pro collection now offers a dozen or so templates and every one or two months a new design is added. Most importantly though, the framework offers a lot of freedom to build your own designs. many design-elements are built in, so you don't need extensions for many content-items like sliders, block-layouts, video's etcetera. Personally, I usually like the clean designs they offer, but that is a matter of taste. All of this is built in a visual Builder with a split-screen, making it very easy for both experienced users and beginners to maintain content:

yootheme page builder

New features are added to the framework on a regular basis too, though there is also still a large backlog of things to do. Many of these items are anxiously awaited by many (including myself). But also a lot of good stuff happens. The latest releases have focussed heavily on performance. A lot of the topics I described in the perfomance section of my blog are now included, and more as well. So, time for a review about these additions:

Performance in Yootheme Pro

When you check the advanced settings in Yootheme Pro in your installations, you immediately see a few performance related ones:

performance settings

 

  • The Compression setting combines the various individual CSS and JS files into bundled ones and this saves you many HTTP-requests
  • Lazy-loading saves bandwith, because images are only loaded when they are scrolled into the viewport
  • Next-gen images offers WebP format images in supported browsers. These images load ultra-fast. Other browsers use the fall-back mechanism

These settings can be used if you like them, or switched off if not.

Locally stored Google fonts

A terrific new feature is that the fonts from the Google fonts fontpicker are now converted into locally stored fonts instead of being pulled from the Google servers. Often, Google fonts can slow down sites and this is now solved. This is a feature that I have not seen in other template frameworks, and sofar it forced me to configure this myself using cumbersome procedures. I noticed an immediate performance gain after upgrading from version 1.12 to 1.23 (note: you have to open and close the Style section to activate the new option):

Before upgrade:

before upgrade

After upgrade:

after upgrade

That's one pont gained, an HTTP-request saved and (based on 5 measurements before and after), 0.15 second gained too! That's nice for a site that's already quite fast.

Fonts are no longer served from Google's servers on fonts.gstatic.com, but from your own site. This also saves you GDPR worries that some may have over webfonts.

Srcset-served images

Another point where Yootheme tries to maximize performance is images. They encourage you to upload your images in really high resolutions and then let the framework do the hard work of optimizing your images. This image is then copied in various sizes which are served based on the device detected by the browser. The copied versions are stored in the /template/cache/ folders. This ensures that desktops received their high-resolution versions while mobile devices receive small versions for optimal performance. The optimized images are losslessly compressed and iare lot smaller then the one originally uploaded (unless you already use image compression using other techniques). Especially for decorative images and large background-images, the Srcset feature is much appreciated. It seriously reduces page-size for mobile pages. I did some checks for one of my sites, and the mobile version is considerably smaller then the desktop version:

Desktop analysis in GTmetrix.com:

gtmetrix desktop

And the same site, in Google Android mode:

gtmetrix mobile

Image SEO

From an SEO perspective, I have some remarks though: Usually you would have an image located at something like /images/image-xxx.jpg that is also the one being indexed by Google. Now, the image is only offered from /template/cache/image-xxx-34tjtjtj5tj.jpg. Quite frankly I would like to see the source-image as the one being indexed, especially if I make sure to optimize it myself. This does not mean that images don't get indexed, but they are indexed in the cache folder, with random strings added. If Yootheme cache is cleared, it seems that the same random string is recreated from what I see, which is good, because otherwise the URL's break. 

In most cases I would not worry too much, but it might be something to keep in mind. I have some sites with images that bring a lot of traffic, and in those situations, I want to control everything myself and I might add images in a Text or HTML field instead of the Image field in the page-builder. Only then you can bypass the image optimizations.

404 page

From an SEO perspective, I also have a small tip to help you set up a 404 page that is customized. There is a default 404 page, but it is very empty and lacks navigation, footer, etcetera. However, using the child-themes feature, setting up a 404 page is very easy:

  • First, create an article to hold the text you want to show to your users. In the publishing tab of the article, set the Robots setting to Noindex, No follow or Noindex, Follow and save it
  • Then, record the Article-ID (last column in the article overview). For this example, let's assume it is 999
  • In the /templates/ folder, create a folder called yootheme_mytheme. The last string is customizable
  • Go inside the template settings, then Settings, then Advanced. For Child Theme, set the child theme you just created the files for. In my example, it will be called Mytheme.
  • Then, inside the /templates/ folder, create an empty file called error.php
  • Finally, edit the error.php file and add the following code:
<!?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;}
?>

Replace 999 with your own article ID. And now you will see a nicely customized 404 page.

Overall

So, overall I think Yootheme Pro is a really flexible and lightweight framework, and you can pretty much get rid of many of the optimization plugins you currently use to get your page up to speed. And if the Roadmap is quickly executed and support is more reactive then they currently often are, I might even really start liking them...

About this site

Joomlaseo.com is fully built and written by Simon Kloostra, SEO Specialist and Webdesigner from the Netherlands. I have also published a book and blogs for companies like OStraining, TemplateMonster, SEMrush and others.