你的目標(biāo)市場已經(jīng)變得移動化。移動用戶最多可將其時(shí)間的12%花費(fèi)在其設(shè)備上瀏覽，這相當(dāng)于每月花費(fèi)87個(gè)小時(shí)，或每年花費(fèi)1,044個(gè)小時(shí)。其中90%的時(shí)間都花在了使用移動應(yīng)用上。

　　這就是為什么擁有移動APP對你的業(yè)務(wù)如此有價(jià)值的原因。難怪每個(gè)人似乎都在追趕潮流。現(xiàn)在，甚至67%的小型企業(yè)都擁有移動APP。

　　問題是，許多APP只是對本來就不好的網(wǎng)站的可怕擴(kuò)展。盡管你可能會渴望直接開發(fā)自己的產(chǎn)品并將其推向市場，但這是一個(gè)巨大的錯(cuò)誤。移動APP是你網(wǎng)站的門戶。因此，嘗試在沒有進(jìn)行關(guān)鍵的網(wǎng)站優(yōu)化的情況下實(shí)施它們會直接影響創(chuàng)建應(yīng)用程序所需的時(shí)間和金錢。

　　在考慮使用移動APP之前，你需要進(jìn)行以下15個(gè)網(wǎng)站調(diào)整。

　　速度優(yōu)化

　　速度對于用戶體驗(yàn)至關(guān)重要。這意味著，如果你希望你的網(wǎng)站和移動APP提供出色的用戶體驗(yàn)，那么你要做的第一件事就是優(yōu)化網(wǎng)站速度。

　　為此，你需要進(jìn)行以下調(diào)整：

　　1.縮小

　　縮小可減少網(wǎng)站CSS，JavaScript和HTML內(nèi)容的大小。它可以通過刪除任何不必要的網(wǎng)站代碼來工作，例如：

　　JavaScript中不必要的代碼;

　　CSS中未使用的空格;

　　HTML中不必要的換行符。

　　如果你使用WordPress，則有很多可用的插件可以幫助你完成此過程，包括Fast Velocity Minify和Autoptimize。

　　2.壓縮

　　文本壓縮還可以提高速度，尤其是在博客等文本繁多的網(wǎng)站上。大多數(shù)Content Delivery Network支持發(fā)送壓縮文件，因此你可以通過諸如Gzip之類的工具設(shè)置默認(rèn)壓縮。

　　如果你沒有自己的網(wǎng)站，則可以使用Check GZIP Compression查看是否已設(shè)置壓縮。如果不是，最簡單的安裝方法是通過插件，例如W3 Total Cache，WP Super Cache或WP Rocket。

　　3.最大化緩存

　　HTTP緩存是瀏覽器存儲資源副本時(shí)可以更快地重新訪問它們的時(shí)間。使用HTTP緩存頭，可以定義響應(yīng)的時(shí)間，方式和時(shí)間。

　　你可以將服務(wù)器配置為附加HTTP Cache-Control標(biāo)頭，并對其進(jìn)行修改，使其保留數(shù)據(jù)的時(shí)間。一種方法是將標(biāo)頭直接添加到代碼中。

　　這是一個(gè)PHP標(biāo)頭的示例，其中Cache-Control設(shè)置的max-age等于84,600秒(1天)：

　　header('Cache-Control: max-age=84600')

　　通過設(shè)置最大有效期限標(biāo)頭，可以確保重復(fù)訪問者不會降低訪問他們之前下載的資源的速度。旨在盡可能安全地在盡可能長的時(shí)間內(nèi)緩存盡可能多的資源。然后提供驗(yàn)證令牌，以有效地重新驗(yàn)證已更新的資源。

　　4.減少JAVASCRIPT加載時(shí)間

　　JavaScript可能會導(dǎo)致延遲，特別是如果捆綁有大量JavaScript時(shí)。在普通手機(jī)上，處理這些捆綁包所花費(fèi)的時(shí)間可能比臺式機(jī)長5–10倍。你可以通過代碼拆分來解決此問題。

　　代碼拆分將你的JavaScript包分成幾部分，以便僅在用戶需要時(shí)才更快地交付它們?？梢允褂肦eact，Parcel和Webpack之類的工具將其應(yīng)用于路由級別或組件級別。

