许多研究发现,页面速度和访客的滞留时间,跳出率以及收入都有直接的关系。另外,谷歌的排名算法中也把页面加载速度作为其中一项考虑因素。因此,你网站的页面加载时间是至关重要的。从访问者的角度看,测试你的浏览器速度的一个很好的方法是清除你的浏览器缓存,然后加载页面。如下就有16种优化你页面的方法:

1、合并Js文件和CSS

将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文件比较多,就需要进行多次“Get”请求,延长加载速度,将JS文件合并在一起后,自然就减少了Get请求次数,提高了加载速度。

2、Sprites图片技术

Spriting是一种网页图片应用处理方式,它是将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用CSS技术展现出来。这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了,可以减少了整个网页的图片大小,并且利用CSSSprites能很好地减少网页的http请求,从而大大的提高页面的性能。CSSSprites在国内很多人叫css精灵,很早就有了,在很多大型网站都有用到,特别是一些所有页面都存在的图标用得比较多,很好的提升加载速度。

3、压缩文本和图片

压缩技术如gzip可以有效减少页面加载的时间。包括HTML,XML,JSON(JavaScript对象符号),JavaScript和CSS等,压缩率都可以在大小70%左右。文本压缩用得比较多,一般直接在空间开启就行,而图片的压缩就比较随意,很多都是直接上传,其实还有很大的压缩空间。

4、延迟显示可见区域外的内容

为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容,为了避免页面变形,可以使用占位符标签制定正确的高度和宽度。比如WP的jQueryImage LazyLoad插件就可以在用户停留在第一屏的时候,不加载任何第一屏以下的图片信息,只有当用户把鼠标往下滚动的时候,这些图片才开始加载。这样很明显提升可见区域的加载速度,提高用户体验。

5、确保功能图片优先加载

网站主要考虑可用性的重要性,一个功能按钮要提前加载出来,用户进入下载页,一个只需要8s时间的下载花了5s在等待、寻找下载按钮图片,谁能忍受?

6、重新布置Call-to-Action按钮

其实这个和上面一条是差不多的,都是从用户体验速度着手,跳过了网页的整体加载速度。速度没变,只是让一些行为按钮提前,Call-to-Action按钮一般习惯设计在页面底部,这样的习惯对于用户来说并不总是好的,购买用户需要等到最下面加载出来才能点击下一步操作。可以调整CTA按钮的位置或使用滑动的图片按钮。很多大型购物网站的加入购物车就是这种类型。

7、图片格式优化

不恰当的图像格式是一种极为常见的减慢加载速度的罪魁祸首。正确的图片格式可以让图片缩小数倍,如果保存为最佳格式。可以节省大量带宽,减少处理时间时间,大大加快页面加载速度,这是一种很常见的做法。

8、使用 Progressive JPEGs

ProgressiveJPEGs图片是JPEG格式的一个特殊变种,名为“高级JPEG”。在创建高级JPEG文件时,数据是这样安排的:在装入图像时,开始只显示一个模糊的图像,随着数据的装入,图像逐步变得清晰。它相当于交织的GIF格式的图片。高级JPEG主要是考虑到使用调制解调器的慢速网络而设计的,快速网络的使用者通常不会体会到它和正常JPEG格式图片的区别。对于网速比较慢的用户,这无疑有很好的体验。

9、精简代码

这个可以说是最直接的一个方法,也是用得比较多的,对网页代码进行瘦身,删除不必要的沉冗代码,比如不必要的空格、换行符、注释等,包括JS代码中的无用代码也需要清除。其中对于注释代码的清除可能有些人存在误区,甚至有的在里面堆砌关键词。

10、延迟加载和执行非必要脚本

网页中有很多脚本是在页面完全加载完前都不需要执行的,可以延迟加载和执行非必要脚本。这些脚本可以在onload事件之后执行,避免对网页上重要内容的呈现造成影响。这些脚本可能是你自己网页的甲苯,往往更多的是一些第三方脚本,这样的有很多,比如评论、广告、智能推荐、百度云图、分享等等,这些完全可以等主体内容加载完后再执行。

11、使用AJAX

AJAX即“Asynchronous Javascript +XML“,是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页面。

12、自动化的页面性能优化

自动化的页面性能优化也就是借助工具了,网站提速工具有很多

13. 减少DNS查询(DNS lookups)

  减少DNS查询是一个WEB开发人员可以用了页面加载时间快速有效的方法。DNS查询需要话费很长的时间来返回一个主机名的IP地址。而浏览器在查询结束前不会进行任何操作。对于不同的元素可以使用不同的主机名,如URL、图像、脚本文件、样式文件、FLASH元素等。具有多种网络元素的页面经常需要进行多个DNS查询,因而花费的时间更长。

  减少不同域名的数量将减少并行下载的数量,加速你的网站

14. 利用浏览器缓存

  浏览器缓存是允许访客的浏览器缓存你网站页面副本的一个功能。这有助于访客再次访问时,直接从缓存中读取内容而不必重新加载。这节省了向服务器发送HTTP请求的时间。此外,通过优化您的网站的缓存系统往往也会降低您的网站的带宽和托管费用。

