杰奇CMS如何實(shí)現(xiàn)百度友好度
- 威海seo技術(shù)提升 威海CMS
- 1988
應(yīng)廣大站長(zhǎng)對(duì)移動(dòng)友好度建設(shè)內(nèi)容要求，本次學(xué)堂請(qǐng)到了《杰奇小說(shuō)連載系統(tǒng)/杰奇原創(chuàng)文學(xué)系統(tǒng)》的官方工程師為我們解讀杰奇是如何做好友好度建設(shè)的！
全文如下：
【前言】
隨著移動(dòng)閱讀的普及，越來(lái)越多的站長(zhǎng)開(kāi)始進(jìn)行移動(dòng)化網(wǎng)站的建設(shè)（俗稱手機(jī)站或者WAP站）。良好的網(wǎng)頁(yè)設(shè)計(jì)規(guī)范，有利于提高用戶體驗(yàn)以及搜索引擎的收錄。對(duì)此百度也推出了《百度搜索Mobile Friendly（移動(dòng)友好度）標(biāo)準(zhǔn)V1.0》，歡迎大家作為搜索優(yōu)化方面的參考。
本文針對(duì)《杰奇小說(shuō)連載系統(tǒng)/杰奇原創(chuàng)文學(xué)系統(tǒng)》用戶在移動(dòng)網(wǎng)站的模板設(shè)計(jì)方面，結(jié)合百度友好度標(biāo)準(zhǔn)和杰奇系統(tǒng)特色提供一些規(guī)范和優(yōu)化建議。杰奇原創(chuàng)文學(xué)系統(tǒng)移動(dòng)版網(wǎng)站演示地址為http://ycm.jieqi.com。
【頁(yè)面加載速度優(yōu)化】
網(wǎng)頁(yè)加載速度將極大影響用戶體驗(yàn)及留存率，用戶期望且能夠接受的頁(yè)面加載時(shí)間在3秒以內(nèi)。
杰奇對(duì)系統(tǒng)程序本身做了大量?jī)?yōu)化，啟用緩存的模式下把主要頁(yè)面的執(zhí)行時(shí)間控制在了0.1秒內(nèi)。在這個(gè)基礎(chǔ)之上，對(duì)于網(wǎng)絡(luò)性能而言，要把優(yōu)化的重點(diǎn)放在網(wǎng)頁(yè)內(nèi)容加載本身。我們把常見(jiàn)的影響因素分硬件和軟件兩部分，硬件相關(guān)的有：
1、服務(wù)器負(fù)載的控制，以cpu、內(nèi)存和磁盤I O為主要參考參數(shù)。
2、域名解析和網(wǎng)絡(luò)傳輸速度，建議站長(zhǎng)選擇穩(wěn)定的域名和網(wǎng)絡(luò)服務(wù)商，并根據(jù)網(wǎng)站實(shí)際需要保留足夠大網(wǎng)絡(luò)帶寬。
軟件相關(guān)主要指前端頁(yè)面設(shè)計(jì)：
1、移動(dòng)網(wǎng)站的頁(yè)面格式經(jīng)歷了從wml ->xhtml -> html5，目前以html5 + css3作為主流頁(yè)面設(shè)計(jì)規(guī)范。
2、圖片格式采用png/jpg/gif皆可，主要目的是保持清晰的情況下讓文件容量盡量小。手機(jī)的屏幕寬度描述通常分為像素寬度width和設(shè)備寬度device-width，比如iphone6的widh:750，device-width:375。通常網(wǎng)頁(yè)設(shè)計(jì)以device-width為基準(zhǔn)，但是為了手機(jī)上圖片清晰，實(shí)際圖片長(zhǎng)寬可以是css定義里面的2倍。
3、網(wǎng)頁(yè)中的小圖片或者圖標(biāo)，建議使用icon font或者css sprites技術(shù)，把多個(gè)圖片合并成一個(gè)文件。
4、網(wǎng)頁(yè)設(shè)計(jì)時(shí)一個(gè)頁(yè)面可能需要載入多個(gè)js和css，實(shí)際上線后建議多個(gè)同類文件合并，并且壓縮css和js文件。
5、web服務(wù)端啟用gzip壓縮輸出功能可以明顯提高加載速度。
除了以上提到的，系統(tǒng)架構(gòu)及頁(yè)面優(yōu)化方法還涉及到很多技術(shù)細(xì)節(jié)，可以參考《高性能網(wǎng)站建設(shè)指南》、《高性能網(wǎng)站建設(shè)進(jìn)階指南》兩本書(shū)中所提到的諸多技術(shù)優(yōu)化方法。另外還可以使用一些業(yè)績(jī)比較成熟的設(shè)計(jì)策略，比如按需加載、延時(shí)加載等、征對(duì)不同的網(wǎng)絡(luò)環(huán)境返回不同信息量的板式或者不同壓縮程度的圖片、漸進(jìn)設(shè)計(jì)等等。
隨著web交互越來(lái)越豐富，后續(xù)我們還會(huì)推動(dòng)在用戶交互行為上的性能提升，給出交互性能的檢測(cè)工具，確保用戶交互的順暢。主要涉及到面向渲染引擎、JS解析引擎的一些運(yùn)行時(shí)特點(diǎn)，比如避免頻繁觸發(fā)repaint和reflow、優(yōu)化dom操作策略、避免使用低效的API、選擇器優(yōu)化、避免內(nèi)存泄露，利用內(nèi)存緩存數(shù)據(jù)，優(yōu)化循環(huán)或者遞歸算法降低復(fù)雜度等?？梢詤⒖肌陡咝阅躂avaScript》來(lái)進(jìn)一步了解。
網(wǎng)站優(yōu)化的細(xì)節(jié)非常多，影響的因素也很多，我們這里給出一些方向和學(xué)習(xí)建議，希望大家可以邊優(yōu)化邊結(jié)合目前的一些主流工具比如yslow、pagespeed進(jìn)行線下檢測(cè)，線下的檢測(cè)比線上檢測(cè)要更單純，但是也足以發(fā)現(xiàn)很多比較明顯的問(wèn)題。
【頁(yè)面排版規(guī)范】
1、由于不同手機(jī)屏幕分辨率差異較大，我們期望在大部分手機(jī)上完整顯示，且不出現(xiàn)頁(yè)面的整體縮放，和頁(yè)面的橫向滾動(dòng)條，無(wú)錯(cuò)亂，無(wú)大留白。我們通常以device-width作為寬度標(biāo)準(zhǔn)，要求網(wǎng)頁(yè)內(nèi)容能在device-width=320px的手機(jī)上完整顯示。這部分在網(wǎng)頁(yè)上的代碼為：
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
比如在device-width=320的iphone5中，網(wǎng)頁(yè)效果如下：
除了設(shè)置viewport之外，建議可以多接觸一些響應(yīng)式布局、流式布局的知識(shí)，或者使用一些成熟的柵格系統(tǒng)，比如bootstrap的柵格部分。
2、正文字號(hào)推薦14px，行高默認(rèn)1.5或1.6倍。標(biāo)題采用大字號(hào)，備注內(nèi)容小字號(hào)，建議在12px-24px之間選擇。
3、通欄圖片可以百分比形式顯示以保證全屏寬度，其他封面圖片采用固定長(zhǎng)寬。一行顯示多圖時(shí)候按百分比排列每張圖片位置。圖文排版時(shí)候圖片固定靠左，文字在圖片右側(cè)。比如以上的截圖頁(yè)面，在device-width=375的iphone6下效果如下：
【功能易用性】
1、首頁(yè)提供欄目導(dǎo)航及搜索功能。
2、內(nèi)頁(yè)提供返回上一頁(yè)和返回首頁(yè)功能
3、分頁(yè)列表點(diǎn)擊查看下一頁(yè)或者直接在本頁(yè)顯示更多。
4、統(tǒng)一作品封面圖片大小及會(huì)員頭像大小。
5、盡量把鏈接A標(biāo)簽設(shè)置成block模式，更利于觸屏上的手指點(diǎn)擊。
6、提示信息不推薦頻繁使用彈出框和浮動(dòng)層，但是我們?nèi)员Ａ粢陨夏Ｊ絹?lái)減少頁(yè)面切換。
7、章節(jié)閱讀頁(yè)面提供背景及字體等設(shè)置功能。
8、如需增加廣告位置，請(qǐng)勿遮擋主體內(nèi)容。
小說(shuō)信息頁(yè)彈出登錄框
章節(jié)閱讀頁(yè)提供背景和字體設(shè)置
本文由 杰奇網(wǎng)絡(luò) 供稿，百度站長(zhǎng)學(xué)堂首發(fā)，如需轉(zhuǎn)載，請(qǐng)注明文章來(lái)源！
來(lái)源：百度搜索資源平臺(tái) 百度搜索學(xué)堂
