為移動(dòng)速度設(shè)計(jì)網(wǎng)站的10 種方法
你最近做過移動(dòng)速度測(cè)試嗎?您的網(wǎng)站排名如何?一個(gè)緩慢的網(wǎng)站可以關(guān)閉移動(dòng)用戶。理想情況下,您希望您的設(shè)計(jì)在移動(dòng)設(shè)備上為4G 用戶加載的速度與為桌面用戶在Wi-Fi 上加載的速度一樣快。 (這是一個(gè)很大的要求,但有些事情你可以做。)
首先,測(cè)試你的移動(dòng)速度。然后使用這些技巧來提高您的性能并讓更多用戶在您的網(wǎng)站上停留更長(zhǎng)時(shí)間。
1.優(yōu)化圖片
網(wǎng)站速度的最大問題之一是圖像大小。圖片實(shí)際上可以構(gòu)成頁(yè)面上下載數(shù)據(jù)的大部分,通過正確格式化和保存圖片,您可以大大減少提供此信息所需的字節(jié)數(shù)。
優(yōu)化圖像的最簡(jiǎn)單方法是在上傳之前使用它們。在將圖像添加到您的內(nèi)容管理系統(tǒng)之前,將圖像裁剪成所需的大小并保存到網(wǎng)絡(luò)上。然后壓縮圖像以保持文件大小盡可能小。
我們?cè)谶@里匯總了最好的圖像壓縮工具。他們可以幫助您在上傳圖片之前優(yōu)化圖片。
海淀網(wǎng)站建設(shè)
二、托管事項(xiàng)
最便宜的托管計(jì)劃并不適合每個(gè)網(wǎng)站。緩慢的托管是一個(gè)經(jīng)常隱藏的問題,并且對(duì)于隨著時(shí)間的推移穩(wěn)步增長(zhǎng)但尚未增加托管計(jì)劃的網(wǎng)站來說很常見。
為確保您的托管計(jì)劃專為提高速度而構(gòu)建,請(qǐng)選擇專用服務(wù)器選項(xiàng)。如果您需要更實(shí)惠的東西,下一個(gè)最佳選擇是VPS 托管,您可以在其中與專用服務(wù)器資源共享托管。
然后,考慮像視頻內(nèi)容這樣的負(fù)載殺手。如果可能,請(qǐng)使用外部工具來托管這些文件。像YouTube 這樣的服務(wù)是完美的。 (這可能是您已經(jīng)在做的事情。)本質(zhì)上,您在本地位置鏈接到這些文件,而不是將它們添加到您的站點(diǎn)文件中。
3.注意JS
JavaScript 提供了很多很酷的效果和網(wǎng)站上發(fā)生的事情。沒有其他辦法了。
注意您使用JavaScript 的方式,它不會(huì)降低移動(dòng)用戶的網(wǎng)站速度。
將JavaScript 放在文件底部: 當(dāng)加載JavaScript 時(shí),瀏覽器將不會(huì)加載其他元素。如果可以,請(qǐng)將JS 腳本移至頁(yè)面底部以解決此問題。這樣,首先呈現(xiàn)HTML 內(nèi)容,如果需要,您可以使用視覺提示讓用戶知道更多數(shù)據(jù)即將到來。
優(yōu)化和縮?。?較小的文件加載速度更快。不要忘記這也適用于代碼。
使用異步JavaScript : 選擇異步JS 加載,直到第一次呈現(xiàn)所有非關(guān)鍵元素。這允許同時(shí)加載腳本,而不是一個(gè)接一個(gè)地加載
加載。4、使用延遲加載
延遲加載允許先加載屏幕上的內(nèi)容,然后再加載其他內(nèi)容。(在速度和搜索引擎優(yōu)化方面,谷歌喜歡這個(gè)選項(xiàng)。)
有很多WordPress插件可以幫助你做到這一點(diǎn),它們非常簡(jiǎn)單,而且非常輕量級(jí)。嘗試一些像慢負(fù)載或WP火箭。
5、利用緩存
啟用緩存是提高頁(yè)面速度最推薦的選項(xiàng)之一。用戶會(huì)感謝你的。
6、減少重定向
速度最快的是301重定向,它將用戶從一個(gè)過時(shí)的頁(yè)面轉(zhuǎn)移到一個(gè)新版本。想想你的內(nèi)容,如果這個(gè)動(dòng)作仍然是必要的。可能需要進(jìn)行重定向?qū)徲?jì)。
Varvy的重定向映射器可以幫助你確定從哪里開始。
7、嘗試加速移動(dòng)頁(yè)面
創(chuàng)建AMP版本的著陸頁(yè),以充分利用該技術(shù)。這些頁(yè)面使用AMP HTML格式和AMP JavaScript,對(duì)于做大量在線廣告或?qū)⒂脩舭l(fā)送到特定位置的網(wǎng)站來說,這是一個(gè)理想的解決方案。
最大的好處是AMP頁(yè)面幾乎可以立即加載。缺點(diǎn)是后端需要做更多的工作。
有很多關(guān)于AMP項(xiàng)目的信息。
8、刪除抽頭延遲
你有沒有注意到,當(dāng)你點(diǎn)擊某樣?xùn)|西時(shí)和移動(dòng)設(shè)備上的動(dòng)作發(fā)生之間會(huì)有一點(diǎn)延遲?這種延遲最初是為了讓設(shè)備更容易識(shí)別雙擊。(這個(gè)功能已經(jīng)過時(shí)了)
這是修復(fù),把它放在頁(yè)眉。
谷歌的杰克·阿奇博爾德談到了這個(gè)簡(jiǎn)單的變化:“性能差異非常大!擁有一個(gè)即時(shí)響應(yīng)的UI意味著用戶可以自信地快速按下每個(gè)按鈕,而不是停下來等待響應(yīng)。
9、考慮先進(jìn)的Web應(yīng)用程序
PWAs是像應(yīng)用程序一樣工作的網(wǎng)站(但沒有下載)。
PWAs的優(yōu)點(diǎn)是它們可以像網(wǎng)站一樣搜索,不需要安裝或更新。它們也傾向于離線工作,允許推送通知,而且由于使用了緩存方法,它們的速度非???。
棘手的部分是,這是一個(gè)只有開發(fā)人員的選擇,而不是一個(gè)開始網(wǎng)站建設(shè)者。但是,如果你的網(wǎng)站需要的內(nèi)容總是在變化,而且不像它應(yīng)該的那樣快,那絕對(duì)值得一看。
不相信嗎?玩一些有趣的漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序。
10、刪除這些插件
這就增加了設(shè)計(jì)的權(quán)重和代碼。這是用戶在看到設(shè)計(jì)之前必須下載的東西。它會(huì)讓你的網(wǎng)站慢下來。
當(dāng)涉及到插件時(shí),只保留你需要的和實(shí)際使用的。關(guān)閉和刪除所有其他內(nèi)容。然后確保你正在更新插件。過時(shí)、不支持或配置錯(cuò)誤的插件是速度殺手。
考慮一下做同樣事情的插件——閱讀帶有更新的描述和文檔——在這里去掉冗余。
最后,去掉可以手動(dòng)完成的插件(字體安裝、頭標(biāo)簽插入、分析等等)。
本文章來自于:海淀網(wǎng)站建設(shè)
我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn),每一個(gè)項(xiàng)目承諾做到滿意為止,多一次對(duì)比,一定讓您多一份收獲!