Sử dụng CSS background thay thế cho liên kết SVG trực tiếp để giảm kích thước DOM

Mã hóa URL của biểu tượng SVG sang định dạng ảnh sau đó sử dụng CSS background thay thế để tránh làm tăng kích thước DOM

Các trang web hiện nay đa số đều sử dụng biểu tượng bằng SVG vì nó hiển thị tốt với HTML5 lại không cần sử dụng đến webfont icon. Tuy nhiên nếu bạn đang lạm dụng bằng cách chèn liên kết SVG trực tiếp quá nhiều dẫn đến kích thước DOM của trang tăng lên làm cho trang tải chậm hơn, hiệu suất giảm đi.

Avoid an excessive DOM size

Khi nào nên sử dụng CSS background thay thế cho liên kết SVG trực tiếp?

Khi liên kết SVG được đặt trong vòng lặp b:loop của bài đăng tại các trang chỉ mục. Hãy thử hình dung trang chủ blog hiển thị 10 bài đăng mới nhất => có 10 liên kết SVG vì mỗi bài đăng có 1 liên kết => kích thước trang tăng lên => trang tải chậm hơn

Nhược điểm khi sử dụngCSS background

Tăng số request vì đã chuyển liên kết SVG sang định dạng ảnh thay thế, tuy nhiên so với mức tăng 1 request mà giảm tải được kích thước DOM vẫn có tác dụng hơn rất nhiều so với chèn SVG trực tiếp

Cách chuyển đổi liên kết SVG sang ảnh

Các bạn có thể tìm kiếm chọn các biểu tượng SVG tại một số trang như https://materialdesignicons.com hoặc https://www.materialpalette.com/icons

Khi có biểu tượng SVG, các bạn truy cập trang chuyển đổi SVG của trang mình để mã hóa URL

URL-encoder for SVG

Cách tạo CSS cho biểu tượng

Giả sử trang có một biểu tượng twitter khi chèn trực tiếp có dạng

<a class="tw" href="https://twitter.com/vietblogdao/" rel="noopener nofollow" target="_blank" title="Follow us on Twitter">
  <svg height="36px" viewBox="0 0 24 24" width="36px"><path fill="fill:#1da1f2" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z"></path></svg>
</a>

Khi bạn mã hóa URL của SVG sẽ có dạng


background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='36px' viewBox='0 0 24 24' width='36px'%3E%3Cpath fill='fill:%231da1f2' d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z'%3E%3C/path%3E%3C/svg%3E");

Lúc đó html của biểu tượng bạn chèn lại thành

<a class="tw" href="https://twitter.com/vietblogdao/" rel="noopener nofollow" target="_blank" title="Follow us on Twitter">
  <span class="hide-screen">Follow us on Twitter</span>
</a>

Sau đó thiết kế CSS cho biểu tượng


a.tw {
    display: inline-block;
}
a.tw:after {
    background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath fill='%231da1f2' d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z'%3E%3C/path%3E%3C/svg%3E);
    background-color: #fff;
    background-size: 100%;
    content: "";
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 3px;
}
.hide-screen {
    border: 0!important;
    clip: rect(0 0 0 0)!important;
    height: 1px!important;
    margin: -1px!important;
    overflow: hidden!important;
    padding: 0!important;
    position: absolute!important;
    width: 1px!important;
    white-space: nowrap!important;
}

Lưu ý bạn có thể tạo background trực tiếp thay vì sử dụng CSS content before, after nhưng nếu sử dụng phải có thuộc tính content:"";

Ngoài ra bạn có thể tải biểu tượng SVG về máy sau đó up lên host lưu trữ nếu không có host có thể sử dụng Github lưu trữ, ví dụ sau khi up lên host mình sẽ có link ảnh dạng sau

https://cdn.jsdelivr.net/gh/thietkeblogspot/images/twitter_icon.svg

Lúc đó mình có thể tạo css background hoặc chèn link ảnh vào thẻ img

<a class="tw" href="https://twitter.com/vietblogdao/" rel="noopener nofollow" target="_blank" title="Follow us on Twitter">
  <img alt="Follow us on Twitter" height="36px" src="https://cdn.jsdelivr.net/gh/thietkeblogspot/images/twitter_icon.svg" width="36px" />
</a>
Thêm đánh giá

Trở thành người đầu tiên bình luận cho bài viết này!