　　5.優(yōu)化圖像

　　視覺效果對于提高用戶參與度很重要，但是你最后想要的是讓它們減慢用戶體驗(yàn)。值得慶幸的是，市場上有很多工具可以幫助你壓縮和優(yōu)化圖像。

　　6.格式化動畫內(nèi)容

　　GIF格式在動畫中很流行，但實(shí)際上從來沒有將其用作動畫平臺。通過切換為更合適的視頻格式，你可以大大減小文件大小并加快頁面時(shí)間。

　　你可以使用FFmpeg工具將動畫GIF轉(zhuǎn)換為mp4文件。你還可以使用有效類型API工具來確定較慢的帶寬，并自動將其從提供動畫圖像轉(zhuǎn)換為更小的JPEG。盡管確實(shí)消除了一些用戶體驗(yàn)，但比站點(diǎn)無法加載或運(yùn)行緩慢不正常要好。

　　7.減少插件

　　WordPress有超過54,000個(gè)插件。盡管它是市場上最大的平臺，但即使競爭的選件，仍然可以提供成千上萬種插件。有插件幾乎任何你能想到這些天-電子商務(wù)插件，像的Bigcommerce為WordPress，郵件營銷插件，像Mailchimp和轉(zhuǎn)化率優(yōu)化插件，像OptinMonster。其中許多添加了有價(jià)值的功能。

　　問題是，太多的插件會降低你的網(wǎng)站速度。首先，請確保沒有安裝任何未使用的東西。接下來，卸載可通過其他方式與你的網(wǎng)站集成的服務(wù)的所有插件。當(dāng)你可以使用API密鑰進(jìn)行集成時(shí)，沒有理由使用插件。

　　最后，如果你仍然有很多插件，請尋找一些可以替代少數(shù)特殊產(chǎn)品的多合一解決方案。例如，當(dāng)所有三個(gè)解決方案都有一個(gè)時(shí)，請不要使用單獨(dú)的插件進(jìn)行縮小，壓縮和緩存。但是，請執(zhí)行盡職調(diào)查，因?yàn)橹T如Jetpack之類的多合一插件會使你的網(wǎng)站變慢的速度比其他任何網(wǎng)站都要慢。

　　多少個(gè)插件算太多?這是一般的經(jīng)驗(yàn)法則：

　　如果你擁有共享或預(yù)算的云托管，則不得超過五個(gè);

　　如果你使用云托管，VPS托管或?qū)Ｓ梅?wù)器，則不超過20個(gè)。

　　8.使用AMP

　　加速移動頁面(AMP)是指一種開源Web編程語言，可將靜態(tài)內(nèi)容立即傳遞到移動設(shè)備。它基本上是精簡，精簡的HTML版本，專門用于加速移動設(shè)備上的非交互式網(wǎng)頁。

　　由于它是精簡版，因此你需要權(quán)衡一些功能以實(shí)現(xiàn)這種快速的速度。有兩個(gè)潛在的缺點(diǎn)需要注意：

　　JavaScript僅限于現(xiàn)成的AMP庫;

　　啟用了延遲加載功能(向下滾動圖像時(shí)會加載圖像);

　　潛在客戶的產(chǎn)生可能會受到影響，因?yàn)锳MP經(jīng)常刪除選擇加入的表格。

　　另一方面，最大的優(yōu)勢(除了提高的速度)是搜索引擎的移動優(yōu)先索引功能可以在搜索結(jié)果中提升AMP頁面。有許多用于啟用AMP的插件可供選擇，包括AMP，用于WP的AMP –加速的移動頁面和AMP WP – WordPress的Google AMP。

　　9.地址重定向和鏈接斷開

　　重定向和斷開的鏈接可能會破壞你的用戶體驗(yàn)，并減慢你的網(wǎng)站速度。

　　重新導(dǎo)向

　　你將要盡可能減少重定向，因?yàn)樗鼈儠绊戫撁嫠俣龋踔習(xí)绊懢W(wǎng)站的整體加載時(shí)間。當(dāng)用戶使用移動設(shè)備時(shí)，延遲往往會變得更加明顯。

