Key Takeaways
- YOOtheme Pro is a WordPress theme and page builder that enhances the speed of your website with its small, clean code base and the application of the latest web technologies. It uses JavaScript library Vue.js and front-end framework UIkit, which make it modular, extendable, and user-friendly.
- The tool employs various techniques to speed up your website’s rendering time, including lazy loading of images, auto-generation of srcsets for optimal resolution on all devices, use of next-gen image format WebP for superior compression and quality, and local storage of Google Fonts to eliminate round-trips to Google servers.
- Besides its focus on speed, YOOtheme Pro is also developer-friendly, allowing for extensive customization, addition of custom elements, CSS, JavaScript, and creation of new theme settings. It is compatible with most WordPress themes and integrates more optimizations for Google PageSpeed rank than any other page builder in the market.
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.
Frequently Asked Questions (FAQs) about Speeding Up Your WordPress Website with Yootheme Pro
What Makes Yootheme Pro Different from Other Page Builders?
Yootheme Pro stands out from other page builders due to its unique features and functionalities. It offers a real-time page builder that allows you to see changes as you make them. It also provides a library of pre-designed layouts and elements, which can be customized to fit your website’s theme. Additionally, Yootheme Pro is built on the powerful UIKit framework, which ensures your website is responsive and performs optimally on all devices.
How Can Yootheme Pro Improve My Website’s Speed?
Yootheme Pro is designed to enhance your website’s speed in several ways. It uses clean, lightweight code that reduces the load on your server. It also optimizes images and other media files to ensure they load quickly. Furthermore, Yootheme Pro includes caching features that store a version of your website on your visitors’ devices, reducing the time it takes to load your site when they return.
Is Yootheme Pro Compatible with All WordPress Themes?
Yootheme Pro is designed to be compatible with most WordPress themes. However, it works best with themes that are built on the UIKit framework. If you’re using a different theme, you may need to make some adjustments to ensure Yootheme Pro works correctly.
Can I Use Yootheme Pro If I Don’t Have Coding Skills?
Absolutely! Yootheme Pro is designed to be user-friendly, even for those without coding skills. It offers a drag-and-drop interface that makes it easy to design and customize your website. Plus, it provides a library of pre-designed layouts and elements that you can use to create a professional-looking website without needing to write a single line of code.
How Can I Optimize Images Using Yootheme Pro?
Yootheme Pro includes an image optimization feature that automatically compresses your images without compromising their quality. This ensures your images load quickly, improving your website’s speed and performance.
Does Yootheme Pro Support E-commerce Websites?
Yes, Yootheme Pro supports e-commerce websites. It integrates seamlessly with WooCommerce, the most popular e-commerce plugin for WordPress. This allows you to design and customize your online store using Yootheme Pro’s powerful features.
Can I Use Yootheme Pro on Multiple Websites?
Yes, you can use Yootheme Pro on multiple websites. However, you’ll need to purchase a separate license for each website. Yootheme offers several licensing options to suit different needs and budgets.
Does Yootheme Pro Offer SEO Features?
While Yootheme Pro doesn’t include built-in SEO features, it is designed to be SEO-friendly. It uses clean, semantic code that is easy for search engines to read and understand. Plus, it’s compatible with popular SEO plugins like Yoast SEO, allowing you to optimize your website for search engines.
How Can I Update Yootheme Pro?
Updating Yootheme Pro is easy. You can update it directly from your WordPress dashboard. Yootheme also provides regular updates to ensure your website is always running the latest and most secure version of the plugin.
What Kind of Support Does Yootheme Offer?
Yootheme offers comprehensive support for Yootheme Pro users. This includes a detailed documentation, video tutorials, and a support forum where you can ask questions and get help from the Yootheme community. Plus, if you encounter any issues, you can contact Yootheme’s support team for assistance.