web页面性能优化以及SEO

web前端页面性能优化

为了提高页面的加载速度,让用户有更好的体验,前端网站的性能优化是非常有必要的。

优化的方式有以下几种:

一、 编辑html的时候注意语义结构化

  结构语义化:根据内容的结构,选择合适的标签,以便于开发者阅读和写出更优雅的代码,同时让浏览器的爬虫和机器很好地解析。

  结构语义化的优点包括:

    1. 在页面没有css或者css还未加载出来的时候,页面也能呈现出很好的结构。

    2. 有利于SEO,易于被搜索引擎抓取,有利于推广。

    3. 方便盲人阅读器、屏幕阅读器等等设备来解析。

    4. 用户体验更好,例如图片的alt属性,在图片没有加载出来时给予合理的解释。

    5. 便于团队开发和维护。

    6. 遵循分离结构和表现原则。

扫描二维码关注公众号,回复: 5468277 查看本文章

二、 对网站的文件和资源进行优化

  1. 书写css和js的时候要注意代码优化,尽量重复利用。

  2. 可以用一个大的css文件来合并多个小的css文件,浏览器在请求每一个css文件时都会发送一个http请求,在http请求带来的延迟没有结束的时候,用户都将在等待中度过。

  3. 如果网页中使用了大量背景图片,那么这些图片每一张都会发送一个http请求,可以使用css sprite来合并网页中的需要频繁加载的多个图片。对于合并之后的图片,我们需要注意对它图片质量和大小的优化,图片越小加载速度越快。

  4. css文件放置在head,js放置在文档尾部。

三、 利用多个域名来存储网站资源

  1. 可以节约cookie带宽。 

  2. 节约主域名的连接数,优化页面响应速度。

四、利用缓存

  Ajax调用都采用缓存调用方式,一般采用附加特征参数方式实现,注意其中的<script src=”xxx.js?{VERHASH}”,{VERHASH}就是特征参数,这个参数不变化就使用缓存文件,如果发生变化则重新下载新文件或更新信息。

五、SEO优化

     

搜索引擎主要以:

外链数量和质量

网页内容和结构

来决定某关键字下的网页搜索排名。

 

前端应该注意网页结构和内容方面的情况:

Meta标签优化

主要包括主题(Title),网站描述(Description)。还有一些其它的隐藏文字比如Author(作者),Category(目录),Language(编码语种)等。

符合W3C规范的语义性标签的使用。

 

如何选取关键词并在网页中放置关键词

搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词(一般在5个上下),然后针对这些关键词进行优化,包括关键词密度(Density),相关度(Relavancy),突出性(Prominency)等等。

猜你喜欢

转载自blog.csdn.net/qq_41540945/article/details/88358301