加快圖像重網站的簡單步驟

已發表: 2019-09-20

網站所有者最終可能想要提高他的下載速度。 這增加了搜索結果的排名； 此外，網站訪問者通過更快地響應他們的行為來使用它會更愉快。

為了尋找快速直接的解決方案，網站所有者安裝了大量插件，這反過來又會消耗資源，只會減慢其工作速度。 我們對優化插件沒有任何反對意見，但需要使用它們並了解其工作原理。

此外，從未經歷過管理的站長往往對優化有誤解。 在他們的理解中，優化就是不惜一切代價加速腳本。 優化的任務是以最優的資源價格產生站點的最優速度。 因此，不可能有適用於所有站點的通用指令。

對於任何資源所有者或網站管理員來說，讓您的網站快速運行是一項緊迫的任務。 畢竟，頁面加載速度是網絡資源成功的最關鍵因素之一，還有高質量的內容和漂亮的圖形設計。

緩慢的加載有時會增加失去用戶的可能性。 尤其是當訪問者來自移動設備時。 加快網站加載速度的簡單建議，即使是沒有經驗的用戶也可以在實踐中實施，這將有助於最大限度地減少流量損失的可能性。

Speed Up Your Image Heavy Website

1. 優化 HTML-Code 和 CSS-, JS-Files

如果不關心進入網站時傳輸到用戶瀏覽器的代碼的“清潔度”，下載優化是不可能的。 源代碼中的大量字符會顯著影響加載速度，因此其簡潔性是成功的關鍵因素。

如何最小化代碼以加快網站加載速度

刪除不必要的字符、標記元素和源代碼標籤。 自動化該過程將有助於在站點的 HTML 代碼的開頭和結尾添加一個小插入。

這種緩衝 HTML 內容的方法非常有用，但它會在隨機存取存儲器上產生額外的負載。

將相同類型的 CSS 文件和 JS 文件分組。 JCH Optimize、Cloudflare 或 Minify 等免費 PHP 應用程序被複製到一個單獨的目錄並通過所有站點文件，將有助於組合這些元素。

2. 移除額外的 HTTP 請求

加載網站時，上傳頁面元素（javascript、圖像、CSS 和 Flash 文件）佔用了大部分系統資源。 對此類元素的 HTTP 請求會顯著降低站點速度。

為避免“額外”請求，您需要減少頁面組件的數量。 這將導致服務器調用按比例減少，並將加快網站的加載速度。

這可以通過多種方式完成：

  • 將多個圖像組合成一個圖形文件（CSS sprite）；
  • 在頁面樣式表中使用內嵌圖片（inline-pictures）；
  • 一頁上的多個 CSS 文件或腳本合併為一個文件；
  • 盡量減少場景和插件的數量。
3. 以正確的順序排列 JavaScript 和 CSS

建議將 CSS 文件放在頁面代碼的頂部，將 JavaScript 放在底部。 優化後，會先加載靜態內容，再加載動態圖形。

需要更多資源來下載的 Flash 元素或動畫不會從一開始就“拉出”並破壞網站的印象。 這將確保內容的順利下載並增加資源的美感。

4.減少外部腳本的數量

外部腳本是通過外部鏈接訪問的代碼（文本）。 鏈接會向許多不同的服務器創建額外的請求，這最終會減慢站點的速度。 為避免這種情況，建議主要使用嵌入在頁面源代碼結構中的本地腳本。

當然，專注於本地腳本會對網站的外觀和功能造成一定的限制。 但由此產生的下載速度優勢值得這些“犧牲”。

5.啟用刷新

此 PHP 功能允許您不必等到用戶的服務器從資源加載信息，而是將其部分輸出。 當數據傳輸到瀏覽器時，打開的窗口不會保持空白，而是會平滑地填充網站的可加載元素。 這種加速對於界面複雜、流量大的網絡資源尤為必要。

最好將flush函數放在頁面源代碼的開頭，緊跟在head之後。 從標題中，HTML 內容將更快地打開，您還可以啟用 CSS 和 JavaScript 元素的並行加載。

6.緩存頁面

緩存將站點頁面中的一些信息（flash、圖形、JavaScript 和 CSS）保存到用戶的瀏覽器。 在下一次運行時，這些文件會立即從瀏覽器中下載，從而為網站提供額外的速度。

您可以通過向 HTML 代碼添加過期標頭來啟用緩存。 通過安裝具有免費或部分免費功能的插件（例如 W3 Total Cache、Cache Enabler 或 Zen Cach），可以輕鬆緩存 WordPress 站點。

對於新站點，最好僅在完全準備好啟動後使用緩存。 如果您在開發過程中啟用該功能，進一步的更改可能無法正確顯示在站點上。

