更新时间:2018年01月05日14时05分 来源:传智播客 浏览次数:
对于一个产品来说,不论一个网站的页面多酷炫,代码多牛叉,如果让客户等的时间太长,那都是白搭。所以,不论是前端还是后台,用户体验对于我们多重要就不用说了,现在我就从前端的角度来谈谈网站资源优化的一些方法和小窍门。
首先就是图片了,图片是UI的最爱,前端的最恨了。
1、图片优化
首先,你需要优化你网站上的图片,来获得丝毫加速网站的机会。从原图上移除额外的注解、不必要的空间和无用的颜色,将图片保存为JPEG格式,因为它即使占用空间小,也能保证图片的高质量。
对于WordPress网站,建议使用smush.it插件来自动优化网站的图片。如果图片是PNG格式,可以使用tinypng 优化图片,提高图片质量。
2、开启GZip压缩
GZip压缩听起来很复杂,但实际上很简单,被用于减少HTTP请求的大小来缩短响应时间。因为这允许你发送GZip压缩文件而不是HTML文件给浏览器,它将缩短页面等待时间和加载时间。对于Apache服务器,可以将下面的代码添加到.htaccess文件中来开启GZip压缩。
3、服务器响应时间
即使网站已经格外优化,但是除非服务器响应时间非常快,否则就不会有什么大的效果。当涉及到提高网站的速度,服务器响应时间起着重要的作用。下面是一些提高服务器响应时间的建议。
有独立的服务器,而不是选择共享/托管服务器。
提高Web服务器的质量。
移除不必要的插件,只有那些必要的插件,才需要一直保持启用状态。
4、使用CDN
内容分发网络(CDN)是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时,就可以直接从就近的网站服务器获取相应资源(也可以是从负载最小的服务器)。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速。
5、压缩CSS、JavaScript和HTML文件
通过删除所有不必要的空格和注释,从而减小文件大小,提高页面的加载速度。下面是一些优化CSS、JavaScript和HTML文件的流行工具,非常有用。
CSS Minifier
Avivo
HTML Compressor
6、避免重定向
重定向是对网站访问者的一种极大的刺激。就类似你去一个朋友家,却发现你朋友早已经搬到三个街区远的地方了。重定向会消耗额外的时间,降低加载速度。
7、指定字符集
指定字符集是加速浏览器渲染页面的另一个有用的技巧。下面的代码就能轻松实现:
8、避免错误请求
当用户在网站上搜索时,收到404或410错误是比较失望的。错误请求会对网站的页面加载速度产生不利影响。因此,建议你无论如何都要避免错误请求。Check My Link 能帮你找出404链接,清除它们,改善用户体验。
当然,除了前端方面的优化外,还有一些其他的优化,例如SEO、后台代码。这些需要大家以后再工作中慢慢摸索。好了,今天就说到这里了,祝大家以后都工作顺利。