网站加载和打开访问速度的优化技巧

作者: Arvin Chen 分类: SEO 来源: Break易站(www.breakyizhan.com)

网站的打开速度取决于很多的方面,网站打开的速度越快,那么对用户的体验和搜索引擎的收录也就越好,那么,我们应该怎么优化网站加载和打开访问的速度呢?

网站加载和打开访问的速度优化技巧

要做好网站的速度,那么,软件和硬件都得跟上,那么,优化网站的速度大概就有以下这么一些步骤:

  1. 将网站中的JavaScript 和 CSS 独立成外部文件
  2. 将网站中所有的CSS, JS文件合并起来
  3. 将网站中的CSS的样式放在页面的上方
  4. 将网站中的所有<script>移动到底部
  5. 将网站中的JavaScript 和 CSS压缩处理
  6. 将网站中的图片压缩处理,博客页面尽量用处理过的图片,不要用太大的图片
  7. 将网站中的图片懒加载
  8. 将网站中的页面静态化
  9. 将网站中的页面代码精简起来
  10. 减少网站的 DNS 查询
  11. 减少或者避免网站的重定向
  12. 使用 CDN(Content Delivery Network)
  13. 添加http的 Expires 头(或者 Cache-control )
  14. 使用Gzip 压缩
  15. 定期优化网站的数据库
  16. 提高网站的服务器性能

来说一下,具体应该怎么处理和优化网站的加载速度。

将网站中的JavaScript 和 CSS 独立成外部文件

以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称 JS文件), 其文件后缀通常为 .js,然后将JS代码直接写在JS文件中。不仅从性能优化上会这么做,用代码易于维护的角度看也应该这么做。把css和js写在页面内容可以减少2次请求。可以写成下面这个样子:

<link rel="stylesheet" type="text/css" href="//47.106.37.15/wp-content/cache/wpfc-minified/9i8pf631/4h7qi.css" media="all"/>

将网站中所有的CSS, JS文件合并起来

随着web页面功能越来越多,css和js使用也越来越多。但是一个页面中js和css越多导致页面请求次数就越多,网络延迟也会加大。如果网站是用wordpress的话,推荐使用wp Fastest Cache 合并css和js文件。

将网站中的CSS的样式放在页面的上方

CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树,如果CSS放在后面可能页面会出现闪跳的感觉,或者是白屏或者布局混乱样式很丑直到CSS加载完成。

将网站中的所有<script>移动到底部

当js文件放在head中时,浏览器构建DOM树的时候遇到js文件加载会阻塞,也就是说,浏览器不会加载body中的标签,一旦这个js文件的数量和内容都比较大,那么就会造成阻塞。所以js的标签一般都是放在最后的。

将网站中的JavaScript 和 CSS压缩处理

一个大的网站可能会有很多的javascript和css,如果没有都进行压缩的话,一定会减少很多文件大小的,其实减少文件大少并不是很重要,最重要的是,文件容量减少了,能够快速的提高网站访问的速度,给用户带来好的体验

将网站中的图片压缩处理,博客页面尽量用处理过的图片,不要用太大的图片

这也是因为网站文件大小的减负,建议在上传到网站的时候,对图片的大小进行一定的处理。

将网站中的图片懒加载

网页涉及到大量图片时,由于图片大量加载,导致页面会出现一段时间的“空白”,应对这种情况需要用到图片的懒加载和预加载技术,懒加载(延迟加载)主要原理:先不是image的src 属性,待需要显示该image(),在设置其src的值,这个时候才开始加载图片。

将网站中的页面静态化

网站的页面静态化就是不用每次用户访问页面的时候都要加载jsp或者php,还要读取数据库,直接给一个html文件就可以了。如果用的是wordpress网站的话,可以使用WP Fastest Cache进行静态化。

将网站中的页面代码精简起来

多余的代码也会拖累页面的加载速度,就好像wordpress多余的插件一样。

减少网站的 DNS 查询

在 Internet上域名与IP地址之间是一一对应的,域名(breakyizhan.com)很好记,但是计算机只记得IP。一次DNS的解析过程会消耗20-120毫秒的 时间,在dns查询结束之前,浏览器不会下载该域名下的任何东西。而每次网站的广告就是一次DNS。

减少或者避免网站的重定向

当你看到网站从https://www.breakyizhan.com转向到https://www.breakyizhan.com也是需要时间的,所以,大家请尽量访问https的域名,避免301重定向。

使用 CDN(Content Delivery Network)

CDN主要功能是在不同的地点缓存内容,将用户的请求定向到最合适的缓存服务器上去获取内容,所以使用CDN能大大加快用户访问速度。更多的CDN的,可以参考:阿里云的CDN为云虚拟机网站(wordpress)开启动态证书httpsCDN命中率低的原因以及解决方法 

添加http的 Expires 头(或者 Cache-control )

Expires存储的是一个用来控制缓存失效的日期。当浏览器看到响应中有一个Expires头时,它会和相应的组件一起保存到其缓存中,只要组件没有过期,浏览器就会使用缓存版本而不会进行任何的HTTP请求。做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是而直接从缓存中读取,这样再次访问页面的速度会大大加快。

使用Gzip 组件

Gzip的思想就是把文件先在服务器端进行压缩,然后再传输。这样可以显著减少文件传输的大小。

定期优化网站的数据库

我们知道长期对数据库的读取,会让数据库变得臃肿,那么,我们可以打开数据库,对每张表都进行批量的手动优化,如果是wordpress网站的话,可以使用wp-Optimize进行优化

提高网站的服务器性能

增加带宽,购买更好的服务器是提升网站速度的另一个途径,不过资本可就要升级了。

 

最后,运营好一个网站,速度和网站的架构都很重要,在优化速度的同时,不要让自己的网站不断更改,对自己网站的速度和SEO也是不利的。如果上面的步骤的优化了,保证网站的加载和打开访问速度溜得飞起。

  •   本文标题:网站加载和打开访问速度的优化技巧 - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/seo/4046.html
      微信返利机器人
      免费:淘宝,京东,拼多多优惠券
      腾讯,爱奇艺,优酷的VIP视频免费解析,免费看
      即刻扫描二维码,添加微信机器人!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注