聊聊我们说的网站优化

  • 编辑时间: 2018-09-18 16:44:22
  • 浏览量: loading...
  • 作者: 段亮

    前言:网站打开的快慢,在一定程度上影响着用户的流失率。据不完全统计网站打开时间超过3s,就有将近40%的用户会选择关闭。

    因此,加载速度也成为了,搜索引擎排序中的一项因素。让我们一起看看有哪些优化点是我们值得关注的!为了更加直观的看到效果,我们来看一个案例:
    


PS:这里load是指资源完全加载时间,不是指跟用户首屏交互时间

    在上图数据可以发现: 从用户点击网站,到给用户呈现画面的过程,整体花了5.91s。其实这是非常糟蹋的加载速度了!
    那么有什么方法可以优化呢,让网站更快打开呢?

    其实想要优化网站的打开速度,就应该从网站慢的原因入手。那就基本得了解从输入url到用户看到网页这个过程都发生了什么?

    大概流程如下:
        1、用户输入url 


        2、浏览器对域名进行dns解析,获取到服务器ip地址。


        3、客户端(浏览器)与服务器建立tcp连接,三次握手


        4、握手成功后,发送请求,服务器处理相关逻辑,并把对应的数据返回给客户端(浏览器)


        5、浏览器接受到数据,开始解析数据(HTML)


        6、DOM树构建、CSS解析 Style Rules(CSS树)
            在这过程中,从上往下一直解析。如果碰到css样式(link、style)和 js脚本,会解析对应的样式或者脚本。此时会阻塞DOM元素构建


        7、DOM树与CSS树生成呈现树,然后绘制页面,呈现给用户。(当然这里还有许多细节,暂时省略... 有兴趣朋友可自行了解)

    可能有人还是会问:就算我看懂了这个流程,可是我还是不知道怎么优化啊?到底要怎么操作呢?

    别着急,在段亮认为,网站优化可以分为以下几部分:


    一、网络优化

    1、打开谷歌的debug调试工具 (F12)会弹出一个类似这样的窗口:
      

    然后找到waterfall选项,有个进度条的东西。然后鼠标放上去,你就会看到如下图,例如:



    由于上图有些参数,可能大家不知道,我来给大家讲解下:

        1、DNS Lookup DNS查询时间 [深绿色]

        2、Initial connection TCP连接消耗时间 [橙色]

        3、SSL SSL/TLS完成握手时间 [紫色]

        4、TTFB 是网络请求被发起到服务器返回第一个字节所花费的时间 [绿色]

        5、Content Download 文档下载时间 [蓝色]

    那么知道上述几个参数有什么含义呢? 比如:
    如果你发现网站资源加载非常多,拖慢了网站加载时间,怎么解决呢?

        1、可以合并资源,减少http请求。 比如:js、css合并,小图片合成雪碧图... 

        2、分域名加载资源,突破浏览器限制(因为在同源资源加载的情况下,浏览器最多允许同时6个请求加载)或者利用HTTP2.0多路复用

        3、减少DNS lookup时间,提前解析DNS 比如:

 html head中添加link标签:
 <link rel="dns-prefetch" href="http://duanliang920.com"/>

    

    二、 前端优化

        1、如果追求首屏优化,比如:电商这种行业。可以把首屏css样式写入head头中,减少http请求次数,让首屏更快的渲染。淘宝为例:
        

        2、静态资源压缩打包走cdn,减少主服务器的压力,然资源加载的更换。(因为cdn公司的服务器节点比你服务器更加靠近用户)

        3、根据具体情况,把js设置异步延迟加载,减少阻止dom渲染时间。比如
DOM构建完成加载

<script src="//cdn.duanliang920.com" async></script>
资源加载完成加载

<script src="//cdn.duanliang920.com" defer></script>


    具体细节优化,可以看这篇文章 web前端优化,你知道多少?


    三、服务端优化


        1、开启服务端缓存,减少服务器压力。

        2、开启gzip压缩,减少资源大小,传输更快。

        3、数据做好缓存和优化,减少服务端IO操作

    写在最后:当然网站的优化有很多方面,但这篇文章只是从技术的角度去谈,并未结合SEO和营销的角度去讲解。往往我们很多时候,只是看到事物的表面,对于底层和细节而被忽略。出了问题,一定得要从根源入手,才能解决根本问题。
    以上纯为段亮个人的理解,如有问题,还请各位斧正,谢谢!😜
    本文由段亮博客,原创出品,如需转载请注明出处。
    本文出处:https://www.duanliang920.com/learn416.html

写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

广告位出租!有意向者: 点击咨询
表情
0 条评论 最热评论 最新评论

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客

最新推荐
loading... 数据加载中...
承接:网站建设、微信小程序开发... 广告位出租!有意向者: 点击咨询