易搜百度搜索引擎优化 让客户更容易搜索到您!

立即致电:4000-340-360 体验易搜百度搜索引擎优化为您带来的高效服务。

当前位置:易搜网络技术公司 >> 百度优化 >> 百度搜索引擎优化 >> 浏览文章

大拿分享杰奇CMS如何实现百度友爱度?

文章标签:大拿,分享,如何,实现,百度,友好

【前言】

随着移动阅读的普及,越来越多的站长开始进行移动化网站的建设(俗称手机站或者WAP站)。优秀的网页设计规范,有利于进步用户体验以及搜索引擎的收录。对此百度也推出了《百度搜索Mobile Friendly(移动友爱度)标准V1.0》,迎接大家作为搜索优化方面的参考。

本文针对《杰奇小说连载体系/杰奇原创文学体系》用户在移动网站的模板设计方面,结合百度友爱度标准和杰奇体系特色提供一些规范和优化建议。

杰奇原创文学体系移动版网站演示地址:http://ycm.jieqi2164。

【页面加载速度优化】

网页加载速度将极大影响用户体验及留存率,用户期望且能够接受的页面加载时间在3秒以内。

杰奇对体系程序自己做了大量优化,启用缓存的模式下把重要页面的实行时间控制在了0.1秒内。在这个基础之上,对于网络性能而言,要把优化的重点放在网页内容加载自己。我们把常见的影响因素分硬件和软件两部分,硬件相干的有:

1、服务器负载的控制,以cpu、内存和磁盘IO为重要参考参数。

2、域名解析和网络传输速度,建议站长选择稳固的域名和网络服务商,并根据网站现实必要保留充足大网络带宽。

软件相干重要指前端页面设计:

1、移动网站的页面格式经历了从wml ->xhtml -> html5,目前以html5 + css3作为主流页面设计规范。

2、图片格式采用png/jpg/gif皆可,重要目的是保持清晰的情况下让文件容量尽量小。手机的屏幕宽度描述通常分为像素宽度width和设备宽度device-width,比如iphone6的widh:750,device-width:375。通常网页设计以device-width为基准,但是为了手机上图片清晰,现实图片长宽可以是css定义里面的2倍。

3、网页中的小图片或者图标,建议使用icon font或者css sprites技术,把多个图片合并成一个文件。

4、网页设计时一个页面可能必要载入多个js和css,现实上线后建议多个同类文件合并,并且压缩css和js文件。

5、web服务端启用gzip压缩输出功能可以显明进步加载速度。

除了以上提到的,体系架构及页面优化方法还涉及到许多技术细节,可以参考《高性能网站建设指南》、《高性能网站建设进阶指南》两本书中所提到的诸多技术优化方法。另外还可以使用一些业绩比较成熟的设计策略,比如按需加载、延时加载等、征对不同的网络环境返回不同信息量的板式或者不同压缩程度的图片、渐进设计等等。

随着web交互越来越雄厚,后续我们还会推动在用户交互举动上的性能提拔,给出交互性能的检测工具,确保用户交互的顺畅。重要涉及到面向渲染引擎、JS解析引擎的一些运行时特点,比如避免频繁触发repaint和reflow、优化dom操作策略、避免使用低效的API、选择器优化、避免内存泄漏,行使内存缓存数据,优化循环或者递归算法降低复杂度等。可以参考《高性能javascript》来进一步了解。

网站优化的细节特别很是多,影响的因素也许多,我们这里给出一些方向和学习建议,盼望大家可以边优化边结合目前的一些主流工具比如yslow、pagespeed进行线下检测,线下的检测比线上检测要更单纯,但是也足以发现许多比较显明的题目。

【页面排版规范】

1、因为不同手机屏幕分辨率差异较大,我们期望在大部分手机上完备表现,且不出现页面的团体缩放,和页面的横向滚动条,无错乱,无大留白。我们通常以device-width作为宽度标准,要求网页内容能在device-width=320px的手机上完备表现。这部分在网页上的代码为:

比如在device-width=320的iphone5中,网页结果如下:

大拿分享杰奇CMS如何实现百度友爱度?

除了设置viewport之外,建议可以多接触一些相应式布局、流式布局的知识,或者使用一些成熟的栅格体系,比如bootstrap的栅格部分。

2、正笔墨号保举14px,行高默认1.5或1.6倍。题目采用大字号,备注内容小字号,建议在12px-24px之间选择。

3、通栏图片可以百分比情势表现以保证全屏宽度,其他封面图片采用固定长宽。一行表现多图时候按百分比排列每张图片位置。图文排版时候图片固定靠左,笔墨在图片右侧。比如以上的截图页面,在device-width=375的iphone6下结果如下:

大拿分享杰奇CMS如何实现百度友爱度?

【功能易用性】

1、首页提供栏目导航及搜索功能。

2、内页提供返回上一页和返回首页功能

3、分页列表点击查看下一页或者直接在本页表现更多。

4、同一作品封面图片大小及会员头像大小。

5、尽量把链接A标签设置成block模式,更利于触屏上的手辅导击。

6、提醒信息不保举频繁使用弹出框和浮动层,但是我们仍保留以上模式来削减页面切换。

7、章节阅读页面提供背景及字体等设置功能。

8、如需增长广告位置,请勿遮挡主体内容。

本文由杰奇网络 供稿,百度站长学院首发,如需转载,请注明文章来源

注:相干网站建设技巧阅读请移步到建站教程频道。