您的位置:主页 > 新闻中心 > 优化知识 >

网站SEO前端优化方法

日期:2017/05/09     阅读:    来源:未知
        我对网站优化总结了几点:网站结构优化,前端代码优化,网页设计优化,链接优化等四个方面。每个优化细节,都产生着交叉式的影响,而且对网站产生着不同的作用。然而前端代码是网站的基础语言,也是搜索引擎认知的语言,所以每个网站都要重视前端代码,今天分享一下网站SEO前端优化方法。
网站前端优化

        网站SEO前端优化方法:

        1、请减少对DOM的操作

        对DOM操作的代价是高昂的,这在网页应用中的通常是一个性能瓶颈,修改和访问DOM元素会造成页面的Repaint和Reflow,循环对DOM操作更是罪恶的行为,所以请合理的使用JavaScript变量储存内容,考虑大量DOM元素中循环的性能开销,在循环结束时一次性写入,减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。
网站Web前端优化

        2、避免坏请求

        有时页面中的HTML或CSS会向服务器请求一个不存在的资源,比如图片或HTML文件,这会造成浏览器与服务器之间过多的往返请求,类似于:
        浏览器:“我需要这个图像。”
        服务器:“我没有这个图像。”
        浏览器:“你确定吗?这个文档说你有。”
        服务器:“真的没有。”
Web优化最佳实践

        3、避免使用document.write

        在JavaScript中,可以使用 document.write在网页上显示内容或调用外部资源,而通过此方法,浏览器必须采取一些多余的步骤——下载资源、读取资源、运行JavaScript来了解需要做什么,调用其他资源时需要重新再执行一次这个过程。由于浏览器之前不知道要显示什么,所以会降低页面加载的速度。
        要知道,任何能够被document.write调用的资源,都可以通过HTML来调用,这样速度会更快。检查你的页面代码,如果存在类似于下面的代码:
        document.write('<script src="another.js"></script>');  
        建议修改为:
        <script src="another.js"></script>

        4、合并多个外部CSS文件

        在网站中每使用一个CSS文件,都会让你的页面加载速度慢一点点。如果你有一个以上的CSS文件,你应该将它们合并为一个文件。
        你可以通过  CSS delivery工具 来检测页面代码中的CSS文件,然后通过复制粘贴的方式将它们合并为一个。合并后记得修改页面中的引用代码,并删除旧的引用代码。
合并多个外部CSS文件

        5、合并多个外部JavaScript文件

        大部分情况下,网站往往会包含若干个 JavaScript文件,但并不需要将这些文件都独立出来,其中有些是可以合并为一个文件的。
        你可以通过 resource check工具 来检测页面中所引用的JavaScript文件数,然后可以通过复制粘贴的方式将多个文件合并为一个。

        6、通过CSS sprites来整合图像

        如果页面中有6个小图像,那么浏览器在显示时会分别下载。你可以通过CSS sprites将这些图像合并成1个,可以减少页面加载所需的时间。
        CSS sprites需要有两个步骤:整合图像、定位图像。比如你可以通过下面的代码来分别定位下面图像中的上下两部分。
http://cms.csdnimg.cn/article/201309/23/5240287e14d30.jpg

        7、延迟JavaScript的加载

        浏览器在执行JavaScript代码时会停止处理页面,当页面中有很多JavaScript文件或代码要加载时,将导致严重的延迟。尽管可以使用defer、异步或将JavaScript代码放到页面底部来延迟JavaScript的加载,但这些都不是一个好的解决方案。
        下面是网站前端优化的建议。
        [js] view plaincopy
        <script type="text/javascript">  
        function downloadJSAtOnload() {  
        var element = document.createElement("script");  
        element.src = "defer.js";  
        document.body.appendChild(element);  
        }  
        if (window.addEventListener)  
        window.addEventListener("load", downloadJSAtOnload, false);  
        else if (window.attachEvent)  
        window.attachEvent("onload", downloadJSAtOnload);  
        else window.onload = downloadJSAtOnload;  
        </script>  
        这段代码的意思是等待页面加载完成后,然后再加载外部的“defer.js”文件。下面是测试结果。
延迟JavaScript的加载

        8、启用压缩/ GZIP

        使用gzip对HTML和CSS文件进行压缩,通常可以节省大约50%到70%的大小,这样加载页面只需要更少的带宽和更少的时间。
        你可以通过这个 Gzip压缩工具 来检测页面是否已经经过Gzip压缩。 

        9、启用Keep-Alive

        HTTP协议采用“请求-应答”模式,当使用普通模式(非KeepAlive模式)时,每个请求/应答客户和服务器都要新建一个连接,完成之后立即断开连接(HTTP协议为无连接的协议);当使用 Keep-Alive模式(又称持久连接、连接重用)时,Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接。
