全国咨询热线:400-618-4000

前端与移动开发:如何对网站的文件和资源进行优化?

更新时间: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、后台代码。这些需要大家以后再工作中慢慢摸索。好了,今天就说到这里了,祝大家以后都工作顺利。

本文版权归传智播客前端与移动开发学院所有,欢迎转载,转载请注明作者出处。谢谢!
作者:传智播客前端与移动开发培训学院
首发:http://www.itcast.cn/web/