回到见解

快速简单的技巧,以提高您的网站速度(第1部分)

5分钟阅读

回到见解

5分钟阅读

快速简单的技巧,以提高您的网站速度(第1部分)

作者: 瑞安·科菲尔德(Ryan Corfield)
发表于 Web开发 于2019年4月26日上午12:00

多亏了Google’的PageSpeed Insights工具,网页速度和性能从来都不是网站利益相关者的主意。虽然PageSpeed Insights作为一种工具确实令人眼花gla乱 信誉问题 (甚至是Google拥有的 YouTube仅获得68分),尤其是未经训练的人观看和解释时,’试图达到的目标是正确的。所以在这里’易于实施的更改列表的第1部分,以增强您的网站’s performance.

Gzip压缩

Gzip将压缩您的网页和资产,从而降低用户访问您的网站时需要下载的总体数据。它’超级容易启用,在某些情况下可以减少多达70%的文件大小。

Apache配置:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xml+rss
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/bmp
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/jpeg
Header append Vary User-Agent

Nginx配置:
gzip on;
gzip_proxied any;
gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml image/png image/jpeg;
gzip_vary on;

自然,添加您想要包含的所有其他MIME类型。

优化图像

未优化(或未优化)的JPG / PNG图像是页面加载时间中最大,最明显的因素之一。只需确保图像正确压缩并以适合应用程序的格式进行,即可进行大量改进。可以通过两种方式压缩图像:无损和有损。无损压缩的目的是在不牺牲质量的情况下减小图像的文件大小,而无损压缩将牺牲数据和质量,以大大减小文件大小。

You’ll have to make a judgement call on which type of compression is appropriate, but a great tool for this is: //compressor.io/

尽管我认为是更好的解决方案,但还是要使用WebP之类的下一代图像格式。 WebP是Google创建的一种图像格式,专门设计用于网络,因此可以看到文件大小大大减少了(I’我们看到一张150kb的图片被压缩到20kb)。它’s 尚不被所有主流浏览器支持, 那么你’对于这些情况,需要实现png / jpg后备广告。

如果你’重新运行WordPress,在那里’一个非常有用的插件, WebP Express,从而简化了整个过程,并为您解决了后备问题。另外,一个好的解决方案是在构建脚本中实现cwebp二进制文件,以自动化转换过程。

延迟加载图像

什么’从页面加载中下载页脚图像加载中,有90%的用户永远看不到吗?这会浪费用户的数据,带宽,系统资源和时间。这是延迟加载的地方。

延迟加载是一种延迟加载资产的技术’t在页面加载时需要。在图像方面,可以将其视为任何最初不在屏幕上的图像(例如,在折叠以下或在滑块中的第二个图像)。

实现此行为的一个很好的工具是 懒人.

通过将优先级分类为Lazysizes优先处理图像加载“in view”, “very near view”, and “not so near view”确定需要下载哪些图像以及何时下载。它还带有一个很棒的JS API。

缩小资产

提高性能的另一种简单方法是最小化CSS&JS资产。缩小实际上是从文件中删除不必要的字符的过程,其主要目的是减小文件大小并随后加快下载速度。

有许多工具可以完成此操作,您可以通过将其添加到构建脚本中来自动化该过程,但是为了简洁起见,这里仅举几个示例:

CSSNano: //cssnano.co/
UglifyJS: http://lisperator.net/uglifyjs/

浏览器缓存

利用浏览器缓存获胜’为首次访问者做一个记笔记,但对于回头客,收益是巨大的。浏览器缓存通过在用户上存储文件/资产来提供帮助’s machine after they’最初下载了它们–意味着他们下次访问时会赢’无需重新下载相同的文件。这样可以减少Web服务器上的负载,并消除用户的网络延迟和下载。

We’能够为用户访问时可能会遇到的每种资产类型设置到期时间。因此,例如,您可能希望有一个较短的到期时间,使资产更有可能定期更新,而映像则不太可能更改。

Apache配置:

ExpiresActive On
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"

Nginx配置:
location ~* .(?:css|js)$ {
expires 30d;
add_header Pragma public;
add_header Cache-Control "public";
}
location ~* .(?:ico|gif|jpe?g|png)$ {
expires 1y;
add_header Pragma public;
add_header Cache-Control "public";
}

这不是’大量的文件类型列表,因此您’我想添加自己的用户可能遇到的特定于应用程序的应用程序。

反向代理

使用反向代理来处理静态资产服务是一种获得某些额外性能的好方法。例如,据报道Nginx能够比Apache更快地提供静态资产。有时候虽然’完全替换Apache只是不可行的,因为它’例如,在共享托管环境中,它要灵活得多。好消息是,我们可以并行运行Apache和Nginx,从而使Nginx可以处理我们的静态内容,而Apache可以处理我们的动态内容。

如果您要进行设置,这很简单’重新运行像Plesk这样的东西,但是对于那些’t,看看如何在这里进行设置: //www.keycdn.com/support/nginx-reverse-proxy

什么 do you think of this article?

爱它

有趣

不适合我

什么 do [你] want to do next?

阅读更多博客。

看我们的工作。