This article was created in partnership with YOOtheme. Thank you for supporting the partners who make SitePoint possible.
本文是与YOOtheme合作创建的。 感谢您支持使SitePoint成为可能的合作伙伴。
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.
从2018年7月开始，谷歌开始根据移动页面速度对其移动搜索结果进行排名。 这使得PageSpeed优化比以前更加重要。 幸运的是，有些工具可以帮助您加快网站速度。 YOOtheme Pro是一种新的WordPress主题和页面生成器，它的代码简洁，简洁，并使用最新的网络技术，可确保您网站的高页面速度排名。 下面是它的工作原理。
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:
对于那些不熟悉YOOtheme Pro的人来说，它是WordPress和Joomla的强大主题和页面生成器。 这些是其主要功能：
Intuitive drag & drop page builder 直观的拖放页面构建器 Element Library with 30+ elements (including Slider, Slideshow, etc.) 包含30多个元素的元素库(包括Slider，Slideshow等) Layout Library with 100+ pre-built premium layouts 具有100多个预建高级布局的布局库 Style Library with 70+ handcrafted styles 具有70多种手工样式的样式库 Integrated Unsplash Library 集成的未启动库 WooCommerce support WooCommerce支持 Footer Builder 页脚生成器 Fast and lightweight code base 快速轻量的代码库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.
YOOtheme Pro是使用JavaScript库Vue.js和前端框架UIkit构建的。 归功于这两个库，YOOtheme Pro具有极高的模块化和可扩展性，其快速，轻巧JavaScript提供了出色的用户体验。 页面构建器生成小的，干净的和语义的标记，该标记已针对快速加载时间进行了优化。 因此，让我们仔细看看YOOtheme Pro用来加速浏览器渲染时间的技术。
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.
图片占您网站总大小的大部分，这可能会严重影响加载时间。 为了提高页面速度并减少服务器流量，YOOtheme Pro使用了延迟加载。 这意味着最初仅完全加载首屏图像。 其他图像会在进入视口时加载。 为了防止内容跳跃，会立即生成一个空的占位符图像。 您的访客甚至不会注意到图像是延迟加载的，并且第一个有意义的绘制将在屏幕上变快。 您也可以延迟加载视频元素。
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.
为了确保您在每台设备上都能获得最佳分辨率，YOOtheme Pro会自动生成密码集。 这些是同一图像的多个版本，大小不同，每个版本都用于特定设备。 当您在YOOtheme Pro的页面构建器中上载图像并设置宽度或高度值时，YOOtheme Pro会生成七个图像集。 前两个是目标大小的100％和200％。 其他五张图像具有最常用的设备分辨率：768、1024、1366、1600和1920。当然，只有在图像尺寸允许的情况下才会生成这些图像，这就是为什么您应始终以尽可能高的分辨率上载图像的原因。 此功能将确保从手机到视网膜显示器的最佳用户体验。
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.
虽然srcsets确实可以提高性能，但通常不将它们用作用作节或列背景的背景图像。 这些图像会扩展到整个宽度，并且通常很大，因此将它们加载到手机上会占用大量带宽。 为了解决这个问题，YOOtheme Pro还为背景图像生成了srcset，这对于您的移动页面速度排名非常有用。
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.
为了节省带宽，Google还建议使用WebP之类的下一代图像格式。 与最常用的图像格式JPEG和PNG相比，此格式具有出色的压缩和质量特性。 使用WebP可以节省大小并减少蜂窝数据的消耗。 YOOtheme Pro会自动为Chrome浏览器生成WebP格式的图像并为其提供图像。 如果访问者使用其他浏览器，则将提供原始JPEG或PNG图像。
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.
YOOtheme Pro在本地存储Google字体。 当您在YOOtheme Pro中选择Google字体时，“ woff”和“ woff2”字体文件将下载到您的服务器并包含在CSS中。 这不仅有助于符合GDPR，而且由于不再需要往返于Google服务器，因此也大大提高了网站的速度。 而且，如果您的Web服务器支持HTTP / 2，则根本没有往返。
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.
除了提供快速的用户体验，YOOtheme Pro还非常易于开发。 它允许您覆盖和扩展所有内容，添加自定义元素，CSS，JavaScript甚至创建新的主题设置。 YOOtheme提供了有关YOOtheme Pro的广泛文档，其中包括专门为开发人员编写的部分。 在这里，您将找到有关自定义资产，子主题，自定义元素等的信息，教程和示例。
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.
如您所见，YOOtheme Pro是一个非常实用的WordPress主题和页面构建器，非常在乎速度。 目前，它为您的Google PageSpeed排名集成了比WordPress市场上任何其他页面构建器更多的优化。 对于设计师来说，这是一个很棒的工具，它使他们无需编写任何代码即可创建代码。 但是它也是在考虑开发人员的情况下构建的，使他们可以自定义所有内容。 YOOtheme Pro会定期发布有关特定主题的主题包，包括深思熟虑的内容结构。 精美的版式，各种样式和免费使用的图像以及定期的功能更新，使YOOtheme Pro成为下一个要关注的WordPress主题和页面构建器。 因此，请获取YOOtheme Pro并亲自尝试。
翻译自: https://www.sitepoint.com/speed-up-your-wordpress-website-with-yootheme-pro/
相关资源：yootheme widgetkit