15. 启用GZIP压缩

  在服务器上压缩网站的页面是提升网站访问速度非常有效的一种方法。你可以用gzip压缩做到这一点。Gzip是一个减小发送给访客的HTML文件、JS和CSS体积的工具。压缩的文件减少了HTTP响应时间。据Yahoo报道,这大概可以减少70%的下载时间。而目前90%的通过浏览器的流量都支持Gzip压缩,因此,这是一个提示网站性能有效的选项。

  优化你的网站是留住你的访客和提升搜索引擎排名有效的途径。使用上面提到的15种方法来提高你的网站性能。

16. 去掉不必要的插件

  一个非常值得关注但经常被忽略的因素是你网站安装的插件。如今,大量免费的插件诱导网站开发者添加很多不必要的功能。您安装的每个插件都需要服务器处理,从而增加了页面加载时间。所以禁用和删除不必要的插件。

  然而,有些插件是必须的,如社交分享插件,你可以选择CMS内置的社交分享功能来代替安装插件。

转载于:https://www.cnblogs.com/ericLJ/p/9076863.html

页面加载速度优化的建议相关推荐

  1. 页面加载速度优化的12个建议

    1.合并Js文件和CSS 将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文件比较多,就需要进行多次"Get"请求,延长加载速 ...

  2. MVC页面加载速度优化小记

     前言: 最近做一个地图展示页面,业务初期没什么问题,运行一阵后报错: Error during serialization or deserialization using the JSON Jav ...

  3. web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  4. python网页优化_400% 的飞跃-web 页面加载速度优化实战

    前言 一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. 正常 ...

  5. web 页面加载速度优化实战

    前言 一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图  首页完整加载时间 8.18s ,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  6. 需要某个字体包才能正确显示此页面_[三分钟小文]前端性能优化-页面加载速度优化...

    本期内容请记住一个核心:JavaScript很快,DOM很慢 阅读本文您将收获: 从用户输入URL到看得到页面的过程 页面渲染过程 在页面加载层级的性能优化 用户看到页面之前都经历了什么 这一部分是面 ...

  7. java加快页面加载速度方法_关于页面加载速度优化的11种方法

    1.合并js和css文件 将js和css分别合并到一个共享文件,这样不仅能够简化代码,而且在执行js文件是,如果js文件较多,就需要多次向服务器请求数据,这样将会延长加载速度,将js文件合并在一起,减 ...

  8. html5 页面加载缓慢,html5体验优化页面加载的14条建议

    html5体验优化页面加载的14条建议 1. fake 页 - 首屏加速 目标:首屏 3s 以内 因为 71% 的用户期望移动页面跟 pc 页面一样快 (3s) ,74% 的用户能容忍的响应时间为 5 ...

  9. WEB前端性能优化,提高页面加载速度

    可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too simple.事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传 ...

  10. 如何提高页面加载速度 || 前端的性能优化 || 浏览器渲染页面的过程是什么

    1.降低请求量 ​ ① 合并资源,减少http请求数量. ​② lazyLoad,如图片懒加载.分批加载,每次只加载一部分. ​ ③ 使用字体图标或CSS绘制,来代替部分图片. 2.加快请求速度 ​ ...

最新文章

  1. 异常分析 (空间太小)
  2. 华为云中国前二,全球前五,增速第一,凭什么?
  3. java中wait和notify的虚假唤醒问题
  4. 升技主板RAID磁盘阵列图解
  5. Apache 与 Nginx
  6. 开发中 常用 js 记录(一)
  7. Oracle 11gR2 RAC恢复OCR和VOTE DISK
  8. Java打印三角形(双层for循环)
  9. Keras Datasets 国内下载镜像
  10. 【裴礼文数学分析】例1.2.4
  11. 解决h5兼容ios手机浏览器下载本地文件直接打开问题。
  12. . 显示隐藏文件夹选项消失时如何还原
  13. 想要下载的编程软件太难找?部分软件官网介绍
  14. python是哪一类型编程语言_什么是编程语言呢?编程语言有哪些种类呢?
  15. java.security.cert.CertificateException: X.509 not found,X.509证书找不到
  16. 《Python深度学习》3.4电影评论分类:二分类问题
  17. 激活函数(Activation)
  18. 永嘉县公安退休干部李建初诗词创作助力正能量
  19. iOS系统的优势和特性
  20. Web3中的征信系统该如何构建?

热门文章

  1. Prototype使用$$()函数
  2. 电子相册系统(三)使用技术
  3. 【渝粤教育】国家开放大学2018年春季 7067-22T康复护理学 参考试题
  4. 【渝粤教育】国家开放大学2018年春季 0284-21T外国文学 参考试题
  5. 线性模型第4讲:弹性网络
  6. libmesh 实现 流程
  7. Python I/O及FIle方法
  8. BootStrap FileInput 插件实现多文件上传前端功能
  9. 牛客小白月赛6 A 鲲
  10. vue-router的简单理解