CSS 精靈是一個利于網站速度優化的技術，簡單來說，就是把許多小圖標合并成一個大圖，并利用 CSS 的 background-position 屬性來控制顯示哪部分圖標。使用 CSS 精靈可以減少頁面請求次數，從而提升網站性能。

下面是一個簡單的 CSS 精靈示例，通過 pre 標簽來展示 CSS 代碼：

/* 定義 CSS 精靈圖 */
.sprite {
background-image: url(icon-sprite.png);
background-repeat: no-repeat;
}
/* 定義多個圖標樣式 */
.icon-home {
width: 20px;
height: 20px;
background-position: 0 0; /* 顯示精靈圖中的第一張圖標 */
}
.icon-user {
width: 20px;
height: 20px;
background-position: -20px 0; /* 顯示精靈圖中的第二張圖標 */
}
.icon-mail {
width: 20px;
height: 20px;
background-position: -40px 0; /* 顯示精靈圖中的第三張圖標 */
}
/* 在 HTML 中使用圖標 */
<div class="sprite">
<span class="icon-home"></span>
<span class="icon-user"></span>
<span class="icon-mail"></span>
</div>

在上面的代碼中，我們定義了一個名為 sprite 的 CSS 類，將精靈圖作為背景圖片，然后定義了多個圖標樣式，通過調整 background-position 屬性來控制顯示精靈圖的哪段位置。最后，在 HTML 中使用圖標時，我們只需要添加相關的 CSS 類名即可。

總的來說，使用 CSS 精靈圖可以減少網站加載時間從而提高頁面性能。雖然制作過程需要花費一些精力，但是只要掌握了方法，就能有效提升網站的性能。