八招讓網站具有跨瀏覽器與設備的卓越性能
譯文【51CTO.com快譯】生活在快節奏的世界上,我們一直秉持著“時間就是金錢”的理念,希望自己所接觸到的事物能夠快速地運轉,以節省我們寶貴的時間。因此,一個打開緩慢的網站,不但會給訪客帶來極差的體驗,甚至還會拒用戶于千里之外,這對企業來說無疑是一劑毒藥。
根據unbounce(請參見https://unbounce.com/landing-pages/7-page-speed-stats-for-marketers/)的一項研究,79%的人如果碰到網站加載超時的問題,會直接放棄瀏覽的打算,而直接選擇離開。可見,優化網站的加載性能不僅是必要的,甚至對于企業來說應當是強制性的。
與此同時,隨著各種手機和移動設備的普遍使用,超過50%的網站流量來自于移動端。有調查顯示:有近73%的移動用戶碰到過網站加載時間過長,甚至是延遲長達100毫秒的情況。這些直接導致了網站轉化率下降高達9%。可見,除了頁面加載的時間,網站頁面是否能在各種移動瀏覽器上給用戶帶來無縫且***的訪問體驗,同樣顯得至關重要。下面我們一起來看看如何優化網站,以提高在跨瀏覽器與設備上的加載性能。
1.選擇可靠的Web主機
當您決定要將自己的業務轉移到網上時,首要問題是選擇可靠的網站托管平臺。在此,您需要考慮的指標包括:網站的加載速度、用戶的體驗、在Google/百度搜索中的排名、以及網站可能應對的總體流量。因此,在選擇合適的Web主機時,您應當注意如下事項:
網站空間的要求
您要建立一個什么樣的網站?是大而全的電子商務網站、還是一個簡單的博客?您能夠計算出自己的網站將需要多少磁盤空間嗎?您是否需要一個緩存盤來存儲那些媒體文件、代碼庫、以及數據庫?可見,您需要花一些時間來對內存及存儲空間的需求進行全面的分析,并據此來選擇相配套的Web主機。
總的流量負載
一般而言,網站的性能與訪問的流量有著直接的關系。任何用戶對于網站上任何文件的訪問,都會對可訪問的帶寬造成影響。而由于網站托管運營商一般不會主動對給定帶寬做出任何限制,因此您可以直接通過用戶的數量來估算需要的帶寬。
服務器可靠性/正常運行時間評分
Web服務主機本身的可靠性也是我們在做選擇時需要考慮的一個主要因素。要想實現24x7的服務質量,其Web主機的正常運行時間起碼要達到或超過99.5%的評分。
首付和續訂時的價格
通常情況下,那些網站托管服務公司,特別是共享托管類型的公司,會在您***使用時給出非常便宜的價格,但是在您續訂其服務的時候,則會抬高各種費用。因此,在選擇托管服務商時,您***將眼光放得長遠一點,并注意他們的定價體系。
技術支持
不同于以往的本地部署方式,如果您采用的是在線托管方式的話,就需要依賴托管服務商的技術支持團隊,來響應和解決托管服務的各種故障。因此,您需要通過全面檢查備選公司的技術文檔、管理流程、以及在互聯網上查詢現有客戶對其技術支持力度與效果的評論。
作為參考,我們在此給您羅列了一些全球***托管公司的名錄。例如:GoDaddy(https://godaddy.com/)、HostGator(https://www.hostgator.com/)、BlueHost(https://www.bluehost.com/)、Amazon Web Services (AWS)、以及Google Cloud Platform。
2.測試網站是否存在跨瀏覽器和設備的兼容性問題
正如前文所述,如今世界各地的人們都無時不刻地使用著各種類型的瀏覽器、操作系統、以及三千多種支持Web訪問功能的設備,瀏覽著全球不同類型的網站。因此,面對激烈的“日活、月活、拉新”等方面的競爭,我們需要在網站上線之前和之后,持續做好跨瀏覽器與設備的兼容性測試,以保證網站的頁面能夠在各種設備上具有一致性的顯示效果,并給用戶帶來流暢的訪問體驗。
3.遵循移動優先的法則
“移動優先法則(mobile-first approach)”已是整個網站服務領域的整體趨勢。您的網站必須能夠***地支持各種移動與平板設備的不同顯示接口和分辨率。在進行任何改版或升級之前,請充分驗證網站頁面對于移動系統的“友好性”,以及在不同運算能力與硬件配置設備上的響應速度。您可以通過使用Google的 Mobile-Friendly 工具(https://search.google.com/test/mobile-friendly),來測試自己的網站,并找出任何值得改進的地方。
如果您的網站屬于博客或輕量級類型,您還可以使用WordPress的Responsive themes(https://wordpress.org/themes/)來實現用戶的無縫體驗。
4.改進網站的加載時間
網站的加載速度,對于訪客的***印象是至關重要的。有研究表明,用戶普遍希望自己能夠在兩秒鐘內訪問到目標的網頁,而如果網頁的加載時間達到3秒及以上,則會有42%的用戶離開該網站,并轉向他處。
另外,人們常會有這樣一種思維慣式:由于移動設備比傳統電腦更小巧、更靈活,他們自然而然地認為:目標網站在移動瀏覽器上的加載速度,理應比桌面瀏覽器更快。下面,我給大家羅列了各種有助于提高網站加載速度的參考方法:
- 開啟并實施瀏覽器緩存
- 最小化各種HTTP請求
- 壓縮與合并各種文件
- 對CSS和JavaScript文件使用異步加載的方式
- 優化服務器響應時間
- 優化CSS的傳輸
- 減少重定向的數量
5.啟用移動頁面加速(AMP)
如果貴網站的移動用戶訪問量具有一定的規模,那么您應該考慮實施Google推出的AMP,以保證能夠提供更為流暢的移動訪問體驗。AMP能夠通過對內容進行壓縮、以及刪除掉不必要的文件和圖形,從而讓您的網站更具移動友好性,能夠在移動瀏覽器上更快地加載網頁。同樣,如果您的網站屬于博客或輕量級類型,那么您可以使用 WordPress插件,來制作自己的各種AMP頁面。
6.重新設計彈出窗口
一般而言,在網站上放置彈出窗口是增加用戶轉化率、并向用戶分享更新信息的一種***方法。不過,我們需要根據用戶的體驗感受,來恰當地放置彈窗。您可以通過制定一些策略,將彈窗的內容與圖像放置在頁面上的合適位置,從而既能吸引用戶的注意力,又不至于讓他們感到惹惱。
不過,由于移動及平板設備的屏幕較小,而彈出的窗口會占據較大的屏幕空間,進而會嚴重影響到用戶的體驗,因此在某種程度上說,彈窗并不適合于移動優先的法則。最近,Google甚至提出了針對彈窗的懲罰(請參見https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html),其中就包含在為移動用戶設置彈窗時,所需要遵循的各種規則和說明。
7.使用CDN獲取網站資源
無論是出現有大的流量請求涌向Web主機,還是在地理上遠離網站服務器的所在地,用戶都可能會碰到網站出現延遲響應、文件加載緩慢、以及整體性能下降的狀況。
為了避免此類狀況的發生,您可以使用內容傳遞網絡(Content Delivery Network,CDN),來予以消除。通過CDN,您可以通過拷貝文件的形式,將自己的網站緩存到服務器的全局網絡之中。當有用戶通過瀏覽器請求訪問貴網站上的某個文件時,該請求將會被路由到最近的服務器上進行索取。例如:如果您的Web服務器架設在德國,而有來自加州的用戶想訪問貴網站時,那么他的瀏覽器就會直接在就近的服務器查找并獲取所有必要的文件。
因此,為了提高網站的加載速度,并優化用戶在全球各處的訪問體驗,您可以試用MaxCDN(https://www.maxcdn.com/)和Cloudflare(https://www.cloudflare.com/)之類的典型CDN。
8.圖像優化
有時,您的網站可能會有一些非常大的圖像文件,它們占據了網頁加載的大部分時間。那么,您完全可以使用Compressor(https://compressor.io/)之類的工具來壓縮這些圖像,以提高加載的速度。另外,由于不同類型的文件格式也會對圖像的加載時間產生影響,因此請通過必要的轉換,為網站提供適當的圖像文件類型。
結論
綜上所述,在用戶使用各種移動類瀏覽器和設備來訪問您的網站時,加載速度與顯示效果會對用戶的瀏覽體驗產生直接的影響。希望上述所列的八項建議能夠通過各種優化方式,來提升貴網站的整體性能。
原文標題:Tips for Optimizing Your Site for Multiple Browsers and Devices,作者:Saif Sadiq
【51CTO譯稿,合作站點轉載請注明原文譯者和出處為51CTO.com】