wordpress主题_如何提高WordPress主题的性能

wordpress主题

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

本文是与SiteGround合作创建的系列文章的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

Average page weight reached 2,884kb in May 2017. Research by Google DoubleClick reported an average load time of 19 seconds on mobile devices. Yet performance matters more than ever:

2017年5月，平均页面重量达到了2,884kb。GoogleDoubleClick的研究报告称，在移动设备上的平均加载时间为19秒。然而，性能比以往任何时候都重要：

User Frustration Users will not wait. According to research by the Aberdeen Group, every one second delay results in:

用户沮丧用户不会等待。根据阿伯丁集团的研究，每延迟一秒钟会导致：

11% fewer page views页面浏览量减少11％
a 16% decrease in user satisfaction用户满意度降低16％
a 7% drop in conversions转化次数下降7％

MobileMobile access accounts for 55% of all web traffic. Device and bandwidth capabilities improve but not at the rate page weight is growing. Users are often charged per byte.

移动移动访问占所有Web流量的55％。设备和带宽功能有所提高，但页面权重并未以这种速度增长。用户通常按字节收费。

Search Engine Ranking Google penalizes slow, heavyweight sites.

搜索引擎排名 Google惩罚速度缓慢，重量级的网站。

Hosting Costs Hosting with companies such as SiteGround will be reasonable but heavyweight sites use more resources and cost more than slimmer alternatives.

托管费用用SiteGround这样的公司托管费用是合理的，但是重量级站点使用的资源更多，成本也比更苗条的替代方案高。

Maintenance The more assets your site requires, the more costly it is to maintain.

维护您的站点需要的资产越多，维护成本就越高。

Ultimately, a slow site costs you and your users money. Remind your boss of this simple fact the next time they demand a frivolous feature!

最终，网站运行缓慢会花费您和您的用户金钱。 在下一次他们要求琐碎的功能时，提醒老板这个简单的事实！

Ideally, you should consider performance before the first line of code is written. However, you’re probably reading this article because you have a theme exhibiting performance issues. Fortunately, there are some cost-effective options to address the problem and there’s no downside. Every millisecond saved reduces your costs while increasing user satisfaction, engagement and revenue.

理想情况下，您应该在编写第一行代码之前考虑性能。但是，您可能正在阅读本文，因为您有一个展示性能问题的主题。幸运的是，有一些具有成本效益的选项可以解决该问题，并且没有不利之处。节省的每一毫秒减少了成本，同时提高了用户满意度，参与度和收入。

哪些因素会影响效果？ (What Factors Affect Performance?)

Performance is affected by:

性能受以下因素影响：

the number of HTTP requestsHTTP请求数
the size of downloaded assets下载资产的大小
the efficiency of the page页面的效率

The number of HTTP requests is determined by the number of files and Ajax calls required to make your page work: the HTML, CSS, JavaScript, images, fonts, data, and all other assets. HTTP/2 addresses this issue but both your server and the user’s browser must be configured to enable support. Even with HTTP/2, twenty file requests remains less effective than ten.

HTTP请求的数量取决于使页面工作所需的文件和Ajax调用的数量：HTML，CSS，JavaScript，图像，字体，数据和所有其他资产。 HTTP / 2解决了此问题，但是必须将服务器和用户的浏览器都配置为启用支持。即使使用HTTP / 2，二十个文件请求的有效性仍然不如十个。

The main factor is the size of each file. To put this into context, 2,884kb is 20% larger than the original version of id Software’s Doom. Admittedly, we’re comparing modern web pages against a 25 year-old game but most pages show a few paragraphs of content while Doom implements a 3D engine, multiple levels, graphics, music and sound effects.

主要因素是每个文件的大小。为了说明这一点，2,884kb比id Software的Doom的原始版本大20％。诚然，我们正在将现代网页与具有25年历史的游戏进行比较，但是大多数网页显示了几段内容，而《毁灭战士》则实现了3D引擎，多个级别，图形，音乐和声音效果。

