如何减少HTTP Requests?网页速度最佳化技巧

作者:码迷
作者:码迷SEO
发布时间:2019-11-22 14:20:01阅读:76点赞:13

如何减少HTTP Requests?网页速度最佳化技巧/

网页打开速度是影响用户感受非常重要的一个因素,也间接的影响了你的网站浏览量、转换率

一个龟速的网站,用户是没有耐心久留的!又尤其在这个手机端盛行的时代,越来越多的人是在移动中浏览网页,网站的速度是网站经营者必须做好的一项功课!

先介绍两个网页速度测试工具:

Google PageSpeed

这是Google提供的网页速度测试工具,不但会计算一个参考分数,更会提供该如何优化的提示说明,而且有中文喔!

WebPageTest

这个速度测试工具就较复杂一些哦~适合对于网站建置有一定认知的用户,工具除了能够选择远程测试的地区,更提供了非常详细的页面加载时间轴图表

Google PageSpeed从20分到80分的速度优化技巧

用过了速度测试工具之后,就能够很清楚的知道拖慢网页加载速度的问题出在哪里哦!

其实影响着页面加载速度的最重要的要素是 HTTP Requests,接着才是文档大小

我们来看看一个网页HTTP Requests很多的实际案例,加载速度为什么会慢吧!

下图是某个网站的HTML原代码前段与使用WebPageTest工具产生的图表

我们可以看到HTML Document前半段引用了许多现成Framework,如bootstrap、jQuery UI等

这些组件都会产生HTTP requests,并且是从HTML Document依照前后顺序循序加载的

从上图WebPageTest工具产生的图表,可以看到网页内容被加载的时间点,与每个内容加载了多久,范例当中的网站使用许多Framework,又没有将文档整并,因此一个页面打开时需要载48只js文档与22只css档,光是js与css文档加起来就高达了70个HTTP requests,占据页面打开之后的6秒,这六秒可是黄金时间呀!!

接着下图可以看到6秒之后才开始加载页面的正文本与图片

而这些图档有许多是小小的icon

 例如这个箭头

上述这个范例网站一共有两个优化的重点:

1.减少include file的HTTP Requests

2.将小icon图档合并使用CSS Sprites

第1点减少include file的HTTP Requests

分为两个方向

一个是要将页面当中没有用到的js或css文档就不应该加载

应该在HTML中将include的原代码删除

另一个是合并多个分开的js或css档

或是将小型的js或css文档内嵌在页面当中(例如仅有10行的文档)

并且<script>标签移至</body> 前推迟加载

css文档则是在<head>…</head>当中加载

参考数据:移除禁止转译 JavaScript、为 CSS 发送进行最佳化处理

第2点是将多个icon小图标文档合并为一张图档使用CSS Sprites方式

如果只有需要用到几张的小图也可以使用先前 awoo 博客有介绍的data URI scheme方式

参考数据:CSS Image Sprites

原本的HTTP Requests共有150个,经过上面的调整之后剩下47个

大幅减低了HTTP Requests数量,页面加载的性能就提升非常多哦!

本文网址:https://www.mamioo.com/seo-advanced/ovrn7no98m64

本站内容均为「码迷SEO」原创整理,未经授权严禁采集转载,违者必究。
评论
相关文章
  • SEO必学策略「长尾关键字」,让你锁定动机明确的搜索访客

    SEO必学策略「长尾关键字」,让你锁定动机明确的搜索访客

    或许各位对长尾关键字已经不陌生了,但你知道它之于 SEO 与 SEM 扮演什么角色、又能如何运用在节省成本、挖掘商机吗?本篇从「长尾关键字」的基本概念到营销策略的应用一次搞懂,让他成为你的得力助手!继续阅读>>

    92浏览22赞2019-11-09 13:40:01
  • 我的商家经营教学,五个创建我的商家你一定要懂的事

    我的商家经营教学,五个创建我的商家你一定要懂的事

    Google我的商家是实体店面必须经营的网络门面,但是该如何经营 Google我的商家?商家地图优化 (MEO, Map Engine Optimization) 要如何做才能跟顾客做有效交互?掌握五大经营关键,有效提升实体商家的搜索曝光度,带来更多的顾客。让更多顾客透过Google我的商家找到你!继续阅读>>

    81浏览15赞2019-12-20 11:20:01
  • SEO文案撰写三技巧,优秀排名其实比你想像中唾手可得

    SEO文案撰写三技巧,优秀排名其实比你想像中唾手可得

    SEO文案该怎么写?要如何让文章才能在搜索结果中名列前茅呢?其实要撰写好的SEO文案并不困难,只要遵循SEO文案撰写三技巧,套入符合SEO的文案架构,再加上SEO文案撰写技巧,不只可以让文章得到更好的排名和曝光,还可以让内容更加分、出色!现在就跟着awoo来解构SEO文案吧!继续阅读>>

    61浏览10赞2020-02-16 09:00:01
  • AMP能提高网站SEO?完整AMP信息告诉你

    AMP能提高网站SEO?完整AMP信息告诉你

    AMP为Google所推出的计划,目的是为了加速手机版的浏览体验。AMP主要适用在产出内容为主的网页,例如新闻媒体、美食评论、电影评论。AMP的架设方式可以透过埋设代码或者透过wordpress的插件来安装。而AMP对于SEO而言,是一个可间接帮助网站的工具,awoo非常鼓励大家安装。继续阅读>>

    114浏览23赞2019-12-11 11:20:02
  • RWD 响应式网站设计是什么?对 SEO 的好处有哪些?

    RWD 响应式网站设计是什么?对 SEO 的好处有哪些?

    手机版网页与 RWD经常被同时提及。究竟什么是 RWD 呢?RWD,也就是响应式网站设计Responsive Web Design。响应式代表网页排版会随屏幕宽度变化。一般提到「创建手机版网页」,有三种做法,分别是:RWD、AWD、手机桌机独立网站。设置上需要注意什么?哪一种对SEO比较好?阅读本文马上了解!继续阅读>>

    82浏览13赞2019-12-04 13:00:01
  • 黑帽SEO是什么?不可不知的黑帽介绍与风险!

    黑帽SEO是什么?不可不知的黑帽介绍与风险!

    不论你是企业老板、营销人、或者工程师,都可能有机会听到黑帽SEO或者白帽SEO,究竟什么是黑帽SEO跟白帽SEO呢?我们透过这次的文章来说明让你了解SEO的路上可能会有的陷阱以及风险! 搜索引擎是用户与内容的桥梁,而SEO就是要加强、拓宽这座桥梁,所以SEO应当是配合搜索引擎的政策,让用户可以顺利找到对他们有帮助的内容。正确的SEO,是可以达到用户、搜索引擎、网站三者皆赢的结果。 黑帽SEO是用欺瞒争取排名的方式,在黑帽SEO运行的过程几乎不会对用户体验有任何加分,例如在无关网站购买外连来诱骗用户进站、在网站内容安插一些用户不可见的关键字(透过使字体极小化、与背景同色等方式)。黑帽SEO基本上就是在与搜索引擎抗衡,搜索引擎的目标是将好的内容送到用户面前,而黑帽SEO就是不优化内容却硬将网站塞给用户。 搜索引擎会透过网站的链接结构、内容是否正确符合消费者需求、网站是否安全可信等诸多理由来排序每个网站在每个不同关键字的排名,但搜索引擎不可能无所不知,算法有结构有逻辑,能被拆解,比如说PageRank,比如说EAT,比如说内容品质。这也就造就了他有可能被人为不当操作排名。 听起来很棒,对吧?继续阅读>>

    148浏览22赞2019-11-15 11:00:01