1. 首页
  2. 白帽seo

百度移动网页加速器MIP与常见网页加速方法

1-16121410114R46-lp-1

 

百度站长近日出了一个MIP的功能入口,其实这个是谷歌的AMP的翻版,官方的解释是:

MIP(Mobile Instant Page – 移动网页加速器),seo进阶优化是一套应用于移动网页的的开放性技术标准,通过提供MIP-HTML规范、MIP-JS运行环境以及MIP-Cache页面缓存系统,实现移动网页加速。

百度移动网页加速器MIP与常见网页加速方法

结合DedeCMS只需要在所有模板里增加几句代码即可。红色部分是必须增加的。

!DOCTYPE html html mip head meta http-equiv=Content-Type content=text/html charset=utf-8 / meta name=viewport content=width=device-width,minimum-scale=1,initial-scale=1link rel=stylesheet type=text/css href= /head bodyHello World!/body script src= /html

 

还有许多重要说明请参考官方说明:

自定义样式规范

 

处于性能考虑,html中不允许使用内联的style,所有样式只能放到head的style标签内,参考本站首页的模板。

head style mip-custom p{color:#c00} /style /head body pHello world!/p p style=color:#c00这样的内联style不再采用/p /body

什么是网页加速,对网站SEO有多大影响

 

网页加速顾名思义是让网页更快地传送到客户端,减少用户的等待时间,对SEO来说有重要作用,用户体验会影响到网站综合数据(PV、停留时间、跳出率等)。因此要做好网站的SEO优化,就要尽最大的努力让网站的表现最好。

常见的网页设计加速方法

1.良好的设计结构

 

在网页头部添加下面代码,遵循XHTML编码,以提高下载和解析速度

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

 

必须牢记的代码标签规则:

①块级元素(元素占用一行,垂直方向排列)采用单独或者组合:p、ul-li、dl-dt-dd、h1~h4等;

②行内元素(元素在同一行)采用:a、b、i、em、span;

③块级元素包含行内元素,行内元素不包含块级元素;

④行内元素对width、height无效,可以设置line-height,margin、padding上下无效;

⑤采用display:block实现行内元素变块级元素,display:inline-block实现块级元素元素变行间元素并可以设置margin、padding上下;

⑥标签尽量使用class类,减少使用id类,命名规则以简短小写英文、小写全拼音加数字或下划线为主,不建议采用驼峰式命名,如

div id=navHoverOne class=navHoverOne

 

例子:全通式导航HTML与CSS写法

div id=nav ul li class=hovera href=/首页/a/li lia href=/link1栏目1/a/li lia href=/link2栏目2/a/li lia href=/link4栏目3/a/li /ul /div CSS样式表 style #nav{width:100%} #nav ul{width:1000pxmargin:0 auto} #nav ul li a{display:inline-blockline-height:30pxpadding:0 20pxbackground:#ccccolor:#808080} #nav ul li a:hover{background:#c00} #nav .hover{background:#c00} /style

 

在MIP的规则下style被替换为style mip-custom,一些具体的标签参考官方说明。

2.网页简洁,不宜填充过多内容

 

特别以内容为主题的博客类网站,每一篇的内容简介尽量把重点概括,也可以采用文章开头的几十个字,建议单独编写简介,把关键词和主要内容包含在里面。

3.图片和文字的合理采用

 

网站前端设计得非常大气吸引人,图片占据了绝大多数的空间,如果你的服务器不够牛,请尽量采用文字的形式,这样搜索引擎也能获取更多关于这个页面的信息。

不要用图片代替文字,一些按钮、不必要的小图标可以采用文字和CSS样式的设计,尽量减少加载网页的加载次数。现在浏览器兼容性强,一些ie6的兼容性完全不用考虑,可以采用CSS解决绝大多数的图标问题。

图片路径采用绝对路径而不要带有/../的相对路径。图片上传前需要进行处理,在清晰度和大小之间权衡,如果不是专业的图片展,大可以采用纯色背景+文字的形式,图片颜色元素越多,图片越大。 另外图片元素需要完整,尺寸也可以在样式表里统一编写,必须含有alt标签。

img src=/img/1.jpg alt=图片 width=100 height=200

 

如果是MIP规则的话img标签被替换为mip-img使用的时候需要注意。

4.正确使用JavaScript

 

网页设计中少不了JavaScript,网上有非常多的JS效果,采用的JavaScript封装不一样,往往出现冲突、重复等情况,而网页内联这些内容的话会影响加载时间,最好的办法是让这些外部化。

link href=/css/Style.css media=all rel=Stylesheet type=text/css / script src=/js/Javascript.js type=text/javascript/script

5.不使用表格布局

 

指的是表格而不是表单,table作为块级元素,早期被用来进行网页布局,但是会增加非常多的源代码和样式,修改维护麻烦,采用更简单的DIV+CSS。

6.压缩CSS、JS、PHP、HTML、XML方法

 

最常用的是采用Gzip,许多浏览器都支持这样的压缩算法。参考文章《万网虚拟主机开启Gzip压缩教程测试有效》;

也可以使用在线压缩工具,可以删除空格、回车、符号、注释、空白,其实自己在编写的时候有这样的意识后,这些问题都不是什么问题。

END
原创文章,作者:moss,如若转载,请注明出处:https://www.heoseo.com/bmseo/13689.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:

邮件:986522615@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息