wordpress加载缓慢_WordPress的延迟加载：如何将其添加到您的网站
wordpress加载缓慢
This article on lazy loading for WordPress was originally published by Torque Magazine, and is reproduced here with permission.
这篇关于WordPress的延迟加载的文章最初是由Torque Magazine发行的，经许可在此处转载。
Adding lazy load to your WordPress website is an effective tool to speed up your WordPress website. We have written extensively (we even made a case study) about how slow page loading speed negatively effects conversions, SEO, and other markers for online success. The faster your site loads, the better.
向您的WordPress网站添加延迟加载是加速WordPress网站的有效工具。 我们已经广泛撰写 (甚至进行了案例研究 )有关页面加载速度缓慢如何对转换，SEO和其他在线成功标记产生负面影响的文章。 网站加载的速度越快越好。
Two of the most important factors that slow down sites are HTTP requests and page weight. Naturally, the more requests a browser has to send to the server, the longer it will take to process the site. At the same time, the larger your page is (for example, because it contains many images), the longer it will take to load.
降低网站速度的两个最重要因素是HTTP请求和页面权重。 自然，浏览器向服务器发送的请求越多，处理该站点所需的时间就越长。 同时，页面越大(例如，因为它包含许多图像)，则加载时间就越长。
Lazy load is a technique that addresses both of these factors. It means delaying a load of some parts of a web page until they are actually needed. It’s also the topic of this blog post. In the following, you will learn how lazy load works, its advantages and disadvantages and as well as ways to add lazy load to WordPress.
延迟加载是一种解决这两个因素的技术。 这意味着将网页某些部分的加载延迟到实际需要时才进行。 这也是此博客文章的主题。 在下面的内容中，您将学习延迟加载的工作原理，优点和缺点以及向WordPress添加延迟加载的方法。
I hope you’re not too lazy to keep reading!
希望您不要太懒惰以继续阅读！
什么是惰性负载？您可以将其用作什么？ (What is Lazy Load and What Can You Use It for?)
As already mentioned, lazy load is a way of keeping the browser from initially loading parts of web pages – typically images – and replace them with placeholders. That way, the page becomes smaller and less data needs to be transferred from server to browser.
如前所述，延迟加载是一种防止浏览器最初加载部分网页(通常是图像)并将其替换为占位符的方法。 这样，页面将变得更小，并且需要更少的数据从服务器传输到浏览器。
The result: a faster loading website and happier users.
结果：网站加载速度更快，用户更快乐。
But wait, don’t you need those parts of your site? If you didn’t, they wouldn’t be on there, right? Won’t it mess up the page?
但是，等等，您是否不需要网站的这些部分？ 如果您不这样做，他们就不会在那里，对吗？ 它会弄乱页面吗？
Well, here’s where the lazy in lazy load comes into play. The technique doesn’t simply prohibit browser from loading assets and images but simply delays it until they are actually needed.
那么，这里的地方在延迟加载懒惰进场。 该技术不仅可以禁止浏览器加载资产和图像，还可以将其延迟到实际需要时才进行。
For example, an image doesn’t need to be on the page until a visitor scrolls down far enough to actually see it. As a consequence, the browser doesn’t really need to load it until right before that happens. That’s exactly what lazy load does.
例如，在访客向下滚动足够远才能真正看到它之前，图像无需出现在页面上。 结果，浏览器直到真正发生之前才真正需要加载它。 这正是延迟加载所做的。
(By the way, there are other ways to optimize images on your website to make them load quicker.)
(顺便说一下，还有其他方法可以优化您网站上的图像，以使其更快地加载。)
延迟加载用例 (Lazy Load Use Cases)
Around the web, lazy load is most often used for images. You have probably seen it on popular sites like Buzzfeed, who use the technique to make their listicles appear more quickly inside their users’ browsers.
在网络上，惰性加载最常用于图像。 您可能已经在Buzzfeed等热门网站上看到了该网站，该网站使用该技术使他们的列表在用户浏览器中更快地显示。
However, that’s not the only thing lazy load is capable of delaying. Other examples are videos, scripts, and comments. In fact, moving JavaScript files to the footer of a page is a common technique to speed up page loading times.
但是，这并不是延迟加载能够延迟的唯一事情。 其他示例包括视频，脚本和评论。 实际上，将JavaScript文件移动到页面的页脚是加快页面加载时间的常用技术。
You might also be aware that YouTube only loads comments when you scroll down to them. That way, the platform makes sure that you get to watch your video more quickly. If it’s good enough for them, why not for you?
您可能还知道，YouTube仅在向下滚动到注释时才加载它们。 这样，该平台可确保您更快地观看视频。 如果对他们足够好，为什么不适合您呢？
There’s also a special application of lazy load called infinite scroll. It’s an alternative to classic pagination where additional posts load whenever the user reaches the bottom of a page. You can see it on Pinterest or if you are a user of Pocket.
延迟加载还有一个特殊应用，称为无限滚动。 它是传统分页的替代方法，在分页中，只要用户到达页面底部，就会加载更多帖子。 您可以在Pinterest上看到它，或者如果您是Pocket的用户。
It eliminates a lot of clicks and can be great for user experience. However, infinite scroll is not without controversy and won’t be the focus of this article.
它消除了很多点击，对于用户体验来说非常有用。 但是，无限滚动并不是没有争议，并且不会成为本文的重点。
延迟加载的优点 (Advantages of Lazy Load)
The main advantage of lazy load is already apparent: faster loading times. When you can shave off a large chunk of your page weight, it will naturally appear in the browser much faster.
延迟加载的主要优点已经很明显：更快的加载时间。 当您可以减少大部分页面重量时，它自然会更快地出现在浏览器中。
A nice side effect of that is that you save your visitors considerable bandwidth. Especially those using the data connection on their mobile device will be thankful. In addition to seeing your site quicker, they also don’t have to waste their plan on images they might never even see.
这样做的好处是可以为访问者节省大量带宽。 特别是那些在其移动设备上使用数据连接的用户将非常感激。 除了更快地查看您的网站外，他们也不必将计划浪费在他们可能从未看过的图像上。
在网站上使用延迟加载的缺点 (Disadvantages of Using Lazy Load on Your Site)
Yet, using lazy load is not all sunshine and rainbows. The technique also has some disadvantages.
但是，使用惰性负载并不仅是阳光和彩虹。 该技术也有一些缺点。
First and foremost, it’s not always search engine friendly. When you delay loading assets for visitors, you do the same for search engine spiders. As a consequence, they might not index some of your content, which is, of course, is not great for SEO. Even if workarounds exist. Naturally, this is a bigger problem when using lazy load for posts and not just images (which is why many stay away from it).
首先，它并不总是对搜索引擎友好。 当您延迟为访客加载资产时，对搜索引擎蜘蛛也是如此。 结果，它们可能不会为您的某些内容建立索引，这当然对SEO来说不是很好。 即使存在变通办法 。 自然，当对帖子而不是仅对图像使用延迟加载时，这是一个更大的问题(这就是为什么许多人远离它的原因)。
A second concern is user experience. When scrolling down your site very quickly, replacing placeholder images with actual visuals can make page content jump, which can be annoying.
第二个问题是用户体验。 当快速向下滚动网站时，用实际的视觉效果替换占位符图像会使页面内容跳跃，这很烦人。
So, what’s the verdict on lazy load? In short: used within limits the technique can make your WordPress site load a lot faster, however, you need to keep an eye out for SEO and user experience.
那么，关于延迟加载的结论是什么？ 简而言之：在限制范围内使用该技术可以使您的WordPress网站加载速度大大加快，但是，您需要注意SEO和用户体验。
如何通过插件将延迟加载添加到WordPress (How to Add Lazy Load to WordPress via Plugin)
While it’s possible to add lazy load to WordPress manually (see Jay Hoffmann’s tutorial over at Elegant Themes), the much easier alternative is to use one of the plugins below. Many of the offers listed here are simple set-it-and-forget-it solutions that you only need to activate without any configuration. Most of them also very lightweight.
虽然可以手动将延迟加载添加到WordPress(请参阅Jay Hoffmann在Elegant Themes上的教程 )，但更容易的替代方法是使用下面的插件之一。 此处列出的许多优惠都是简单的“一劳永逸”解决方案，您只需**即可，无需任何配置。 他们中的大多数人也很轻巧。
For that reason, adding lazy load to WordPress without a plugin just seems like an unnecessary effort to me (unless you do it to improve your technical chops, which is a legitimate reason). For most users, it’s better to choose one of the many lazy load plugins the WordPress sphere has to offer.
因此，在没有插件的情况下向WordPress添加延迟加载对我来说似乎是不必要的工作(除非您这样做是为了改善技术性能，这是合理的原因)。 对于大多数用户而言，最好选择WordPress领域必须提供的众多延迟加载插件之一。
延迟加载 (Lazy Load)
Our first candidate is the most popular free solution for lazy loading images out there. It has over 90,000 installs and a solid 4-star rating. Its popularity might be partially explained by the fact that the Automattic team is a contributor to it.
我们的第一个候选人是最流行的免费解决方案，用于在那里延迟加载图像。 它具有超过90,000的安装次数，并获得稳定的4星级评级。 Automattic团队是其贡献者这一事实可以部分解释其受欢迎程度。
The Lazy Load plugin uses jQuery.sonar for loading images only when they appear in the viewport (which is the part of the site that you see on your device). The unzipped plugin is just 20KB large and all you need to do is install and activate it. No configuration necessary.
延迟加载插件仅在图像出现在视口(这是您在设备上看到的网站的一部分)时才使用jQuery.sonar加载图像。 解压缩后的插件只有20KB大，您需要做的就是安装并**它。 无需配置。
BJ懒加载 (BJ Lazy Load)
The runner-up to the throne of best lazy load WordPress plugins is BJ Lazy Load. It boasts more than 60,000 installs and similarly good ratings.
最佳延迟加载WordPress插件的第二名是BJ Lazy Load。 它拥有超过60,000的安装次数，并且具有良好的评级。
The plugin replaces all images and iframes (including YouTube and Vimeo videos) in your content with a placeholder until viewed. Install, activate and you are good to go.
该插件会使用占位符替换您内容中的所有图像和iframe(包括YouTube和Vimeo视频)，直到被查看。 安装，**后，一切顺利。
WP火箭的延迟加载 (Lazy Load by WP Rocket)
Here we have a plugin by the same maker as the popular caching plugin WP Rocket. It can lazy load images and/or iframes including thumbnails, widget content, avatars, and smileys. What’s more, the plugin doesn’t use any JavaScript libraries. That’s probably one of the reasons it weighs less than 10KB.
在这里，我们有一个与流行的缓存插件WP Rocket相同厂商的插件。 它可以延迟加载图像和/或iframe，包括缩略图，小部件内容，头像和表情。 此外，该插件不使用任何JavaScript库。 这可能是它不到10KB的原因之一。
More than 10,000 websites trust Lazy Load by WP Rocket, so it seems to be doing its job properly. The plugin site in the WordPress directory also contains code to selectively deactivate lazy load on pages or images or change its loading threshold. Otherwise, no configuration options are available.
超过10,000个网站信任WP Rocket的“延迟加载”，因此它似乎做得很好。 WordPress目录中的插件站点还包含用于选择性地停用页面或图像上的延迟加载或更改其加载阈值的代码。 否则，将没有可用的配置选项。
a3延迟加载 (a3 Lazy Load)
a3 Lazy Load claims to be the “most fully featured, incredibly easy to set up lazy load plugin for WordPress.” It’s also one of the few entries on this list that actually comes with some settings.
a3 Lazy Load声称是“功能最全，非常容易设置的WordPress延迟加载插件。” 它也是此列表中实际具有某些设置的少数几个条目之一。
The plugin is suitable for lazy loading images, videos and iframes in posts, pages, widgets, thumbnails and/or avatars. It also works for post embeds and is WooCommerce compatible (read our beginner’s guide to WooCommerce).
该插件适用于在帖子，页面，小部件，缩略图和/或头像中延迟加载图像，视频和iframe。 它也适用于帖子嵌入，并且与WooCommerce兼容(请阅读WooCommerce的初学者指南 )。
a3 Lazy Load even offers effects images that appear on the site. As if that isn’t enough, it also lets you choose whether to load its script in the header or footer (a lazy load plugin that lazy loads itself, how meta) and ignore images or videos.
a3延迟加载甚至提供出现在网站上的效果图像。 如果这还不够，还可以选择是否将其脚本加载到页眉或页脚(一个延迟加载插件，该延迟加载自身，元数据)以及忽略图像或视频。
Finally, it’s compatible with a whole host of mobile and caching plugins as well as content delivery networks. I’m beginning to see that their claim might not be entirely unfounded.
最后，它与整个移动和缓存插件以及内容交付网络兼容。 我开始看到他们的主张可能并非完全没有根据。
疯狂的懒惰 (Crazy Lazy)
One of the main reasons I included this plugin is its awesome logo. I mean, look at that snail!
我包含此插件的主要原因之一是其出色的徽标。 我的意思是，看看那只蜗牛！
However, besides that, it’s also a lazy load plugin for images that uses very few resources. Crazy Lazy comes with the usual functionality and prevents images from loading before the user sees them. No configuration necessary, just switch it on and you are good.
但是，除此之外，它还是使用很少资源的图像的延迟加载插件。 Crazy Lazy具有通常的功能，可以防止在用户看到图像之前加载图像。 无需配置，只需将其打开即可。
If you do want to configure something, you are able to set your own placeholder images via CSS (the plugin page contains code for that) and exclude images (it has code for that, too).
如果确实要配置某些内容，则可以通过CSS设置自己的占位符图像(插件页面包含该代码)，并排除图像(也包含该代码)。
加速–延迟加载 (Speed Up – Lazy Load)
Another plugin that keeps images and iframes from loading until necessary. Only 5KB light (do these developers compete in who can make the smallest plugin?) and without any need for configuration. It has a shortcode to deactivate lazy load wherever it isn’t needed and lets you deactivate it for single images as well. So far only 3,000+ installs, however, it comes with a full 5-star rating.
另一个插件，可在需要之前阻止加载图片和iframe。 仅5KB的光(这些开发人员会竞争谁能制造出最小的插件吗？)，而无需进行任何配置。 它具有一个短代码，用于在不需要的地方停用延迟加载，并且还可以针对单个图像停用它。 到目前为止，只有3,000多次安装，但是它具有完整的5星级评级。
WordPress无限滚动– Ajax加载更多 (WordPress Infinite Scroll – Ajax Load More)
We talked about infinite scroll earlier, now here’s a plugin to add it to your site.
之前我们讨论了无限滚动，现在有一个插件可以将其添加到您的网站。
WordPress Infinite Scroll allows you to lazy load posts, single posts, pages, comments and other page elements by building your own custom shortcodes. You can query different content types by post type or format, date, category, tag and much more. After that, you may add the shortcodes either in the WordPress editor or within templates.
WordPress Infinite Scroll允许您通过构建自己的自定义简码来延迟加载帖子，单个帖子，页面，评论和其他页面元素。 您可以按帖子类型或格式，日期，类别，标签等查询不同的内容类型。 之后，您可以在WordPress编辑器中或模板中添加短代码。
The plugin also works with WooCommerce and Easy Digital Downloads and offers a number of premium addons.
该插件还可以与WooCommerce和Easy Digital Downloads一起使用，并提供许多高级插件。
WP YouTube Lyte (WP YouTube Lyte)
Our final entry is a lazy load plugin only for video content. It allows you to input special YouTube links that only load the YouTube player upon click, not earlier.
我们的最后一个条目是仅用于视频内容的延迟加载插件。 它允许您输入特殊的YouTube链接，这些链接仅在单击时加载YouTube播放器，而不是更早加载。
Basically, all you need to do is change one letter in your link to make it work. Alternatively, you can use shortcodes to input video content or have the plugin parse YouTube links automatically. Plus, it lets you insert only the audio part if needed.
基本上，您需要做的就是更改链接中的一个字母以使其起作用。 另外，您也可以使用简码输入视频内容，或让插件自动解析YouTube链接。 另外，它允许您仅在需要时插入音频部分。
For an alternative, check Lazy Load for Videos.
另一种选择是，检查视频的延迟加载 。
延迟加载和WordPress简而言之 (Lazy Load and WordPress in a Nutshell)
With page loading speed continuing to be an important factor for user experience and SEO, lazy load is another tool in your toolbox to improve it. The technique decreases page weight and HTTP requests, allowing visitors to see their desired page more quickly.
随着页面加载速度继续成为用户体验和SEO的重要因素，延迟加载是工具箱中另一个可以改善它的工具。 该技术减少了页面权重和HTTP请求，使访问者可以更快地查看所需页面。
Above, we have talked about how lazy loading works and what you can use it for. Besides its main application for images, you can also apply it to videos, scripts, comments, and even posts and pages.
上面，我们讨论了延迟加载的工作原理以及可以将其用于什么。 除了用于图像的主要应用程序外，您还可以将其应用于视频，脚本，评论，甚至帖子和页面。
While you need to pay attention to SEO, if used in the right way, lazy load still good option to make your WordPress site faster. If you want to give it a try, one of the plugins on this list is surely able to satisfy your needs.
虽然您需要注意SEO，但是如果以正确的方式使用SEO，则延迟加载仍然是使您的WordPress网站更快的好选择。 如果您想尝试一下，此列表中的某个插件肯定可以满足您的需求。
wordpress加载缓慢