Even a relatively lightweight page can be inefficient. For example, if your three-page website has a 500kb JavaScript framework dependency, that code must be downloaded, parsed and executed before the first character can be seen. A server-rendered HTML file will start to appear before it’s fully loaded — even if the assets total more than 500kb.

即使是相对较轻的页面也可能效率不高。例如，如果您的三页网站具有500kb JavaScript框架依赖性，则必须先下载，解析和执行该代码，然后才能看到第一个字符。服务器渲染HTML文件将在完全加载之前开始显示-即使资产总计超过500kb。

Finally, server speed, compression and caching are other important considerations.

最后，服务器速度，压缩和缓存是其他重要考虑因素。

衡量绩效 (Measuring Performance)

It’s important to measure performance to identify the bottlenecks and ensure that your updates have improved the page. The following tools provide a breakdown of request and response times with update suggestions:

衡量性能以识别瓶颈并确保您的更新改进了页面很重要。以下工具提供了请求和响应时间的细分以及更新建议：

Pingdom

平度
Google Page Speed Insights

Google Page Speed Insights
GTmetrix

GTmetrix
WebPageTest

WebPageTest

Your browser’s Developer Tools network tab also provides information about layout and the time required before the page is ready to user events.

浏览器的“开发人员工具” 网络选项卡还提供有关布局以及页面准备好进行用户事件之前所需时间的信息。

快速获胜 (Quick Wins)

The following updates should take no longer than a few minutes — you have no excuses!

以下更新不超过几分钟- 您没有任何借口！

与您的虚拟主机联系 (Contact Your Web Host)

A good web host will analyse your usage and advise about service, hardware, and software upgrades. This can provide a cost-effective performance boost with minimal effort.

好的网络托管服务商将分析您的使用情况，并提供有关服务，硬件和软件升级的建议。这可以以最小的努力提供具有成本效益的性能提升。

Our partner SiteGround has a proactive and knowledgeable support team of WordPress experts who will be happy to help you with this. SiteGround provides a range of WordPress-specific plans, with up to 65% off for SitePoint users.

我们的合作伙伴SiteGround拥有一支积极主动且知识渊博的WordPress专家支持团队，他们将很乐意为您提供帮助。 SiteGround提供了一系列针对WordPress的计划，为SitePoint用户提供高达65％的折扣。

激活GZIP压缩 (Activate GZIP Compression)

Almost 30% of sites fail to activate GZIP compression. This can normally be enabled in the web server settings or WordPress plugins such as WP HTTP Compression and W3 Total Cache.

几乎30％的站点无法激活GZIP压缩。通常可以在Web服务器设置或WordPress插件(例如WP HTTP Compression和W3 Total Cache)中启用此功能。

激活WordPress缓存 (Activate WordPress Caching)

Several WordPress plugins are available which render pages and store them in a cache on their first request. Subsequent requests fetch these pages from the cache rather than regenerating the database content within the template. Caching plugins include W3 Total Cache, WP Super Cache, Hyper Cache, WP Fastest Cache and Cache Enabler.

有几个WordPress插件可用于呈现页面，并在首次请求时将其存储在缓存中。后续请求从缓存中获取这些页面，而不是重新生成模板中的数据库内容。缓存插件包括W3 Total Cache ， WP Super Cache ， Hyper Cache ， WP Fastest Cache和Cache Enabler 。

Your hosting provider may be able to enable caching for you. Our partner, SiteGround, has a bespoke caching tool that can drastically boost website speed.

您的托管服务提供商可以为您启用缓存。我们的合作伙伴SiteGround具有定制的缓存工具，可以大大提高网站速度。

启用浏览器缓存 (Enable Browser Caching)

The user won’t necessarily need to download an asset again if it’s cached by the browser. Simple solutions include setting an appropriate Expires header, Last-Modified date or adopting ETags in the HTTP header. The following .htaccess example asks browsers to cache images for one month:

如果浏览器缓存了资产，则用户不一定需要再次下载资产。简单的解决方案包括设置适当的Expires标头， Last-Modified日期或在HTTP标头中采用ETag 。以下.htaccess示例要求浏览器将图像缓存一个月：

<IfModule mod_expires.c>
ExpiresActive On
<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>
</IfModule>