　　你可以使用免費(fèi)的工具來檢查你的網(wǎng)站是否有任何重定向。找到某些內(nèi)容后，請刪除所有不需要的內(nèi)容，并對需要更新的內(nèi)容進(jìn)行更改。

　　如果你有一個(gè)安全的站點(diǎn)，則還可以使用HSTS刪除SSL重定向。

　　由于重定向和斷開的鏈接會隨著時(shí)間的流逝再次出現(xiàn)，因此這兩項(xiàng)檢查都應(yīng)作為網(wǎng)站管理的常規(guī)部分。

　　10.持續(xù)測試

　　在介紹移動APP之前，我們已經(jīng)介紹了九種重要的方法來優(yōu)化你的頁面速度。盡管這可以顯著提高網(wǎng)站性能，但你仍有更多的改進(jìn)機(jī)會。

　　有數(shù)百種工具可用于測試你的網(wǎng)站頁面速度和移動準(zhǔn)備情況，但是最好的起點(diǎn)是Google的PageSpeed Insights工具。

　　它將為你提供網(wǎng)站的桌面版和移動版的當(dāng)前頁面速度得分，并就如何改進(jìn)提出具體建議。

　　下一步是使用“ 測試我的網(wǎng)站”進(jìn)一步分析移動頁面的速度和友好程度。

　　你需要做的就是輸入你的網(wǎng)站URL，它將掃描你的網(wǎng)站并進(jìn)行評估。你還可以獲得包含優(yōu)化建議的免費(fèi)報(bào)告，以換取提交你的電子郵件。

　　網(wǎng)站速度還提供了巨大的SEO收益。除了編寫高質(zhì)量的長格式內(nèi)容并獲得反向鏈接外，網(wǎng)站速度對增加網(wǎng)站流量也有重大影響。

　　在2019年初，我進(jìn)行了個(gè)人案例研究，在15天內(nèi)我寫了盡可能多的嘉賓帖子。在這段時(shí)間內(nèi)，我收到了247個(gè)反向鏈接，自然流量增加了372%。

　　但是，與網(wǎng)站速度對我的移動流量的影響相比，這顯得微不足道。根據(jù)Google Analytics(分析)數(shù)據(jù)，通過將我的移動設(shè)備速度從33提升到75+，我的移動設(shè)備排名提高了1775%。

　　UI優(yōu)化

　　速度可能是UX層次結(jié)構(gòu)中的最高級別，但這不是唯一的因素。還有其他要考慮的組件，例如：

　　找到你想要的東西很容易;

　　該網(wǎng)站適合你的移動屏幕的程度;

　　使用起來很簡單;

　　它看起來有多吸引人。

　　你可以使用以下站點(diǎn)調(diào)整來簡化和最大化用戶界面。

　　11.簡化你的網(wǎng)站結(jié)構(gòu)

　　你的網(wǎng)站必須直觀易用，以便用戶瀏覽，尤其是當(dāng)他們嘗試在移動設(shè)備的小屏幕上瀏覽時(shí)。

　　確保簡化了層次結(jié)構(gòu)，并且嵌套的內(nèi)容級別不超過一個(gè)。你理想的網(wǎng)站結(jié)構(gòu)應(yīng)如下所示：

　　主頁

　　類別(或部分)

　　子類別(僅適用于較大的網(wǎng)站)

　　個(gè)別頁面和帖子

　　關(guān)注用戶通常會尋找的內(nèi)容，并規(guī)劃出他們將采取的常見路徑。然后，你可以按層次結(jié)構(gòu)排列類別，這將對你的受眾群體最有意義。

　　你還應(yīng)該使用知識庫軟件為尋求常見問題答案的任何用戶創(chuàng)建中央資源或知識庫。

　　這是關(guān)于你可以進(jìn)行的最簡單的設(shè)計(jì)調(diào)整，它將對臺式機(jī)和移動設(shè)備的使用產(chǎn)生持久影響。

　　12.專注于內(nèi)容設(shè)計(jì)

　　圍繞移動設(shè)備設(shè)計(jì)內(nèi)容可能會有些棘手，但這對于成功的移動體驗(yàn)至關(guān)重要。一個(gè)糟糕的網(wǎng)站設(shè)計(jì)可以殺死你的應(yīng)用內(nèi)容。

