使用CSS Sprite加速您的網站

Spritemaster網站

我在這個網站上寫了很多關於頁面速度的文章,它是我們對客戶網站進行分析和改進的重要部分。 除了遷移到功能強大的服務器和使用諸如 內容交付網絡,一般的Web開發人員可以使用許多其他編程技術。

原始級聯樣式表的標準已經超過15年了。 CSS是Web開發中的重要發展,因為它將內容與設計分開了。 查看此博客以及任何其他博客,大多數樣式差異都在隨附的樣式表中。 樣式表也很重要,因為它們存儲在本地瀏覽器的緩存中。 因此,隨著人們繼續訪問您的網站,他們不會每次都下載樣式表,而只是下載頁面內容。

CSS經常未被充分利用的要素之一是 CSS精靈。 當用戶訪問您的網站時,您可能不會意識到他們並不僅僅是在請求一個頁面。 他們 提出多個要求…請求頁面,任何樣式表,任何附加的JavaScript文件,然後是每個圖像。 如果您的主題包含一系列的邊框,導航欄,背景,按鈕等圖像,則瀏覽器必須一次從Web服務器中請求一個。 將其乘以成千上萬的訪問者,並且可以向​​您的服務器發出數以萬計的請求!

反過來,這會使您的網站變慢。 一種 網站運行緩慢可能會對參與度和轉化產生巨大影響 您的受眾群體所做的。 優秀的Web開發人員使用的策略是將所有圖像放入一個文件中…… 精靈。 現在,無需為每個文件圖像都發出請求,只需對單個sprite圖像發出一個請求!

你可以閱讀有關 CSS Sprites如何在CSS-Tricks上工作 or Smashing Magazine的CSS Sprite 郵政。 我的觀點不是向您展示如何使用它們,只是建議您確保您的開發團隊將它們合併到站點中。 CSS Tricks 提供的示例顯示了 10 個圖像,它們是 10 個請求,總大小為 20.5Kb。 當聚集在一個精靈中時,它是 1個請求,大小為13kb! 9 張圖像的往返請求和響應時間現在消失了,數據量減少了 30% 以上。 乘以您網站上的訪問者數量,您將真正削減一些資源!

全球導航 蘋果 導航欄就是一個很好的例子。 每個按鈕都有幾個狀態……無論您是在頁面上、離開頁面還是將鼠標懸停在按鈕上。 CSS 定義按鈕的坐標並將正確狀態的區域呈現給用戶瀏覽器。 所有這些狀態都折疊在一個圖形中 - 但按樣式表中指定的區域顯示。

如果您的開發人員喜歡工具,那麼有很多可以幫助他們的工具,包括 指南針CSS框架, 請求減少 對於ASP.NET, CSS腳本 對於露比 CSSSprite腳本 對於Photoshop, 精靈寶典, 精靈權利, 精靈牛, 零精靈, Project Fondue的CSS Sprite Generator, 精靈大師網精靈我 書籤。

屏幕截圖 精靈大師網:
Spritemaster網站

Martech Zone 不會在整個主題中使用背景圖像,因此我們此時不必部署此技術。

2 個評論

  1. 1

    等等……整個集合不是一個“圖像”(或一個“平面”),每個子圖像(或動畫或交互變化的圖像子組)是否是一個“精靈”?

    也許自從我上次處理這種事情以來,這些東西已經重命名了,但是我可以宣誓Sprite是最終顯示的元素,而不是它從中提取的大數據表。

    (“ Sprite table”……不是嗎?)

    • 2

      我們可能在談論兩件事,馬克。 使用CSS,您基本上可以指定要使用坐標顯示的圖像文件的“部分”。 這使您可以將所有圖像放入單個“ sprite”中,然後僅指向要使用CSS顯示的區域。

你覺得呢?

本網站使用Akismet來減少垃圾郵件。 了解您的評論如何處理.