禁用未使用的插件 (Disable Unused Plugins)

Most plugins will add code to your website such as additional CSS or JavaScript even if you’re not using it. WordPress administrators can disable plugins from the WordPress control panel or remove the plugin code entirely if they’re certain it’ll never be used.

即使您不使用插件，大多数插件也会将代码(例如其他CSS或JavaScript)添加到您的网站。 WordPress管理员可以确定无法使用插件，可以从WordPress控制面板禁用插件，也可以完全删除插件代码。

删除不必要的资产 (Remove Unnecessary Assets)

Does your template really need fifteen fonts? Have you added seven analytics systems? Is that third-party widget necessary? Is it necessary to show advertising from fifty ad networks? Do you need more than one JavaScript library? Could you replace JavaScript animations with CSS3 effects?

您的模板真的需要15种字体吗？您是否添加了七个分析系统？该第三方窗口小部件是否必要？是否有必要展示来自五十个广告网络的广告？您是否需要多个JavaScript库？您可以用CSS3效果替换JavaScript动画吗？

Have a clear out and remove anything you don’t need.

清理并清除不需要的任何东西。

替换社交网络按钮 (Replace Social Network Buttons)

Do you have Facebook, Twitter, Google+ and LinkedIn sharing buttons on your pages? Despite their innocent look, they can add several hundred kb of third-party JavaScript to your page. It’s a bloated security risk which have a negative affect on performance.

您的页面上是否有Facebook，Twitter，Google +和LinkedIn共享按钮？尽管外观纯洁，但他们仍可以向您的页面添加数百kb的第三方JavaScript 。这是security肿的安全风险，会对性能造成负面影响。

Third-party code is unnecessary — you can add fat-free social buttons to your pages with a few lines of HTML. A little JavaScript can enhance the experience to use pop-up windows or record usage with event tracking in Google Analytics.

不需要第三方代码-您可以使用几行HTML 向页面添加无脂肪的社交按钮。少量JavaScript可以增强使用弹出窗口或通过Google Analytics(分析)中的事件跟踪记录使用情况的体验。

连接并缩小JavaScript和CSS (Concatenate and Minify JavaScript and CSS)

It’s practical to split JavaScript and CSS files into self-contained modules during development. However, these should be concatenated and minified to remove comments and whitespace before hosting a single file on your production server.

在开发过程中将JavaScript和CSS文件拆分为独立的模块非常实用。但是，在将单个文件托管在生产服务器上之前，应将它们串联并缩小以删除注释和空格。

(Note your WordPress style.css file must retain the theme’s details at the top or it will break!)

(请注意，您的WordPress style.css文件必须在顶部保留主题的详细信息，否则它将损坏！)

处理您的图像 (Address Your Images)

Images are the biggest cause of website bloat. Removing a single 500kb high-resolution image could reduce weight and download times by 25% or more.

图片是造成网站膨胀的最大原因。删除单个500kb的高分辨率图像可以将重量和下载时间减少25％或更多。

删除或替换不必要的图像 (Remove or Replace Unnecessary Images)

I’m sure that hero image is lovely and on-brand but is it losing you customers? It may be possible to replace all or part of it with CSS3 gradients, borders, filters or other effects.

我敢肯定英雄形象是可爱的品牌形象，但是会失去您的客户吗？可以用CSS3渐变，边框，滤镜或其他效果替换全部或部分内容。

使用正确的图像格式 (Use the Correct Image Format)

Always use an appropriate image format. In general:

始终使用适当的图像格式。一般来说：

use SVG for vector logos and diagrams将SVG用于矢量徽标和图表
use JPG for photographs使用JPG拍摄照片
use PNG for everything else使用PNG进行其他所有操作
but consider GIF for smaller, limited-color images or those with animations.但对于较小的彩色图像或带有动画的图像，请考虑使用GIF。

There are alternative formats such as WebP but browser support is limited.

有其他格式，例如WebP，但浏览器支持有限。

If in doubt, try all the appropriate options and pick the best. But note:

如有疑问，请尝试所有适当的选项并选择最佳选项。但请注意：

