网站打开速度慢?教你几个前端优化技巧!

#1

网页打开速度慢?有好几个原因,一种是购买的空间服务器内存,或者是属于共享主机,另一个原因就是前端页面的制作问题了,下面就教大家几个前端优化技巧,希望能对大家有帮助。

微信截图_20201028092928.png

1、利用浏览器缓存你的 js 和 CSS 文件

在网站根目录 .htaccess 中参加以下代码

ExpiresActive on

ExpiresDefault “access plus 1 year”

这段代码的意思是对 jpg|gif|png|css|js 发送 header 缓存头,进行一年的缓存、在浏览器不运用 ctrl+F5 强制改写时,会一直缓存到时刻时刻完毕,仅有惋惜的是假如你更改了js或许css文件有必要把曾经的途径或许文件名更改,能够这么 base.js?ver=(x) 这种方法下次浏览器就会主动读取并缓存。

2、把你的 .js 库文件地址替换成 Google CDN的地址

跟着 jquery 和 mootools 等js库的运用需求加载的.js文件越来越多也越来越大,一般传统的网站是上载到网站自身的目录。但关于一个接近70多KB的jquery.js体积的确不利于网站响应速度的提升,此刻就应当运用Google API 。

例如:把你的 http://www.***.cn/jquery.x.x.js 替换为 http://ajax.谷歌apis.com/ajax/libs/jquery/1.4.4/jquery.min.js,其意义在于当一个 用户拜访过运用 谷歌 api 的网站以后,再次拜访别的调用了该api地址的网站就不需求再次加载该文件了。然后到达提速的意图。

不单是jquery库,别的诸如mootools yui 也能够运用这种方法。

3、精简和优化你的 js 和 CSS

尽管有了缓存和gzip保驾护航,可是关于 js 和 css 的优化却也是有必要的。咱们写的javascript脚本和 css 代码都是经过缩进和换行的,合适人类阅览,可是浏览器履行这些脚本不并需求这些无意义的空格和换行。所以咱们应当去掉这一些空格换行,乃至缩短 javascript 和 css 里面的变量。诸如此类的优化东西有 YUI Compressor 和 Closure Compiler 。这两个东西都是根据 java 的,运用应当装置jdk而且设置 JAVA_HOME 。(关于非程序员的网站管理员而言的确有点艰难)

此东西能够不用在本地装置jdk,直接上载 js 和 css 文件进行紧缩,可选择是选用 YUI Compressor 或 Closure Compiler 。前端培训 www.icketang.com

4、GZIP 紧缩你的 JS 和 CSS 文件

紧缩js和css能够经过服务器动态脚本进行也能够更简单的运用apache服务器能够在网站根目录 .htaccess 中参加以下代码

AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json

Header append Vary Accept-Encoding

这段代码的意思是调用服务器的紧缩模块对以上文件输出之前进行GZIP紧缩,gzip的紧缩以后一切文件都应当能削减30%以上的体积。特别是关于很多运用js的博客有了gzip保驾护航以后速度能进步不少。

5、运用css sprites兼并图像

一个网站常常运用小图标和小图像进行美化,可是很惋惜这些小图像占用了很多的HTTP恳求,因而能够选用sprites的方法把一切的图像兼并成一张图像 ,能够经过有关东西在线兼并,也能够在ps中兼并。

6、优化你网站图像

很多运用的图像和图标尽管能够给网站带来美轮美奂的作用,图文混编更是一种十分艳丽的博文展示方法。可图像的体积的确不是很给力,jpg是一种 有损紧缩格局,而png尽管是无损的,但缺憾是体积颇大。为了削减图像体积到达最快的下载速度,每一张图像上载前应当优化一下体积。