7. 使用 CDN

內容交付網絡——分散在世界各地數據中心的一系列服務器，以提高將內容傳輸給訪問者的速度。 訪問者在地理位置上離 CDN 服務器越近，來自站點的數據包傳輸速度就越快。

CDN 的使用對於內容和高負載門戶尤其重要，因為它們的主要受眾遠離物理服務器。 該服務最大限度地減少了海外網站下載的等待時間，有助於提高其在本地搜索結果中的排名。 畢竟，內容是從他所在國家/地區離用戶最近的服務器存儲下載的。

8.優化圖形和視頻

您必須選擇正確的圖形和視頻格式，因為文件格式直接影響信息呈現給訪問者的速度。

不同網頁內容的推薦格式：

  • SVG——用於矢量標誌和簡單的界面元素；
  • PNG——用於方案和非矢量標誌；
  • JPG – 用於照片和圖像；
  • MPEG4 – 用於視頻和動畫。

同樣對於視頻和動畫，可以使用相對較新的 WEBM 格式。 在大多數情況下，它提供了具有相同質量的更小的視頻尺寸。 但是，表單對瀏覽器的支持有限（例如，在 macOS/iOS Safari 瀏覽器中不支持）。 因此，建議使用 WEBM 文件作為優先視頻源並安裝 MPEG4 作為替代源。 如果共享不可接受或不方便，您也可以使用唯一的 MPEG4。

另外，我們注意到矢量格式 (SVG) 允許在不損失圖形質量的情況下進行縮放。

圖像優化階段

第 1 步 - 減小圖像的大小。

許多流行的 CMS，例如 WordPress 或 Joomla，都有內置插件來優化原始圖像。 但是這種方法會產生額外的負載，並且會減慢站點的速度。 每次頁面加載時，瀏覽器首先訪問源代碼，然後才動態調整圖像大小。

為避免加載圖像時速度下降，操作系統中內置的圖形編輯器，例如 Preview (Mac) 或 Microsoft Paint (Windows)，以及具有類似功能的在線服務將有所幫助。 與他們合作將需要最低限度的圖形處理技能。

第 2 步 – 下載前壓縮文件。

即使在優化了圖像尺寸之後，它的“權重”通常仍然遠非最優。 ImageResize 或 TinyPNG 等方便且免費的服務有助於在不損失圖像質量的情況下減小尺寸。 這裡的大多數過程都是自動化的。 用戶只需要上傳文件並下載已經壓縮到最佳圖像大小的文件。

9. 應用 Gzip 文件壓縮

Gzip 是一種壓縮站點文件的簡單方法，可以節省頻道資源並加快加載速度。 使用 Gzip，文件被壓縮成一個檔案，瀏覽器可以更快地下載，然後解壓縮並顯示內容。

啟用 Gzip 非常簡單——您只需在 .htaccess 文件中添加幾行代碼。 例如，當使用 Apache 網絡服務器時，mod_gzip 模塊可供站長使用，為了激活 Gzip，在這種情況下您需要將此類代碼添加到 .htaccess

Gzip 文件壓縮是為了減少從瀏覽器到服務器的請求數量。 可以說，這項技術將文件的初始重量減少到 70%，以加快下載速度。

嵌入 Gzip 壓縮的方法

將以下代碼片段添加到“.htaccess”Web 服務器配置文件。

在 Apache 服務器上

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

在 Nginx 服務器上

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;
10. 更改主機

加快下載速度的最基本方法是更改​​託管服務提供商。 節省資源分配通常會導致服務質量顯著下降，這會破壞所有加快站點速度的嘗試。

如果對內容、代碼和插件的操作沒有帶來結果，那麼是時候考慮為網站選擇一個更體面的“家”了。 在具有高可用性和周到技術支持的優質主機上，互聯網資源將獲得強大的動力，以提高工作速度。 這將受到感激的觀眾的讚賞。

最重要的是……

爭取訪問網站的時間不超過2-3秒。 網站打開 2 秒甚至 3 秒都沒有關係，但如果有更多，那麼這就是考慮加速網站負載的理由。

您還需要了解頁面加載速度有兩個參數。

首先是顯示內容的速度（此時頁面已經打開並顯示給用戶，而透明頁面指示器仍然顯示，直到連接所有靜態文件和異步腳本）。

此外，第二個是頁面實際形成的速度，當所有必須連接的東西都連接起來時。 您需要關注第一個參數，即在顯示站點佈局之前不得超過三秒。

結論

您不能忽略加載網站的速度這樣的數字。 是他從一開始就為遊客創造了一個舒適的環境。 用戶獲得所需內容的速度越快，形成該資源的正面形象和建立對資源的忠誠度的可能性就越高。