　　最重要的是，你需要讓你的內(nèi)容發(fā)光，并盡可能減少干擾。為此，你可能需要?jiǎng)h除表格，圖形和其他不適用于小屏幕的笨重元素。

　　你還需要精簡頁眉，頁腳，菜單和側(cè)欄之類的功能，以便可以在較小的屏幕上隱藏或折疊它們。由于許多移動設(shè)備不具有此功能，因此請對其內(nèi)容禁用任何懸停效果。

　　你也不想使用太多文字。你可以使用語法目標(biāo)和受眾等工具來減少文本，以幫助你創(chuàng)建更簡潔的文本。甚至更好的是，集中精力用更多的視頻內(nèi)容替換文本，以最大程度地提高移動體驗(yàn)。

　　13.減少banner和滾動條

　　滾動條已經(jīng)流行了一段時(shí)間，但是人們通常會向滾動條添加5-6張高質(zhì)量的圖像，這會增加網(wǎng)站的整體加載時(shí)間。此外，研究表明，滾動條會惹惱用戶并降低可見度，尤其是在移動設(shè)備上。

　　標(biāo)語可能會導(dǎo)致類似的問題，特別是如果標(biāo)語在圖像中有任何嵌入的文本。如果當(dāng)前有帶有文字的banner，則應(yīng)使用HTML和CSS呈現(xiàn)文字，而不是將其嵌入圖像中。這將使其更靈活，更易于在較小的屏幕上查看。

　　14.優(yōu)化表格和接觸點(diǎn)

　　如果你的網(wǎng)站上有表格，請注意字段類型，長度和標(biāo)簽。在任何設(shè)備上，一切都應(yīng)該清晰可見。啟用功能，以便如果用戶點(diǎn)擊某個(gè)字段以輸入信息，則該視圖會放大到正確的位置。

　　檢查是否有需要其他鍵盤或觸摸屏的字段類型，例如郵政編碼，電話號碼或電子簽名。如果是這樣，則應(yīng)將其設(shè)置為在點(diǎn)擊時(shí)觸發(fā)正確的鍵盤，因此用戶不必手動切換。

　　確保所有觸摸點(diǎn)和按鈕都可見并且足夠大，以便可以用手指在小屏幕上輕按。標(biāo)準(zhǔn)建議是它們的大小應(yīng)約為48 x 48 dp。將文本放在按鈕內(nèi)而不是上方或下方，以便于識別。

　　15.簡化下單流程

　　如果你經(jīng)營一個(gè)電子商務(wù)網(wǎng)站，那么最后的調(diào)整建議是給你的。

　　大約一半的電子商務(wù)流量來自移動設(shè)備，但要購買更多的人，仍然可以在臺式機(jī)上進(jìn)行。這很可能是因?yàn)獒槍σ苿釉O(shè)備未正確優(yōu)化訂購，結(jié)帳和付款的整個(gè)流程。

　　要確定你的過程需要改進(jìn)的地方，請跨多個(gè)設(shè)備和屏幕尺寸完成所有步驟，并確定所有難點(diǎn)。問題可能是我們已經(jīng)解決的問題，例如表單導(dǎo)航困難或接觸點(diǎn)太小。

　　但是，即使進(jìn)行了優(yōu)化，但如果你需要大量數(shù)據(jù)，從移動設(shè)備上輸入所有數(shù)據(jù)仍然很麻煩。

　　你可以通過以下方式之一對此進(jìn)行補(bǔ)救：

　　允許用戶創(chuàng)建配置文件，該配置文件將保存并預(yù)先填充其結(jié)帳信息，包括送貨地址和信用卡號

　　與其他付款網(wǎng)關(guān)集成，后者不需要它們重新輸入信息。

　　結(jié)論

　　手機(jī)屏幕越來越大，平板電腦也越來越復(fù)雜，因此難怪更多的觀眾正在通過移動設(shè)備登錄并進(jìn)行交互。

　　移動APP可能是與用戶進(jìn)一步互動的好方法。但是，只有先優(yōu)化你的網(wǎng)站才能確保流暢的用戶體驗(yàn)。