如何进行SEO优化:

(1) 避免head标签js堵塞:

  所有放在head标签里面的js和css都会堵塞渲染;如果这些css和js需要加载很久的话,那么页面就空白了;

  解决办法:一是把script放到body后面,这也是很多网站采取的方法。

       第二种是给script加defer或者async的属性,一旦script是defer或者async延迟的,那么这个script将会异步加载,但不会马上执行,会在readystatechange变为Interactive后按顺序依次执行;(做了解)

(2) 减少head里面的css资源:

  css必须放在head标签里面,如果放在body里面会造成对layout好的dom进行重排造成页面闪烁;但是一旦放在head标签里面又会堵塞页面渲染;所以要尽可能的减小css体积。

(3) 压缩和缓存:

(4)延迟加载图片:

  

这里没有直接给src路径,而是在页面加载完成后用js操作src,减少了页面加载图片的时间,首先把整个页面结构呈现给用户;惰性加载图片也是差不多;当用户滑动页面到一定高度时(监听scroll事件),再动态的依次对图片进行处理;

(5) DNS解析优化:

  DNS查询需要花费大量时间来返回一个主机名的IP地址;

  在我们的网站中,可能会加载到很多个域的东西,比如引入了百度地图啊之类的sdk和一些自己的子域名服务;第一次打开网站时要做很多次DNS查找;DNS预读取能够加快网页打开时间;

  

解决办法:在head中写上几个link标签,对标签中的地址提前解析DNS,这个解析是并行发生的,不会堵塞页面渲染;

6)html别嵌套太多层,加重页面layout的压力;

7)css选择器的合理运用,减少匹配的计算量;

8)js中别滥用闭包,会加深作用域链,增加变量查找时间;

9)减少http请求等

前端里面如何进行搜索引擎优化(SEO)的更多相关文章

  1. 网络爬虫与搜索引擎优化(SEO)

    爬虫及爬行方式 爬虫有很多名字,比如web机器人.spider等,它是一种可以在无需人类干预的情况下自动进行一系列web事务处理的软件程序.web爬虫是一种机器人,它们会递归地对各种信息性的web站点 ...

  2. 网站优化不等于搜索引擎优化SEO

    对于SEO相信搞网络营销的人基本上都知道这个名词,英文全称为search engine optimization,中文一般叫搜索引擎优化,也有的叫搜索引擎定位(Search Engine Positi ...

  3. 网站搜索引擎优化SEO策略及相关工具资源

    网站优化的十大奇招妙技 1. 选择有效的关键字: 关键字是描述你的产品及服务的词语,选择适当的关键字是建立一个高排名网站的第一步.选择关键字的一个重要的技巧是选取那些常为人们在搜索时所用到的关键字. ...

  4. 身为前端开发工程师,你需要了解的搜索引擎优化SEO.

    网站url网站创建具有良好描述性.规范.简单的url,有利于用户更方便的记忆和判断网页的内容,也有利于搜索引擎更有效的抓取您的网站.网站设计之初,就应该有合理的url规划. 处理方式: 1.在系统中只 ...

  5. 网站搜索引擎优化(SEO)的18条守则

    1.永远不要放过网页的title,这个地方应该是你每次优化的重点. 2.请不要在title,deion,keyword里写太多东西,越是贪婪,得到的就越少. 3.网页的头部和底部是很重要的,对于搜索引 ...

  6. WordPress博客系统搜索引擎优化seo全攻略方法

    WordPress的文章.评论等很多数据都是存放在数据库的,所以搭建wordpress网站的时间,网站的空间不需要多大,而数据库一定要充足,而在WordPress数据库中主要使用 wp_posts 表 ...

  7. 网站推广优化(SEO,网站关键字优化,怎么优化网站,如何优化网站关键字)

    网站推广优化教程100条(完整版)下面介绍新手建站推广完美教程,各位根据自己的实际情况酌情选用: 1.准备个好域名.①.尽量在5位数内,当然也不一定,反正要让用户好记.(看个人):②.尽量用顶级的域名 ...

  8. 知道吗?9个搜索引擎优化(SEO)最佳实践

    作为网页设计师,搜索引擎优化重要吗?我们知道,网站设计是把屏幕上平淡无奇变成令人愉快的美感,更直观地辨认信息.这也是人与人之间在沟通想法,这样的方式一直在演变.穴居人拥有洞穴壁画,古埃及人有象形文字, ...

  9. 前端后端分离,怎么解决SEO优化的问题呢?

    对于90%以上的互联网公司来说,前后端分离是必须要做的.目前接手的公司的一个工程,后端是PHP,用的smarty模板,开发效率和之前公司的完全分离相比,确实低不少,一方面需要前端会PHP,另一方面沟通 ...

随机推荐

  1. python with语句中的变量有作用域吗?

    一直以为python中的with语句中的变量,只在with语句块中起作用.不然为什么要缩进一个级别呢? 呵呵,然而并没有为with语句内的变量创建新的作用域. 举例: # test.py with o ...

  2. 如何设置Navicat的显示字体与字体大小?

    方法/步骤     打开Navicat   点击[工具]菜单,再选择[选项]   在[选项]界面,点击[外观]下的[字体]   设置网格字体和大小   设置编辑器字体和大小   设置命令列界面字体和大 ...

  3. WCF三种通信方式

    一.概述 WCF在通信过程中有三种模式:请求与答复.单向.双工通信.以下我们一一介绍. 二.请求与答复模式 描述: 客户端发送请求,然后一直等待服务端的响应(异步调用除外),期间处于假死状态,直到服务 ...

  4. nginx配置http和https共存

    server { listen ; listen ssl; server_name localhost; #ssl on; ssl_certificate /usr/local/Tengine/ssl ...

  5. HTTP max-age与Expires的分别

    主要重点在于我们要明白一个相对(Expires)一个绝对(max-age). 分别 max-agemax-age是HTTP/1.1中,他是指我们的web中的文件被用户访问(请求)后的存活时间,是个相对 ...

  6. Azure 国内版 如何用powershell修改linux系统的密码

    国内版不像国际版本那样,一个UI按钮就解决问题,国内版很多功能上线比较慢,我们只能用powershell工具进行命令行 式的更改,也当温习一下命令了,好久不用了. $vm = Get-AzureVM ...

  7. cactiEZ 配置

    CactiEZ 中文版是简单有效的cacti中文解决方案,它基于centos6 整合了cacti的相关软件,重新编译的一个新的操作系统 它基于centos6,启动速度快,支持EXT4文件系统,全中文页 ...

  8. 51Nod1601 完全图的最小生成树计数 Trie Prufer编码

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1601.html 题目传送门 - 51Nod1601 题意 题解 首先我们考虑如何求答案. 我们将所有 ...

  9. Codechef STMINCUT S-T Mincut (CodeChef May Challenge 2018) kruskal

    原文链接http://www.cnblogs.com/zhouzhendong/p/9010945.html 题目传送门 - Codechef STMINCUT 题意 在一个有边权的无向图中,我们定义 ...

  10. JDK生成证书:

    JDK生成证书: 在此之前确保本地已安装JDK1.6 1.生成客户端的私钥,客户端的证书 1)keytool -genkey -alias clientkey -keystore kclient.ke ...