Content writing and its pitfalls

世界瞬息萬變。

當新的iPhone推出時,許多人爭先成為*個看到,播放和評論它的人。

當有突發新聞時,人們被粘在電視屏幕上等待更新,而記者爭先恐后地發布。 人們在瀏覽Web時期望具有同樣的敏捷性和速度也就不足為奇了。

他們希望他們的用戶體驗不受阻礙,因此他們可以毫不費力地接收他們正在搜索的信息。

網站加載時間的重要性

如今,用戶已對加載速度較慢或性能不足的網站失去了耐心。

在Akamai進行的一項研究中,大約一半的Web用戶期望網站在2秒或更短的時間內加載完畢。如果3秒鐘之內未加載該網站,則這些用戶傾向于放棄該網站。

更為令人震驚的統計數據是,對在線商店的體驗和加載時間不滿意的購物者中有64%會將其業務轉移到其他地方。

這意味著您不僅會失去當前的訪問者并降低轉換率,而且還冒著網站失去來自那些可能將您的網站推薦給其他客戶的流量的風險。

在這*,幾秒鐘就變得與眾不同。您不再允許未優化的圖像和文件使您的網站陷入困境。您的用戶希望您的網頁能夠快速加載,如果不加載,他們將不會留下來。

考慮到這一點,讓我們看一下優化網站以獲得*性能的方法。

最小化HTTP請求

每當瀏覽器從Web服務器獲取文件,頁面或圖片時,都會對HTTP (超文本傳輸協議)請求進行計數。

根據Yahoo的說法,這些請求通常會占用網頁加載時間的80%。瀏覽器還將每個域的請求限制在4-8個同時連接之間,這意味著無法一次加載30個以上的資產。

這意味著您需要加載的HTTP請求越多,該頁面進入并檢索所有請求所花費的時間就越長,從而增加了Web頁面的加載時間。

1.如何減少HTTP請求

盡管似乎通過簡化頁面來限制頁面設計,但是您可以使用多種策略來減少HTTP請求以減輕瀏覽器的負擔。

  • 合并CSS / JS文件- 嘗試將CSS文件合并為一個更大的文件(與JS相同),而不是強制瀏覽器檢索要加載的多個CSS或Javascript文件。如果樣式表和腳本因頁面而異,這可能會帶來挑戰,但從長遠來看,設法將它們合并將最終幫助您縮短加載時間。
  • 使用查詢僅加載需要的內容- 如果發現只需要在臺式機上加載某些圖像或僅需要在移動設備上運行特定腳本,則使用條件語句加載它們可以是提高速度的好方法。這樣,您就不會強迫瀏覽器加載對某些設備或視口無用的各種腳本或圖像。
  • 減少使用的圖像數量- 如果發現某些頁面上的圖像非常繁瑣,請嘗試刪除一些頁面,尤其是當它們的文件大小很大時。這不僅可以幫助減少圖像HTTP請求,而且可以通過移除與您的書面內容不符的分散圖像來改善用戶體驗。
  • CSS Sprites- 適用時,將您在網站上經常使用的圖像組合到一個Sprite工作表中,并使用CSS background-image 和background-position 來訪問圖像可防止您的瀏覽器每次加載網站上的某些頁面時都不斷嘗試檢索多張圖像。這樣,瀏覽器僅通過將正確的圖像正確放置在頁面每個區域的視圖中,才能檢索頁面上可以多次使用的圖像。

2.利用CDN并刪除未使用的腳本/文件

您的許多用戶很可能不會非??拷腤eb服務器。

通過將內容分布在各種地理位置分散的服務器上來縮小距離并不是一個可行的選擇,并且實施起來有點太復雜了。 

這就是內容交付網絡(CDN)進入的地方。CDN 是分布在多個位置的Web服務器的集合,因此可以將內容更有效地交付給用戶。CDN通常用于靜態內容或上傳后確實需要觸摸的文件。

服務器是根據用戶對網絡鄰近程度的度量來選擇的。例如,選擇響應時間最快和/或網絡跳數最少的服務器。

較大的公司傾向于擁有自己的CDN,而中型企業將使用EdgeCast等CDN提供商。

較小的公司可能會發現CDN不必要或超出其預算,因此使用CNDjs之類的網站,該網站具有JS和CSS文件庫以及框架,可以幫助您防止在自己的服務器上托管某些文件,同時增加了加載時間。  

如果您發現公司的網站可以從使用CDN中受益,請花時間評估您的網站,以識別整個網站上是否有未使用的腳本或CSS文件。
雖然最簡單(但最耗時)的事情是讓開發人員瀏覽您的網站并檢查每個頁面,但還有一些工具(例如UnCSS)可以從您的網站中刪除未使用的樣式并減小CSS文件的大小。

3.瀏覽器緩存

瀏覽器緩存允許將網站上的資產一次下載到硬盤驅動器或臨時存儲空間中,然后再下載到硬盤驅動器中。這些文件現在存儲在您的系統本地上,這可以提高后續頁面加載的速度。

前Yahoo!的Tenni Theurer解釋說,您網站的每日訪問者中有40-60%的人擁有空的緩存。因此,當用戶訪問網站時,您需要進行設置,以使他們看到的*頁加載速度足夠快,以便他們不可避免地繼續瀏覽網站的其余部分(加載時間更快)。 

靜態資產的緩存生命周期至少為一周,而第三方項目(例如小部件或廣告)僅持續*。

CSS,JS和圖像以及媒體文件的有效期應為一周,但理想情況下為一年,因為紫色RFC準則不再適用。

您可以在此處了解有關啟用緩存的更多信息。

4.壓縮圖像并優化文件

當前,圖像占用每頁加載的平均字節的60%,大約1504KB。與腳本(399KB),CSS(45KB)和視頻(294KB)等其他頁面資產相比,圖像占用了大量發送的HTTP請求。

如前所述,請刪除您認為不需要的任何資產圖像。這包括僅使用其中兩種圖標的圖標庫,您認為可能會使用但未使用的那三種額外字體,以及可以用CSS復制的圖像(例如彩色背景或漸變)。

清除這些資產后,請查看整個站點中的圖像并查看其大小。通常,許多人傾向于從庫存圖片站點下載圖像并將其上傳到他們的服務器上并使用它們,而無需費心為網絡進行優化。  

如果您發現使用大圖像,尤其是英雄圖像,請通過Compressor.io或Image Optimizer之類的優化軟件運行它們。將所有圖像的平均質量/中/ 72dpi的水平保持在150KB以下,寬度不超過1920px。如果更大,您會注意到頁面渲染后很晚才加載圖像,以及對用戶行為的響應時間很慢。  

當涉及到什么文件擴展名時,可以將其用作基本公式:

  • SVG適用于要接收大量細節的矢量圖像。
  • 某些圖標可以利用諸如FontAwesome之類的字體庫來呈現某些圖形,而不是保存單個圖像。
  • 對于需要透明背景的圖像,請使用PNG,例如人的圓形圖像或Facebook的“ F”徽標。
  • JPG最適合照片或其他細節不重要的應用。

盡管圖像仍將占據您的HTTP請求的大部分,但優化它們和其他資產最終將使它們的大小減小并提高網站的整體性能。