Web 前端性能优化相关内容解析

Web 前端性能优化相关内容,来源于《Google官方网页载入速度检测工具PageSpeed Insights 使用教程》一文中PageSpeed Insights 的相关说明。大家可以对照着去优化自己的网站或者相关项目。本文由Jeff 整理。

0.提高服务器的响应速度

砸钱的东西,但却最根本;搞好这一项,甚比下面任何一项。

1.优化样式表和脚本的排列顺序

正确地排列外部样式表与外部和内嵌脚本的顺序,可增加下载时同时加载的数据量,并提高浏览器显示网页的速度。

将样式表放在顶部,将脚本放在底部

2.使用浏览器缓存

在 HTTP 标头中为静态资源设置有效期或最长存在时间(Google建议最短为一周,最好能达一年左右,⊙﹏⊙b汗),可指示浏览器从本地磁盘中加载以前下载的资源而不是从网络中加载。

3.使目标网页重定向可缓存

许多网页都会将用户重定向至不同的网址,例如:从 www.example.com 重定向至 m.example.com。使这些重定向信息可缓存到用户的浏览器中,可加快访问者多次访问同一网站时的网页加载速度。

4.内嵌小型 CSS

将小型样式表内嵌到主 HTML 网页中,可减少在下载其他资源时的往返时间 (RTT) 和延迟时间。

5.内嵌小型 JavaScript

将小型 JavaScript 文件内嵌到主 HTML 网页中,可减少在下载其他资源时的往返时间 (RTT) 和延迟时间。

6.压缩 CSS

压缩 CSS 代码可以节省大量的数据字节空间,并提高下载、解析和执行的速度。

7.压缩 HTML

压缩 HTML 代码(包括其中所含的任何内嵌 JavaScript 和 CSS)可节省大量的数据字节空间,并提高下载、解析和执行的速度。

8.压缩 JavaScript

压缩 JavaScript 代码可以节省大量的数据字节空间,并提高下载、解析和执行的速度。

9.启用 Keep-Alive

有效地降低TCP握手的次数,减少httpd进程数,降低内存的使用

10.启用压缩

使用 gzip 或 deflate 压缩资源,可减少通过网络发送的字节数。

11.将图片组合为 CSS 贴图定位

尽量减少使用 CSS 贴图定位合并图片后的文件数量,可减少在下载其他资源时的往返时间和延迟时间、节省请求开销,并减少网页下载的总字节数。

12.将查询字符串从静态资源中删除

在 HTTP 标头中为静态资源启用公共缓存,可让浏览器从附近的代理服务器中下载资源,而不必从远程原始服务器中下载。

13.尽量减少请求的数据量

尽量减少 Cookie 和请求标头的大小,可确保将 HTTP 请求放入单个数据包中。

14.尽量减少重定向

尽量减少从一个网址到另一个网址的 HTTP 重定向次数,以减少额外的往返时间 (RTT) 和用户等待的时间。

15.指定图片大小

为所有的图片指定宽度和高度,可消除进行不必要重排与重绘的需求,从而加快图片的显示速度。

16.提供压缩后的图片

适当地调整图片的大小,可节省大量的数据字节空间。

17.由同一网址提供资源

通过唯一的网址发布资源,这样才能避免下载重复的字节以及产生额外的往返时间 。

18.请指定一个“Vary: Accept-Encoding”标头

指示代理服务器缓存资源的两个版本:压缩版与未压缩版。这样有助于避免公共代理无法正确检测 Content-Encoding 标头的问题。

19.请指定缓存验证工具

通过指定缓存验证工具(Last-Modified 或 ETag 标头),您可以确保系统能够有效地确定缓存资源的有效性。

20.避免出现错误的请求

删除“已损坏的链接”或会导致 404/410 错误的请求,可避免发出无效的请求。

21.首选异步资源

错开资源的加载时间可减小网页加载时出现资源堵塞的概率。

22.避免在 CSS 中使用 @import

在外部样式表中使用 CSS @import 会增加网页加载时的延迟。

23.暂缓 JavaScript 解析

通过最大程度地减少显示网页所需的 JavaScript 数据量,并暂缓解析不需要的 JavaScript(等到需要执行时再进行解析),您可以提高网页的初始加载速度。

24.优化图片

适当地设置图片的格式并进行压缩,可节省大量的数据字节空间。

25.指定字符集

尽早为您的 HTML 文档指定字符集,可让浏览器立即开始执行脚本。

26.避免在meta 标签中指定字符集

27.合并CSS、JavaScript文件

减少HTTP请求的数量

相关阅读:

https://developers.google.com/speed/

http://developer.yahoo.com/performance/rules.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart 4.0 高级-安全

本页面介绍了Angular内置的针对常见的Web应用程序漏洞和跨站脚本攻击等攻击的内置保护。 它不包括应用程序级别的安全性,如身份验证(此用户是谁?)和授权(此...

902
来自专栏LIN_ZONE

谷歌断点调试(转载)

简单地说,断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,...

1214
来自专栏人工智能LeadAI

优雅的在终端中编写Python

最早我也只是在服务器上编辑文件的时候用用vim来改改程序,并没有把vim当做自己的主力编辑器。但是偶然的一次机会需要改一个奇葩的输入文件的格式,用了下Vim的宏...

1721
来自专栏编程

在 Vim 编辑器中开发 Python 应用的 Vim 插件

Python-mode 是一个 Vim 插件,它使你能够在 Vim 编辑器中更快的利用包括 pylint、rope、pydoc、pyflakes、pep8、au...

2988
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界...

3159
来自专栏刺客博客

基于宝塔Linux面板的shadowsocks可视化管理插件

今天发现个好东西,基于宝塔面板的ss插件,具体原理就是 php install shadowsoks之后制作的可视化工具,嗯,意思就是可以从宝塔面板创建需要的s...

1.8K4
来自专栏软件测试经验与教训

Fiddler用法整理

读书与实践是获取知识的主要渠道,学习的权力只掌握在每个人自己手中,让学习成为一种生活的习惯,这比任何名牌大学的校徽重要得多!

1321
来自专栏大前端开发

微信小程序从子页面退回父页面时的数据传递

我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数...

871
来自专栏美丽应用

给安卓Chrome加入主页按钮

7272
来自专栏韩东吉的Unity杂货铺

零基础入门 7: 创建自己的菜单

在上一篇菜单介绍分享之后,有一些小伙伴在后台留言说能不能分享下如何创建自定义的菜单栏?怎么创建?

1024

扫码关注云+社区