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, videos 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:
New features are added to the framework on a regular basis too. 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 performance section of my blog are now included, and more as well. So, time for a review of 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:
- The Compression setting combines the various individual CSS and JS files into bundled ones and this saves you many HTTP-requests
- Lazy-loading saves bandwidth because images are only loaded when they are scrolled into the viewport
- Next-gen images offer WebP format images in supported browsers. These images load ultra-fast. Other browsers use the fall-back mechanism. Lately, also the AVIF format was added as an option.
These settings can be used if you like them, or switched off if not.
Locally stored Google fonts
A terrific feature is that the fonts from the Google fonts font picker are 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 so far it forced me to configure this myself using cumbersome procedures.
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 web fonts.
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. The 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 are a lot smaller than 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 than the desktop version:
Desktop analysis in GTmetrix.com:
And the same site, in Google Android mode:
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 than they currently often are, I might even really start liking them...
