网站建设中很重要的一块是资源的加载优化。网站建设由于网速低带宽,高延迟,移动设备小内存,低处理器性能的原因,因此很多时候不得不通过优化前端页面的性能来满足用户对网页加载的预期。前段时间做了相关方面的网站优化,发现网上的中文教程比较少,都是照着网站上一步一步看下来,找问题来解决,因此将部分有用的网页整理翻译了一下。网页加载时长受到网速影响,一般采用浏览器模拟一个特定网速进行测试,这样优化前与优化后的结果会有一个较准确的对比。
网站优化,网站建设
1、减少请求数
文件资源压缩:将多余的空格、换行符、缩进、注释等不必要的字节去掉从而提高下载、解析、执行速度,这一类的在线工具比较多。合并文件:每一个CSS、JS文件都是一个HTTP请求,适当将相关的多份文件合并成一个文件以减少HTTP的请求数。解决加载速度这个问题,首先要减少网页的请求,例如css sprite、js/css压缩、采用缓存、按需加载。还有一种方法,将资源放在不同的子域名下,比如将图片资源与静态资源分开可以大大加速网页加载时间,但这个方法对HTTP2的连接不适用。
2、充分利用缓存
使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache。长Cache资源的更新可使用不同时间戳来更新。合理设置资源的过期时间,尤其对一些静态的不需要改变的资源,将其缓存过期时间设置得长一些。
3、压缩
网站进行压缩后,会让搜索引擎在抓取网站时更加顺利,提高用户体验,以便更好地浏览网站内容。Gzip网页整体压缩,目前很多虚拟主机都支持,不需要站长操作。网站Gzip压缩之后网页的打开速度加快;网页脚本资源的压缩,可借助站长工具的js压缩工具,建议网站的js文件不宜过多,搜索引擎很难读懂这类文件;网站图片压缩,对网站不重要的图片进行压缩,可极大减少虚拟主机的空间,加快网页的加载速度;减少资源大小不仅可以减少存储空间,还可以在网络传输文件时减少传输时间、加快网页显示速度。因此要对HTML、CSS、JavaScript等资源进行代码压缩。
4、优化JavaScript加载性能
首屏应该尽量控制在1秒之内。对于相当屏幕不用的资源应该放到用户需要的时候再加载(延迟加载、上拉滚屏加载);可感知和不可感知的加载。随着越来越多的应用使用JavaScript技术在客户端进行处理,从而使JavaScript在浏览器中的性能成为开发者所面临的最重要的问题。JavaScript性能优化又因JavaScript的阻塞特性变得复杂,也就是说当浏览器在执行JavaScript代码时,不能同时做其他事情,即其他事情都会被阻塞。无论当前JavaScript代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript执行过程耗时越久,浏览器等待响应用户输入的时间就越长。
5、CDN加速
通过CDN来加速是一项相对而言成本比较高的优化手段,所以这些把它放在所有优化方法的最后,但它是一项非常有效的优化方案。CDN的全称是Content Delivery Network,即内容分发网络。CDN加速主要是加速静态资源,如网站上面上传的图片、媒体,以及引入的一些Js、css等文件。CDN加速需要依靠各个网络节点,例如100台CDN服务器分布在全国范围,从上海访问,会从最近的节点返回资源,这是核心。CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备。
怎么实现网站的加载优化,对于一个移动产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。当用户能够在1~2秒内打开一个移动页面并看到信息的展示,或者能够开始进行下一步的操作时,用户会觉得速度还是可以接受的;如果页面在2~5秒后才进入可用的状态,用户的耐心会逐渐丧失;如果一个界面超过5秒甚至更久才能显示出来,用户基本是无法忍受的,也许有一部分用户会退出重新进入,但更多的用户会直接放弃使用。对于网站的开发人员来说,提升用户体验是一个网站的核心价值,其中提高网站的加载速度是最基本的用户体验。