SEO是什么?前端如何进行网站优化?

61 阅读3分钟

SEO(Search Engine Optimization)搜索引擎优化。
搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。
SEO是指为了从搜索引擎中获得更多的免费流量,从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划,使网站更适合搜索引擎的索引原则的行为。

SEO原理

  • 页面抓取: 蜘蛛向服务器请求页面,获取页面内容
  • 分析入库:对获取到的内容进行分析,对优质页面进行收录
  • 检索排序:当用户检索关键词时,从收录的页面中按照一定的规则进行排序,并返回给用户结果

SEO优化

  1. 对网站的标题、关键字、描述精心设置
  2. 网站内容优化:内容与关键字的对应,增加关键字的密度
  3. 重要内容HTML代码放在最前
  4. 重要内容不要用js输出:爬虫不会执行js获取内容
  5. 少用iframe:搜索引擎不会抓取iframe中的内容
  6. 友情链接
  7. img非装饰性图片必须加 alt
  8. 提高网站速度:网站速度是搜索引擎排序的一个重要指标
  9. 语义化的HTML代码
  10. 生成针对搜索引擎友好的网站地图(包含了所有网站链接的文件,这些链接是这个网站中重要的页面,作用是让更多页面能最大化被搜索蜘蛛发现并收录)

​编辑

 

前端的性能优化

内容

  • 减少HTTP请求
  • 减少DNS查询:DNS缓存,将资源分布到恰当数量的主机
  • 减少DOM元素数量

服务器

  • 使用CDN 加快用户访问速度,减轻服务器压力
  • 配置Etag
  • Gzip压缩  :GZIP即数据压缩,用于压缩使用Internet传输的所有文本资源。开启GZIP的方法很简单,到对应的web服务配置文件中设置一下即可。以Apache为例,在配置文件httpd.conf中添加。
  • ssr渲染

CSS

  • 外部&顶部引入
  • 不使用 CSS 表达式
  • link 替代 @import
  • link 替代 @import

JS

  • 外部&底部引入
  • 减少DOM访问
  • 使用事件代理

图片

  • 优化图片
  • 压缩图片

其他

  • 压缩css和js
  • 正确的 css和js放置 :JavaScript 属性放在HTML 的底部,CSS 样式表放在头部Head。
  • 用浏览器开发工具监控前端页面的性能
  • 预加载
  • 懒加载及延迟加载
  • 避免 404 页面 及 favicon
  • 浏览器缓存 (HTTP , 本地缓存):浏览器缓存是将网络资源存储在本地,等待下次请求该资源时,如果资源已经存在就不需要到服务器进行重新请求,直接在本地读取调用
  • 首屏性能优化
  • 按需加载
  • 服务器渲染
  • CSS 动画优化
  • 避免资源的重定向
  • 重排(reflow)和重绘(repaint)