Tôi đã từng có một bài viết trả lời câu hỏi: tại sao website của tôi lại chạy chậm. Trong bài đó cũng đã giải quyết được một vài vấn đề, nhưng chưa thể đi chuyên sâu được. Nay tôi viết bài này nhắc lại cho bạn cách tối ưu website một cách toàn diện nhất để có thể chạy mượt mà nhất.
Về phía nội dung website thì cần chú ý những điểm sau:
- * Giảm số request HTTP
- * Giảm DNS Lookups
- * Tránh sử dụng Redirects 301 hay 302
- * Tạo Cache cho Ajax
- * Post-load Components
- * Preload Components
- * Hạn chế sử dụng các phần tử DOM
- * Hạn chế sử dụng Iframe
Về server cần chú ý:
- * Sử dụng cơ sở dữ liệu phân tán, để phân tán nội dung phù hợp với vị trí địa lý
- * Thêm Expires hoặc Cache-Control Header
- * Thực hiện nén Gzip các thành phần lại
- * Cấu hình ETags
- * Flush the Buffer Early
- * Sử dụng phương thức GET cho các request từ AJAX
Khi thiết kế web, đặc biệt là viết CSS cho website thì cần chú ý những điều sau.
- * Đặt các thẻ stylesheet trong thẻ head
- * Tránh các biểu thức trong CSS
- * Hãy sử dụng @import
- * Tránh sử dụng các bộ lọc
Javascript sẽ làm cho trang thêm đẹp hơn, nhưng nó cũng sẽ gây ra cho trang thêm nặng nề hơn, chú ý sử dụng nó đúng cách
- * Đặt các đoạn script ở dưới cùng của trang
- * Sử dụng CSS và Javascript ở dạng external, nghĩa là nhúng file từ ngoài vào
- * Giảm bớt các CSS và Javascript không cần thiết
- * Tránh trùng lặp các đoạn Javascript
- * Giảm tối đa truy cập vào các phần tử DOM
- * Xây dựng bộ xử lý sự kiện thông minh
Các website có sử dụng cookie sẽ load dữ liệu nhanh hơn và cần chú ý:
- * Giảm kích thước của Cookies
- * Sử dụng tên miền cookie free cho các component
Việc dùng hình ảnh cũng làm cho trang thêm đẹp, nhưng nếu không biết dùng thì nó sẽ là 1 nguyên nhân hàng đầu khiên site của bạn load chậm
- * Tối ưu hóa hình ảnh
- * Sử dụng CSS Sprite
- * Không định dạng kích thước cho hình ảnh, ví dụ 1 hình có kích thước 500×500 nhưng chúng ta sử dụng width và height quy định nó về 100×100 là không nên, nên sử dụng những hình có kích thước 100×100 ngay từ đầu.
- * Tạo favicon.ico thật nhỏ và lưu vào cache
Nhiều website có hỗ trợ phiên bản Mobile, vậy thì cũng cần chú ý như sau:
- * Giữ các thành phần có dung lượng dưới 25k
- * Đóng gói các thành phần vào một tài liệu Multipart
Trên đây chỉ là nói sơ qua về các vấn đề cần lưu ý. Chi tiết về các vấn đề này xin vui lòng đọc tại đây