JPG is a lossy format which removes details at higher compression. Find the best compromise between quality and file size for each image.JPG是一种有损格式，可以在较高压缩率下删除细节。在每个图像的质量和文件大小之间找到最佳折衷方案。
PNG offers 256 and 24-bit color varieties. The 256 color version normally results in a smaller file.PNG提供256和24位颜色。 256色版本通常会导致文件变小。
Both PNG and GIF offer transparency. Switch that off where possible to save further bytes.PNG和GIF均提供透明度。尽可能将其关闭以节省更多字节。

调整大位图图像的大小 (Resize Large Bitmap Images)

A basic camera or phone captures an image which is too large to display on any device. WordPress provides resizing options but, for best results, editors should crop and resize before upload.

基本的相机或电话捕获的图像太大，无法在任何设备上显示。 WordPress提供了调整大小的选项，但为了获得最佳效果，编辑者应在上传之前裁剪和调整大小。

Image dimensions should never exceed the maximum size of their container. Those using high-density/Retina displays may appreciate a higher resolution image but you can serve alternatives using the img tag srcset attribute.

图片尺寸不得超过其容器的最大尺寸。那些使用高密度/视网膜显示器的用户可能会喜欢高分辨率的图像，但是您可以使用img标签srcset属性提供替代方法。

Resizing images has a significant impact on page weight. Shrinking dimensions by 50% reduces the total area by 75% which improves the file size accordingly.

调整图像大小会严重影响页面重量。将尺寸缩小50％会使总面积减少75％，从而相应地增加了文件大小。

最大化图像压缩 (Maximize Image Compression)

You can radically reduce the size of a bitmap image by removing meta data, reducing color depth and tweaking compression factors. WordPress plugins such as WP Smush, EWWW Image Optimizer, Imagify, Kraken Image Optimizer, ShortPixel Image Optimizer and CW Image Optimizer can handle this process for you.

您可以通过删除元数据，减小颜色深度和调整压缩系数来从根本上减小位图图像的大小。诸如WP Smush ， EWWW Image Optimizer ， Imagify ， Kraken Image Optimizer ， ShortPixel Image Optimizer和CW Image Optimizer之类的WordPress插件可以为您处理此过程。

For best results, images should be processed prior to upload. Software options include OptiPNG, PNGOUT, jpegtran and jpegoptim. Windows users can try the fabulous RIOT. Alternatively, there are online tools such as TinyPNG / TinyJPG.

为了获得最佳效果，应在上载图像之前对其进行处理。软件选项包括OptiPNG ， PNGOUT ， jpegtran和jpegoptim 。 Windows用户可以尝试出色的RIOT 。或者，有一些在线工具，例如TinyPNG / TinyJPG 。

SVG images can be compressed by rounding values to fewer decimal places, simplifying paths, and removing unnecessary comments, attributes and white space from the XML. Your SVG editor should have options to compress the file or there are tools such as SVG editor and SVGO. You may also be able to move styling directives to CSS.

可以通过将值舍入到更少的小数位，简化路径以及从XML中删除不必要的注释，属性和空白来压缩SVG图像。您的SVG编辑器应该具有压缩文件的选项，或者有诸如SVG编辑器和SVGO之类的工具。您也许还可以将样式指令移至CSS。

实施延迟加载 (Implement Lazy Loading)

Finally, lazy loading techniques ensure images are only downloaded when their containing box is visible in the viewport. WordPress plugins to implement lazy loading include Lazy Load, jQuery Image Lazy Load WP, BJ Lazy Load, Rocket Lazy Load, Unveil Lazy Load and Lazy Load for Videos.

最后，延迟加载技术可确保仅在视口中包含图像的包含框时才下载图像。用于实现延迟加载的WordPress插件包括延迟加载， jQuery图像延迟加载WP ， BJ延迟加载，火箭延迟加载，揭开延迟加载和视频的延迟加载。

Other resources:

其他资源：

Five Techniques to Lazy Load Images for Website Performance

延迟加载图像以提高网站性能的五种技术
How to Build Your Own Progressive Image Loader

如何构建自己的渐进式图像加载器