更多优化技术,提高网站速度
Web性能是用户体验的一个基本元素。在第一部分在本系列的文章中,我谈到了一种自动化一些与web性能优化相关的任务的方法。
这里,在本系列的第二部分中,我们将稍微详细介绍一些先进的技术用于提高前端web性能。
以下是我们将要讨论的内容:
优化HTML结构
- 在底部引用JavaScript和CSS文件
- 处理未设置样式的内容(FOUC)的闪烁
- 内联CSS和JavaScript
服务器配置
- 浏览器缓存
- 文件应该缓存多长时间?
- 如何重写缓存
- 数据压缩
在应用了所有这些之后优化在我的网站上,我可以得到一个完美的(100/100)PageSpeed见解移动和桌面web性能分析的得分。
优化HTML结构
很长一段时间以来,我认为我的外部CSS和JavaScript引用应该在< >头
在HTML文档的开头引用JS和CSS资源对我来说很有意义,因为我需要这些东西来让我的网页看起来和正常工作。
但是有脚本
和链接
HTML文档开头的元素可能会阻止页面的呈现,这意味着在下载和处理资源之前,浏览器不会处理和显示任何后续HTML元素。
许多JavaScript文件,特别是那些考虑到异步编程而编写的文件,通常不需要在< >头
标签,并可以加载到HTML文档的更深处,这样它们就不会阻碍浏览器呈现页面内容。
在HTML文档的末尾引用CSS文件有点棘手。这是因为当您在文档的末尾加载CSS文件时,用户可能会开始看到没有任何样式的页面内容,因为外部样式表的样式规则还没有加载和处理。这种情况叫做无风格内容的Flash(FOUC)。
在底部引用JavaScript和CSS文件
只要有可能,我们应该在文档的底部引用外部资源。就在关门前身体
标签。
< html > < >头……主管< / > < >身体…<!——script和link元素理想地放在这里——>< /身体> < / html >
处理无风格内容的Flash
为了解决FOUC,我所做的是身体
元素一个不透明度为0%的内联样式属性。
<身体样式=不透明度:0>
然后,在外部样式表中,重置身体
元素回到100%不透明度。
身体{不透明度:1!重要;}
加载和处理外部样式表后,将显示内容。
这种技术的问题是,如果服务器发生故障导致CSS文件无法下载,用户就会看到一个空白页面,因为给身体
要素
内联CSS和JavaScript
您还可以在其中包含CSS样式规则标签和JS脚本
标签在你的HTML文档中。这提高了页面速度因为浏览器不需要请求和下载外部资源来呈现网页。然而,这只适合少量的CSS和JS。否则,HTML文档将增加文件大小,而JS和CSS将无法从浏览器缓存中获益。
多年来,我们一直不鼓励内联CSS和JS,因为这会使我们的项目更难模块化、扩展和维护。然而,现在有很多构建工具可以处理这些问题。现在推荐内联CSS和JS对呈现上面的内容至关重要,以提高页面的性能。
下面是一个脚本,它从外部样式表中内联样式规则。这是根据一个例子在PageSpeed Insights文档中找到。这种内联CSS样式规则的方法的问题是,如果用户禁用了JavaScript,样式规则将无法呈现。
< html > < >头……主管< / > < >身体…< /身体> < / html >
服务器配置
如果您可以访问您的服务器配置,那么您可以做两件事来提高站点速度:浏览器缓存和数据压缩。
浏览器缓存
允许浏览器缓存你的网站文件(外部样式表,JavaScript文件,图片等),这意味着当用户每次请求你网站上的网页时,你都不需要下载这些文件。这可以加快用户在导航到另一个网页时的体验,因为样式表和web字体等东西不需要再次下载,因为它们已经存储在用户的浏览器缓存中。
那么,我们如何允许浏览器缓存我们的文件呢?
当浏览器向我们的网络服务器请求文件时,服务器会做的一件事就是发送文件HTTP头信息。
文件的HTTP头包含有关所请求文件的元数据,以及浏览器应如何处理该文件的说明。
我们可以指定的一个标准HTTP报头字段是cache - control
.
cache - control
允许我们定义浏览器缓存文件的方式。我们可以使用cache - control
标头字段,告知浏览器是否应缓存文件,以及应缓存文件的时间。
事实证明,在我的网站上,没有cache - control
SVG文件的HTTP报头字段。
我在我的服务器上使用lighttpd模块,所以我打开它的配置文件(lighttpd.conf
),并添加以下行来设置最大年龄
指令为1个月。
到期。Url = ("/svg/" => "访问加1个月")
重新启动我的web服务器后,我使用镀铬工具检查SVG文件以确保我的配置按照计划进行。
你可以在地图上看到头选项卡中的cache - control
字段现在指定最大年龄
指令。
cache - control:信息= 2592000
顺便说一句最大年龄
以秒为单位指定。2,592,000秒= 30天。
文件应该缓存多长时间?
说到这个,并没有具体的规则完全你的文件应该缓存多长时间,但是最好的实践是缓存的时间越长越好。
缓存持续时间取决于您更新站点文件的频率以及缓存的文件类型。例如,你可以设置一个更长的最大年龄
对于不经常更改的文件,例如网站的logo、JS文件和CSS文件。
作为参考,HTML5样板具有以下缓存持续时间(您可以在其. htaccess
样板):
文件类型 | 缓存时间 |
---|---|
CSS文件 | 1年 |
JavaScript文件 | 1年 |
图像(例如PNG、JPG、GIF、SVG) | 1个月 |
HTML文档 | 没有缓存 |
覆盖浏览器缓存
如果我们在资源缓存过期之前更新资源,我们将需要一种方法来迫使浏览器重新下载资源。有很多方法可以处理这种情况。一种简单的方法是更改资源的名称并更新对它的引用。
例如,如果我们更新一个名为styles.css
,我们可以将其重命名为styles.v2.css
.您可以使用gulp-rev-all在资源更改时重命名资源,因为手动这样做是不可伸缩的。
然后我们还需要更新HTML以便链接引用styles.css
现在指向styles.v2.css
. 这通常是通过服务器端脚本(如PHP)和/或CMS模板文件来完成的,这样更新就会传播到整个站点。或者,您可以使用gulp-rev-replace包。
数据压缩
压缩文件可以让浏览器更快地下载它们。
当浏览器从服务器请求页面资源时,服务器将告诉浏览器资源已被压缩。然后浏览器将下载资源,然后解压缩它。
网站上最常用的数据压缩器之一是GZip.
在Apache上启用GZip
对于Apache web服务器,你可以添加GZip压缩指令. htaccess
文件。
以下指令集给出了关于哪些文件应该压缩,哪些文件不应该压缩的说明。只有在mod_gzip已在服务器上安装并启用。
mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)* mod_gzip_item_include mime ^application/x-javascript。* mod_gzip_item_exclude mime ^image/。* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip. zip. zip* < / ifModule >
或者,您可以使用Apache的mod_deflate单元
在nginx上启用GZip
如果你在nginx服务器上,下面是可以放在服务器配置文件中的GZip数据压缩指令。(以下内容依赖于nginxHttpGzipModule.)
gzip;gzip_comp_level 2;gzip_http_version 1.0;gzip_proxied任何;gzip_min_length 1100;gzip_buffers 16 8 k;Gzip_types文本/纯文本/html文本/css应用程序/x-javascript文本/xml应用程序/xml+rss文本/ javascript;#禁用IE < 6,因为有一些已知的问题gzip_disable”MSIE[1 - 6]。(? ! * SV1)”;#为下游代理添加一个vary头,以避免将缓存的gzip文件发送到IE6gzip_随时间而变化;
如果你在nginx上使用lighttpd:
#添加mod_compress到你的模块server.modules=(…“mod_compress”,…)compress.allowed-encodings=(“gzip”,“deflate”)compress.filetype=(“text/plain”,“text/html”,“text/javascript”,“text/css”,“text/xml”)#不要忘记创建一个缓存目录并在这里添加路径压缩。cache-dir = "<您的缓存目录>"
在我的例子中,web服务器启用了gzip压缩,但它没有压缩SVG文件,所以我必须将它添加到服务器应该压缩的文件类型列表中。
compress.filetype=(。。。,“图像/ svg + xml”)
注意:对配置文件进行任何更改后,不要忘记重新启动web服务器。
检查GZip压缩
为了验证GZip压缩实际上对SVG文件有效,我使用了Chrome DevTools。
在数据压缩:
大小:4.4KB内容:4.1KB
数据压缩后:
尺寸:280B内容:4.1KB
文件大小减少了-93.6%只需简单调整web服务器配置!
结论
现在是揭晓真相的时刻。
做了所有我讨论过的事情后,我的网站的PageSpeed得分是多少?
桌面页面速度洞察得分移动网页速度洞察得分
我的web性能优化系列文章到此结束。
我希望阅读这篇文章能帮助你制作更快的网站!此外,我希望你已经发现了一些想法和技术来自动化你的构建过程,以便web性能优化可以不需要太多的努力,在所有你未来的开发项目。
欢迎在Twitter和Facebook上分享如果这对你有帮助的话!我们都能从更快的网络中受益。
此外,如果你有提高网站速度的技巧,请在评论中分享!