使用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來減少垃圾郵件。 了解您的評論如何處理.