Nhóm chat Zalo
Điều gì ảnh hưởng tới trải nghiệm tốc độ của người dùng?
- Chờ đợi cái nhìn đầu tiên khi truy cập
- Chờ tải các nội dung phụ kèm theo HTML (script, css, image)
- Chờ đợi sự phản hồi của những thao tác
Cải thiện cái nhìn đầu tiên như thế nào?
Để trả lời được câu hỏi này bạn cần làm rõ một hiểu biết về trình duyệt. Đó là thứ tự trình duyệt sẽ xử lý các thành phần khi nhận được response đầu tiên từ server.
- Render HTML thành giao diện từ trên xuống, trong quá trình đó, sẽ …
- Tải các tài nguyên JS và CSS tìm thấy trong quá trình render.
- Tải tài nguyên Javascript sẽ làm tạm ngưng render giao diện cho tới khi tải xong và thực hiện xong các lệnh.
- Tải tài nguyên CSS xong mới thực hiện các hiệu ứng định dạng lên các HTML đã render trước đó.
- Tải các tài nguyên hình ảnh
- Kích hoạt sự kiện onload của body sau khi tất cả resource đã tải xong.
Như vậy, để tạo cảm giác tốc độ tải nội dung đầu tiên nhanh hơn thì phải loại bỏ hoặc hạn chế tối đa việc TẠM NGƯNG trong quá trình render giao diện. Lúc đó trình duyệt sẽ tạo cái nhìn đầu tiên sẽ nhanh hơn. Việc cần làm là:
- Giao diện đầu tiên phải được thiết kế trọn vẹn đủ để nhìn mà không cần sự can thiệp của script. Hình ảnh sử dụng chỉ vừa đủ cho cái nhìn đầu tiên.
- CSS phải được đảm bảo đặt lên hàng đầu (thẻ <head>) để các định dạng không bị vở trong quá trình chờ css được tải xong mới định dạng lại.
- Tránh để Javascript làm tạm ngưng render bằng cách sử dụng cơ chế tải javascript bất đồng bộ.
Hiểu đúng về nguyên lý hoạt động của tải javascript bất đồng bộ :
<script type="text/javascript" src="main.js" async></script>
Với phương pháp cũ, khi nội dung javascript đang được tải về thì quá trình render sẽ phải đứng lại và chờ. Sau khi script tải và chạy xong thì render mới chạy tiếp.
Phương pháp bất đồng bộ sẽ giúp quá trình render vẫn tiếp tục trong lúc script đang được tải. Và script chỉ bắt đầu được chạy sau khi toàn bộ quá trình render html đã hoàn thành.
Tận dụng tối đa một lần truyền nhận dữ liệu qua mạngTận dụng tối đa một lần truyền nhận dữ liệu qua mạng
Sau đây là sai lầm mà bạn thường gặp :
- Trong quá trình thiết kế web, chúng ta chèn rất nhiều file JS và CSS khác nhau. Khi thực thi, mỗi lệnh chèn file sẽ chiếm một truy vấn lên server. Độ trễ của mạng và quá trình tạo truy vấn để nhận kết quả sẽ làm kéo dài quá trình chờ tải.
- Do đó, khi xuất bản sản phẩm, cần đảm bảo tạo càng ít lệnh chèn file càng tốt. Tốt nhất là tất cả JS vào 1 file, tất cả CSS vào 1 file. Như vậy là chỉ cần 2 truy vấn cho toàn bộ CSS và JS trong trang.
Tối ưu dung lượng các file hình ảnh, JS và CSS để tránh gây chậm do mạng!Tối ưu dung lượng các file hình ảnh, JS và CSS để tránh gây chậm do mạng :
- Tốc độ mạng là thứ khó kiểm soát nhất. Do đó, phải đảm bảo mọi thứ truyền qua mạng phải thật tối ưu, thật nhỏ nhất có thể.
- Hình ảnh phải được nén ở mức thấp nhất có thể mà không làm ảnh hưởng nhiều đến cái nhìn của nó. Nếu dùng Photoshop, hãy dùng “Save for web” ở mức 40%-60% và các hình ảnh phải có độ phân giải vừa đúng nhu cầu.
- Loại bỏ tất cả comment, tab và enter trong nội dung các file JS và CSS để giảm dung lượng tới mức tối đa cho các file này khi truyền qua mạng. Vì bản thân trình duyệt không cần những nội dung thân thiện với việc đọc hiểu đó của con người.
Tận dụng khả năng lưu cache của trình duyệt
1. Người dùng đã chờ để tải các nội dung nào rồi thì đừng để họ chờ thêm lần nữa cho cùng một nội dung như họ đã chờ trước đó.
-
Những tài nguyên như JS, CSS, Image thường là tĩnh và rất ít hoặc gần như không thay đổi gì trong suốt thời gian dài. Nhưng mỗi lần truy cập thì trình duyệt luôn tải lại những nội dung này.
-
Nếu ghi nhớ lại nội dung này ở trình duyệt vậy thì gần như loại bỏ hoàn toàn quá trình tải và mọi thứ sẽ diễn ra cực nhanh.
2. Làm sao kiểm tra xem trình duyệt có được bật cache các nội dung tĩnh chưa?
- Nếu trong Response Header chứa thông tin cache-control=public thì có nghĩa là cho phép trình duyệt lưu lại các nội dung tĩnh này để dùng lại mà không cần phải tải từ server. Thời gian lưu trữ những nội dung này dưới máy người dùng được qui định bởi thông tin max-age (giây) đi kèm với thông tin cache-control.
3. Ít thay đổi không có nghĩa là KHÔNG THAY ĐỔI. Vậy chúng ta kiểm soát những nội dung cache khi cần thay đổi như thế nào nếu chưa tới lúc hết hạn của cache?
- Trình duyệt nhận dạng một tài nguyên thông qua URL tới tài nguyên đó. Do đó, URL khác nghĩa là nội dung khác (dù thực tế nội dung có khác hay không thì trình duyệt không quan tâm).
- Chúng ta chỉ cần đổi URL của tài nguyên, thì nó sẽ được tải lại (vì đối với trình duyệt, tài nguyên này đã là mới). Để làm việc này, chúng ta chỉ cần thêm phần mở rộng phía sau URL như kiểu: http://thuvienlaptrinh.edu.vn/my_script.js?rad=1234
- Nội dung sau dấu chấm hỏi không làm thay đổi bản chất URL này là tìm tới file my_script.js nhưng sẽ làm cho trình duyệt tải lại nội dung này vì nghĩ nó là URL mới.
4. Làm sao chỉ định cho trình duyệt được phép cache nội dung tĩnh?
Tùy vào công nghệ và ngôn ngữ mà các bạn sử dụng để lập trình web. Ở đây tôi chỉ đưa ra 2 ví dụ về công nghệ ASP.NET (C#) và PHP.
Ví dụ: ASP.NET
// Cho phép tất cả phương tiện có thể lưu cache
Response.Cache.SetCacheability(HttpCacheability.Public);
// Chỉ định thời hạn lưu cache là 48 giờ
Response.Cache.SetMaxAge(new TimeSpan(48, 0, 0));
Ví dụ: PHP
// Cho phép tất cả phương tiện lưu cache, thời hạn là 86400 giây
header("Cache-Control: public, max-age=86400");
Sử dụng công nghệ AJAX cho những thay đổi vừa và nhỏ
Không phải mỗi thao tác của người dùng đều cần thiết reload lại toàn bộ nội dung của trang web !
Như có nói trước đó, tốc độ mạng rất khó lường, phải thực sự hạn chế sử dụng nó ở mức tối thiểu. Công nghệ AJAX giúp chúng ta có thể âm thầm gửi yêu cầu lên server mà không làm toàn bộ nội dung trang web bị reload lại, đồng thời ajax lại có thể nhận về một dữ liệu vô cùng tối ưu vừa đủ dùng. Lúc này chúng ta chỉ việc thay thế 1 phần nội dung người dùng đang XEM mà không phải reload lại toàn bộ trang web.
Tận dụng cấu trúc dữ liệu JSON của Javascript để lưu data
Bản thân JS được xem là tài nguyên tĩnh, có thể được cache. Dữ liệu JSON của Javascript rất thuận tiện để lưu trữ dữ liệu. Nếu tận dụng được, ta đã tiết kiệm rất nhiều truy vấn về server.
Javascript đã trở nên rất thông dụng và mạnh mẽ để giúp website có thể tương tác nhiều hơn với người dùng. Tuy nhiên, trong quá trình xử lý, javascript cũng cần rất nhiều dữ liệu, nếu đã xác định được một số dữ liệu là rất ít thay đổi, bạn có thể khai báo nó như một biến JSON bên trong JS và vô tình bạn đã giúp cache luôn nội dung đó cùng với file JS. Như vậy, trong quá trình xử lý, bạn sẽ không phải yêu cầu server cung cấp dữ liệu nữa.
Đừng cố gắng đồng bộ hiển thị (nếu không cần thiết)
Chúng ta sẽ lấy nút LIKE của FACEBOOK làm ví dụ cho trường hợp này:
Ví dụ bạn nhìn thấy một bài POST đang có 5 LIKE. Bạn click LIKE và nó nhảy lên 6. Tuy nhiên, cùng lúc đó, một người khác truy cập bài post đó cùng lúc lại thấy 8 LIKE và khi họ click cùng thời điểm thì nó nhảy lên 9 LIKE.
Cảm giác sự thay đổi của nội dung là để nói cho người dùng biết thao tác của họ đã được ghi nhận, tuy nhiên, dữ liệu tại thời điểm đó chưa chắc đã đúng. Sự đồng bộ chỉ diễn ra sau một thời gian. Điều này là hoàn toàn hợp lý.
...
HẾT VIDEO PHẦN 2
ỦNG HỘ TÁC GIẢ (DONATE) Nếu bạn muốn ủng hộ tài chính cho tác giả, bất kể bao nhiêu, bạn có thể chuyển khoản qua:
TECHCOMBANK, NGUYÊN KIỆM, TP HỒ CHÍ MINH
Chủ tài khoản___ : ĐẶNG VĂN LEL
Số tài khoản____ : 19027982455010