启用Keep-Alive
        在HTTP 1.0中Keep-Alive默认是关闭的,需要在HTTP头中加入“Connection: Keep-Alive”,才能启用Keep-Alive;在 HTTP1.1中Keep-Alive默认启用,加入“Connection: close”可关闭。目前大部分浏览器都是用HTTP 1.1协议,也就是说默认都会发起Keep-Alive的连接请求了,所以是否能完成一个完整的Keep- Alive连接就看Web服务器的设置情况。

        10、将小的CSS和JavaScript代码内嵌到HTML中

        如果你的CSS代码比较小,可以将这部分代码放到HTML文件中,而不是一个外部CSS文件,这样可以减少页面加载所需的文件数,从而加快页面的加载。同样,也可以将小的 JavaScript脚本代码内嵌到HTML文件中。
        <style type="text/css">  
        <!--CSS代码--> 
        </style>  
        <script type="text/javascript">  
        <!--JavaScript代码-->
        </script>  

        11、利用浏览器缓存

        在显示页面时,浏览器需要加载logo、CSS文件和其他一些资源。浏览器缓存所做的工作就是“记住”已经加载的资源,让页面的加载速度更快。

        12、压缩CSS代码

        不管你在页面中如何使用CSS,CSS文件都是越小越好,这会帮助你提升网页的加载速度。你可以通过 Minify CSS工具 来压缩你的CSS代码。
        压缩前:
        body  
        {  
        background-color:#d0e4fe;  
        }  
        h1  
        {  
        color:orange;  
        text-align:center;  
        }  
        压缩后:
        [css] view plaincopy
        body {background-color:#d0e4fe;}  
        h1 {color:orange;text-align:center;}  

        13、尽量减少DNS查询次数

        当浏览器与Web服务器建立连接时,它需要进行DNS解析,将域名解析为IP地址。然而,一旦客户端需要执行DNS lookup时,等待时间将会取决于域名服务器的有效响应的速度。
        虽然所有的ISP的DNS服务器都能缓存域名和IP地址映射表,但如果缓存的DNS记录过期了而需要更新,则可能需要通过遍历多个DNS节点,有时候需要通过全球范围内来找到可信任的域名服务器。一旦域名服务器工作繁忙,请求解析时就需要排队,则进一步延迟等待时间。
        因此,减少DNS的查询次数非常重要,页面加载时就尽量避免额外耗时。为了减少DNS查询次数,最好的解决方法就是在页面中减少不同的域名请求的机会。
        你可以通过 request checker工具 来检测页面中存在多少请求,然后进行优化。

        14、尽量减少重定向

        有时为了特定需求,需要在网页中使用重定向。重定向的意思是,用户的原始请求(例如请求A)被重定向到其他的请求(例如请求B)。
减少重定向
        但是这会造成网站性能和速度下降,因为浏览器访问网址是一连串的过程,如果访问到一半而跳到新地址,就会重复发起一连串的过程,这将浪费很多的时间。所以我们要尽量避免重定向,           网站SEO前端优化建议:
        不要链接到一个包含重定向的页面;
        不要请求包含重定向的资源;

        15、优化样式表和脚本的顺序

        Style标签和样式表调用代码应该放置在JavaScript代码的前面,这样可以使页面的加载速度加快。
        <head>  
        <meta name=description content="description"/>  
        <title>title</title>  
        <style>  
        page specific css code goes here  
        </style>  
        <script type="text/javascript">  
        javascript code goes here  
        </script>  
        </head>  

        16、避免JavaScripts阻塞渲染

        浏览器在遇到一个引入外部JS文件的<script>标签时,会停下所有工作来下载并解析执行它,在这个过程中,页面渲染和用户交互完全被阻塞了,这时页面加载就会停止。
        建议删除干扰页面中第一屏内容加载的JavaScript,第一屏是指用户在屏幕中最初看到的页面,无论是桌面浏览器、手机,还是平板电脑。
避免JavaScripts阻塞渲染

        17、缩小原始图像

        如果无需在页面中显示较大的图像,那么就建议将图像的实际大小缩小为显示的大小,这样可以减少下载图像所需的时间。

        18、指定图像尺寸

        当浏览器加载页面的HTML代码时,有时候需要在图片下载完成前就对页面布局进行定位。如果HTML里的图片没有指定尺寸(宽和高),或者代码描述的尺寸与实际图片的尺寸不符时,浏览器则要在图片下载完成后再“回溯”该图片并重新显示,这将消耗额外的时间)。
        所以,最好为页面中的每一张图片都指定尺寸,不管是在HTML里的<img>标签中,还是在CSS中。

        19、避免使用 CSS Expressions(CSS表达式)

        如background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ,避免使用 CSS Filter(CSS滤镜),使用CSS缩写,减少代码量,通过CSSSprites把同类图片合成一张,减少图片请求,减少查询层级:如.header .logo要好过.header .top .logo,减少查询范围:如.header>li要好过.header li,避免TAG标签与CLASS或ID并存:如a.top、button#submit,删除重复的CSS.

        20、语义化HTML

        语义化HTML的好处是可以使代码简洁清晰、支持不同设备、利于搜索引擎、便于团队开发,减少DOM节点:加速页面渲染,给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放,防止src属性和link的href属性为空:当值为空时,浏览器很可能会把当前页面当成其属性值加载,正确的闭合标签:如避免使用<div/>,浏览器会多一个将它解析成<div\></div\>的过程;链接为目录或首页的地址后面加”/”,用LINK而不用@import方式导入样式,样式放在页头,JS放在页尾,缩小favicon.ico并缓存。

        21、使用CDN加速

        其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定,通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
CDN加速

        23、压缩图片和使用图片Spirit技术

        基本原理:压缩文件的基本原理是查找文件内的重复字节,并建立一个相同字节的“词典”文件,并用一个代码表示,比如在文件里有几处有一个相同的词“铜梁SEO优化”用一个代码表示并写入“词典”文件,这样就可以达到缩小文件的目的。
更多>>相关文章