项目优化那些事儿

149 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第7天,点击查看活动详情

这里主要分SEO优化和性能优化两方面

SEO优化

1. 提高页面加载速度。 能用css解决的不用背景图片,背景图片也尽量压缩大小,可以几个icons放在一个图片上,采用css精灵(css sprite),使用background-position找到需要的图片位置。减少HTTP请求数,提高网页加载速度。 

2. 结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上,通过外链的方式能大大加快网页加载速度的,css文件可以放在head里,JS文件可以放置在body的最下方,在不影响阅读的情况下再去加载JS文件。 

3. 优化网站分级结构。在每个内页加面包屑导航是很有必要的,可以让蜘蛛进入页面之后不至于迷路,有条件的话,最好能单独加个Sitemap页面,将网站结构一目了然地展示在蜘蛛面前,更有利于蜘蛛抓取信息。 

4. 集中网站权重。由于蜘蛛分配到每个页面的权重是一定的,这些权重也将平均分配到每个a链接上,那么为了集中网站权重,可以使用"rel=nofollow"属性,它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。 

5. 文本强调标签的使用。当着重强调某个关键词需要加粗表示,选用strong标签比使用b标签要更有强调作用。 

6. a标签的title属性的使用。在不影响页面功能的情况下,可以尽量给a标签加上title属性,可以更有利于蜘蛛抓取信息。 

7. 图片alt属性的使用。这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息,作用同上。 

8. H标签的使用。主要是H1标签的使用需要特别注意,因为它自带权重,一个页面有且最多只能有一个H1标签,放在该页面最重要的标题上面,如首页的logo上可以加H1标签。 

9. 图片大小声明。如果图片大小不做定义的话,页面需要重新渲染,就会影响到加载速度。 

10. 页面布局调整。页面内容尽量不要做成flash、视频,这些东西蜘蛛是抓不到的,就算是必须的,也要生成相应的静态页面。 

11. 网站结构呈扁平状树型,目录结构不宜过深。每个页面离首页最多点击不超过3次,过深不利于搜索引擎的抓取。

性能优化

1. content 方面

  • 减少 HTTP 请求:合并文件、 CSS 精灵、 inline Image

  • 减少 DNS 查询: DNS 缓存、将资源分布到恰当数量的主机名

  • 减少 DOM 元素数量

2. Server 方面

  • 使用 CDN

  • 配置 ETag

  • 对组件使用 Gzip 压缩

  • Cookie 方面

  • 减小 cookie 大小

3. css 方面

  • 将样式表放到页面顶部

  • 不使用 CSS 表达式

  • 使用  不使用 @import

4. Javascript 方面

  • 将脚本放到页面底部

  • 将 javascript 和 css 从外部引入

  • 压缩 javascript 和 css

  • 删除不需要的脚本

  • 减少 DOM 访问

5. 图片方面

  • 优化图片:根据实际颜色需要选择色深、压缩

  • 优化 css 精灵

  • 不要在 HTML 中拉伸图片

6. 标签语义化

建议使用前者,后者被废弃了

加粗 strong / b

下划线 ins / u

斜体 em / i

删除线 del / s

最后

欢迎补充还有收藏^_^。

报持微笑.webp