Speed Up Your WordPress Website with YOOtheme Pro

This article was created in partnership with YOOtheme. Thank you for supporting the partners who make SitePoint possible.

Starting July 2018, Google started ranking their mobile search results according to mobile page speed. This makes PageSpeed optimization even more important than before. Fortunately, there are tools that can help you speed-up your website. YOOtheme Pro, a new WordPress theme and page builder, ensures a high page speed ranking of your website thanks to its small, clean code base and the use of latest web technologies. Here is how it works.

What is YOOtheme Pro?

For those of you who are not familiar with YOOtheme Pro, it is a powerful theme and page builder for WordPress and Joomla. These are its main features:

• Intuitive drag & drop page builder
• Element Library with 30+ elements (including Slider, Slideshow, etc.)
• Layout Library with 100+ pre-built premium layouts
• Style Library with 70+ handcrafted styles
• Integrated Unsplash Library
• WooCommerce support
• Footer Builder
• Fast and lightweight code base

How does YOOtheme Pro speed up your website?

YOOtheme Pro is built with the JavaScript library Vue.js and the front-end framework UIkit. Thanks to these two libraries, YOOtheme Pro is extremely modular and extendable, and its fast and lightweight JavaScript provides a great user experience. The page builder generates small, clean and semantic markup, which is optimized for fast loading times. So let's take a closer look at the technologies YOOtheme Pro uses to speed up your browser's rendering time.

Lazy Loading Images

Images make up most of your website's total size, which can significantly impact the loading times. To improve page speed and decrease server traffic, YOOtheme Pro uses lazy loading. This means that initially only above-the-fold images are fully loaded. Other images are loaded as they enter the viewport. To prevent content from jumping, an empty placeholder image is generated instantly. Your visitors will not even notice that images are lazy loaded, and the first meaningful paint will get faster on the screen. You can also lazy load video elements.

Auto-generated srcsets

To make sure you get the best resolution on every device, YOOtheme Pro auto-generates srcsets. These are multiple versions of the same image in different sizes each used for a specific device. When you upload an image in YOOtheme Pro’s page builder and set a width or a height value, YOOtheme Pro generates seven srcset images. The first two are 100% and 200% of the target size. Other five images have the most frequently used device resolutions: 768, 1024, 1366, 1600 and 1920. Of course, these are only generated if the image size allows it, which is why you should always upload images with the highest resolution possible. This feature will guarantee the best user experience from mobiles to retina displays.

While srcsets really improve performance, they are usually not served for background images used as section or column backgrounds. These images extend to the full width and are often quite large, so loading them on mobiles takes a lot of bandwidth. To solve this problem, YOOtheme Pro also generates srcsets for background images, which is great for your mobile page speed rank.

Next-gen Image Format

To save bandwidth, Google also recommends using next-generation image formats like WebP. This format has a superior compression and quality characteristics as compared to the most common used image formats JPEG and PNG. Using WebPs saves size and consumes less cellular data. YOOtheme Pro automatically generates and serves images in WebP format for Chrome browsers. In case a visitor uses other browsers, the original JPEG or PNG images will be served.

Local Google Fonts

YOOtheme Pro stores Google Fonts locally. When you select a Google font in YOOtheme Pro, the `woff` and `woff2` font files are downloaded to your server and included into the CSS. This is not only helps with GDPR compliance, but it also largely improves the speed of your website since there is no round-trip to Google servers anymore. And if your web server supports HTTP/2, there is no round-trip at all.

Other Advanced Features

Apart from providing a fast user experience, YOOtheme Pro is also very developer-friendly. It allows you to override and extend everything, add custom elements, CSS, JavaScript and even create new theme settings. YOOtheme offers an extensive documentation on YOOtheme Pro, which includes a section specifically written for developers. There you will find information, tutorials and examples on custom assets, child themes, custom elements and much more.

Conclusion

As you can see, YOOtheme Pro is a very versatile theme and page builder for WordPress that really cares about speed. It integrates more optimizations for your Google PageSpeed rank than any other page builder on the WordPress market right now. It is a great tool for designers that gives them the power to create with none of the coding. But it was also built with developers in mind giving them the possibility to customize everything. YOOtheme Pro regularly releases theme packages on a particular topic including a thought-through content structure. Beautiful layouts, various styles and free-to-use images along with regular feature updates make YOOtheme Pro the next WordPress theme and page builder to watch for. So get YOOtheme Pro and try it out for yourself.

The post Speed Up Your WordPress Website with YOOtheme Pro appeared first on SitePoint.

by SitePoint Team via SitePoint