解读谷歌PageSpeed网页性能

解读谷歌PageSpeed网页性能谷歌为了帮助Web开发者提升网页设计质量,提供一个免费的网页审计工具Audits。新龙撰写谷歌网页审计系列解读帮助企业网站管理者理解这些内容,建立自查网站意识。

谷歌的网页审计Audits主要涉及网页在桌面端和移动端的五方面指标:1、网页性能;2、PWA;3、网页的可用性;4、网页的最佳操作;5、网站的SEO(搜索引擎优化)性能。这个工具内置在谷歌Chrome浏览内。

其中第一位的是PageSpeed网页性能。如果违反以下这些规则,无疑你的网站性能得分将较低。测试链接https://developers.google.com/speed/pagespeed/insights/

  1. 采用响应式网站设计技术以适应不同尺寸上网设备,勿对到达的页面(着陆页)使用重定向:
    例如:yourdomain.com 直接指向网站的首页,打开快速。如果采用your domain.com/home到达首页会导致移动设备用户遭遇多次往返;有些企业单独制作移动端网站,采用m.yourdomain.com到达移动网站首页,其结果是移动浏览体验非常缓慢。还有些客户以为网站应该用www.yourdomain.com指向首页,这同样导致移动浏览体验非常缓慢。
  2. 启用压缩功能。目前较新的浏览器版本都支持gzip压缩,对网站资源进行压缩能够大大缩减传输响应时间,最大能够缩减90%。
  3. 缩短服务器响应时间。服务器响应用时控制在 200 毫秒内。 很多因素可能会影响服务器响应:例如应用逻辑、数据库查询、路由、资源 CPU 不足或内存不足等等。总结:需要选择高性能服务器。
  4. 使用浏览器缓存。所有的浏览器都有缓存机制,网页上较大的资源能够通过缓存存储在浏览器从而缩短每次访问网页的响应时间。从这个角度来说一个从未访问过的网站初次打开速度可能感觉较慢,第二次打开时快了不少,这就是使用了浏览器缓存。
  5. 缩减HTML、CSS 和 JavaScript。这些都是构成网页外观并与访问者互动的代码。HTML是网页编码,它历经多个版本的发展到现在是HTML 5版本;CSS的最新版本是CSS3,它是网站的样式控制文件,比如网页看起来是否“有质感”“漂亮”“时尚”等等;JavaScript负责网页的交互和动效。有人比喻HTML好像是人的骨架,CSS是皮肤,JavaScript就是动作招式,哈哈,差不多是这么回事。
  6. 优化图片。前面新龙写过图片优化策略讨论的内容与此相关。对于网页来说,在所下载的字节数中,图片往往会占很大比例。因此优化图片是能有效减少网页加载时间提升网站性能。请检查网站的每一张图片是否经过最优化处理。优化图片工具链接https://imagemagick.org/index.php
  7. 优化CSS发送过程。有时我们会遇到这样情况:访问一个网站,原来的漂亮面孔不见了,只看到错乱的文字和链接。这就是CSS样式表没有加载完成的原因。如果对于较小的CSS文件内嵌入HTML中,可让浏览器顺畅无阻地呈现网页。但不能把属性嵌入HTML文件中。对于较大的CSS文件需要做些分离,把呈现首屏内容的CSS内嵌到HTML,并暂缓加载其余样式,直到首屏内容显示出来为止。
  8. 缩减首屏内容。多数网页其内容比较长,需要翻滚屏幕才能够阅读完。首屏是指打开网页没有操作翻滚看到的屏幕显示。如果对于一个较长的网页,我们需要调整HTML结构确保首屏展示内容快速,为了快速还需要缩减首屏数据量。现在比较流行较长首页,整个页面内容大约有3-4个屏长,根据这个要求,首页第一屏的内容(包括图片,动效、代码、调用数据等等)需要精心安排保证数据量最少。
  9. 注意检查并移除影响网页内容显示的脚本语言JavaScript。

新龙研究内容营销和提供营销网站设计/图片专用服务/全球通企业邮箱,服务全球客户,深耕细做追求网站为企业创造无限价值。

欢迎关注微信号: