Tối ưu số lần HTTP requests
Giảm thiểu số lần truy vấn HTTP vào các file tài nguyên là cách giảm thời gian load trang đáng kể.
Gộp files:
Bằng cách gộp các file thành một file là một cách giảm số lần yêu cầu HTTP. Chúng ta có thể thực hiện:
-
Gộp tất cả file scripts thành một file .js
-
Gộp các files css thành một file .css
-
-
Tối ưu, rút gọn file CSS và JS
Ở bài học trước chúng ta đã biết cách tối ưu CSS,JS với plugin W3 Total Cache. Plugin sẽ giúp bạn gộp và tối ưu files.
CSS Sprites:
Giảm số lần tải ảnh bằng cách gộp các file tạo hình nền background thành một file ảnh và sử dụng thuộc tính background-image và background-position để hiển thị từng phân đoạn trong một ảnh chung. Khái niệm này gọi là CSS Sprites.
Trang web sử dụng một vài ảnh nhỏ trong quá trinh thiết kế như: Background images, corner images, icons, menu items.
Ví dụ: tôi có 2 icons và kết hợp thành một.
Sau đó xác định vị trí từng ảnh trên trang.
|
/*first image*/
.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}
/*second image*/
.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}
|
HTML:
|
<div class="megaphone"></div>
<div class="smile"></div>
|
Cách làm: đó là nguyên lý bạn có thể làm thủ công sử dụng phần mềm sử lý ảnh như photoshop tiến hành gộp ảnh, công việc này đòi hỏi tỉ mỷ nhưng bạn cũng đừng lo lắng nếu có quá nhiều ảnh vậy phải bố trí làm sao cho hợp lý ? có một công cụ sẽ giúp bạn gộp ảnh một cách nhanh chóng và chính xác.
Bạn chỉ cần upload tất cả các ảnh bạn muốn gộp, thiết lập options và tải ảnh sau khi đã gộp.
Inline Image:
Mã hóa ảnh thành chuỗi, ảnh lưu trực tiếp vào file css. Ví dụ:
|
<style type="text/css">
div.image {
width: 100px;
height: 100px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA.....')
}
</style>
<img src="data:image/png;base64,iVBORw0K.........."/>
|
Có khá nhiều trang web bạn có thể sử dụng để mã hóa ảnh, vd: http://www.base64-image.de/
Files CSS:
- Di chuyển các files .css vào trong thẻ head để giúp trang load nhanh hơn.
- Tránh biểu thức CSS: nếu bạn sử dụng biểu thức trong CSS, nhớ rằng nó cần phải có thời gian sử lý và sẽ ảnh hưởng tới tốc độ thực thi của trang. Ví dụ sau chúng ta nên tránh.
|
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
|
Files Javascript:
Đặt các file scripts ở phía cuối trang, và thêm thuộc tính defer cho thẻ script. Bởi do nếu một script có khai báo defer nghĩa là nó có thể được di chuyển tới phần cuối nội dung trang.
|
<script src="demo_defer.js" defer></script>
|
