Phân Phối Các Nội Dung Tĩnh Bằng Chính Sách Bộ Nhớ Đệm Hiệu Quả

     

Trước khi đi vào chi tiết, bạn nên đọc bài viết này: Tại sao điểm số Google Pageweb5s.com.vn, Pingdom và GTmetrix lại không quan trọng.

Bạn đang xem: Phân phối các nội dung tĩnh bằng chính sách bộ nhớ đệm hiệu quả

Google có nhiều công cụ giúp người quản trị web tối ưu hóa tốc độ cho người dùng, ngoài Google AMP, định dạng ảnh WebP, tôi cũng rất thích các lời khuyên bảo từ công cụ kiểm tra tốc độ trang web có tên là Pageweb5s.com.vn Insights.

Hãy nhìn điểm của tôi (tiện thể hãy thử kiểm tra luôn điểm trang của bạn):

*

Vậy là nó có điểm rất thấp trên di động,trên máy tính để bàn thì khá hơn chút, nhưng thực tế là hầu như điểm trên desktop bao giờ cũng cao hơn trên di động (vì có tốc độ kết nối và phần cứng tốt hơn), nên cái này không thể coi là tiến bộ được. Hơn nữa kết nối di động, giờ ngày càng chiếm tỷ trọng lớn hơn và dần áp đảo máy tính bàn.

Ngay bên dưới Google sẽ đưa ra các vấn đề mà trang của tôi gặp phải:


*

Đồng thời nó cũng đưa ra các điểm tối ưu đã đạt được:


*

Với các vấn đề bên trên, nếu bạn dùng WordPress và muốn cải thiện tốc độ thì chỉ 2 đến 3 plugin cộng với vài động tác thủ công sẽ giải quyết được gần như ổn thỏa.

Khi tôi thử bật 1 plugin tối ưu hóa lên, kết quả ngay lập tức được cải thiện (lên 7 điểm):

*

Tuy nhiên để bạn hiểu bản chất vấn đề tôi sẽ đề cập đến các plugin cụ thể vào lúc khác và sẽ giải thích cơ chế tối ưu trước.

Tại sao phải khổ sở đi tìm các cơ chế bản chất trong tối ưu tốc độ làm gì trong khi có thể ăn sẵn nhờ plugin?

Bởi vì ăn sẵn có các nguy cơ sau:

Bạn đơn giản làm theo các lời khuyên, nhưng các lời khuyên luôn có ngoại lệ, và nếu trang của bạn rơi vào ngoại lệ thì cách bạn tối ưu thậm chí là có hại.Bạn chỉ tối ưu hời hợt bề ngoài, tức là bạn làm được rất ít, không hết khả năng.Nếu không có các công cụ hỗ trợ tiện lợi thì bạn không biết làm gì cả!

Hiểu sâu bản chất giúp bạn tối ưu được rất nhiều & hiểu rằng bạn đã tối ưu trang đến đâu, mặc cho có thể tồn tại những điểm mà các báo cáo nói là có vấn đề về tốc độ.

Rồi, giờ chúng ta sẽ xem từng hướng dẫn cụ thể của Pageweb5s.com.vn Insights. Lưu ý là trong bài viết này tôi chỉ đề cập đến phần tốc độ trong lời khuyên của họ. Còn phần tối ưu tính khả dụng sẽ được viết trong bài khác.


Mục lục


1. Tránh chuyển hướng ở trang đích2. Bật nén3. Cải thiện thời gian phản hồi của máy chủ4. Tận dụng sức mạnh bộ nhớ đệm của trình duyệt5. Giảm thiểu tài nguyên (HTML, CSS và JavaScript)6. Tối ưu hóa ảnh7. Tối ưu hóa việc phân phối CSS8. Ưu tiên nội dung hiển thị9. Loại bỏ JavaScript chặn hiển thị10. Sử dụng mã Script không đồng bộ

1. Tránh chuyển hướng ở trang đích

Quy tắc này kích hoạt (this rule triggers) khi Pageweb5s.com.vn Insights phát hiện (detects) bạn có hơn một chuyển hướng từ url hiện tại đến trang landing page cuối cùng.

Tổng quan

Chuyển hướng tạo thêm một chu trình yêu cầu-phản hồi HTTP và làm trang trì hoãn quá trình hiển thị (rendering). Trong trường hợp tốt nhất, mỗi lần chuyển hướng sẽ thêm một vòng khứ hồi (yêu cầu-phản hồi HTTP), và trong trường hợp tệ nhất nó có thể tạo ra nhiều vòng lặp khứ hồi như thực hiện tra cứu DNS, “bắt tay” TCP, đàm phán TLS ngoài việc có thêm chu kỳ HTTP yêu cầu-hồi đáp. Do vậy bạn phải tối thiểu hoá việc sử dụng chuyển hướng để nâng cao hiệu năng của trang.

Dưới đây là một số ví dụ về các kiểu chuyển hướng điển hình (redirect patterns):

example.com sử dụng thiết kế web đáp ứng, không cần chuyển hướng – nhanh và tối ưu! (bạn nên làm như thế này)example.com→ m.example.com/home – xuất hiện nhiều chuyển hướng ảnh hưởng đến người dùng di động (xảy ra khi bạn định làm một url riêng cho phiên bản di động)example.com→ www.example.com→ m.example.com – trải nghiệm di động rất chậm (với đủ các kiểu chuyển hướng từ không có www đến có www rồi đến phiên bản di động)

Lời khuyên

Hãy tìm hiểu các nguyên tắc cơ bản của thiết kế đáp ứng để phân phối trải nghiệm tốt trên nhiều thiết bị và loại bỏ (eliminate) các chuyển hướng không cần thiết.

Nếu trang của bạn yêu cầu chuyển hướng, hãy đọc hướng dẫn chuyển hướng và phát hiện User-Agent của chúng tôi (Google).

Kinh nghiệm cá nhân với WordPress (kiencang.net): Nếu bạn dùng WordPress, thông thường bạn sẽ không gặp vấn đề chuyển hướng kiểu như trên. Các giao diện dành cho WordPress (ngay cả miễn phí) hầu như đều là thiết kế đáp ứng.

2. Bật nén

Quy tắc này kích hoạt khi Pageweb5s.com.vn Insights phát hiện các nguồn nén đang thực thi (compressible resources were served) không có nén gzip.

Tổng quan

Tất cả các trình duyệt hiện đại đều hỗ trợ và tự động đàm phán nén gzip cho tất cả các yêu cầu HTTP. Bật gzip có thể giảm dung lượng truyền tải lên đến 90%, điều này có thể giảm đáng kể thời gian tải dữ liệu nguồn, giảm dữ liệu sử dụng cho người dùng và nâng cao thời gian xuất trang lần đầu. Xem nén văn bản với GZIP để hiểu thêm.

Lời khuyên

Bật và kiểm tra xem nén gzip có được hỗ trợ bởi web server của bạn hay là không. Dự án HTML5 Boilerplate bao gồm các tệp tin cấu hình mẫu cho tất cả máy chủ phổ biến nhất với các lời khuyên chi tiết cho việc cấu hình và thiết lập: tìm máy chủ ưa thích của bạn trong danh sách, tìm tới phần gzip, và xem xem máy chủ của bạn có được cấu hình với các thiết lập được khuyến cáo không. Ngoài ra hãy tham khảo tài liệu cho máy chủ web của bạn về cách bật nén:

Kinh nghiệm cá nhân với WordPress: Để kiểm tra xem trang của bạn đã được nén hay chưa, bạn có thể vào các trang web chuyên kiểm tra việc này rồi đưa tên miền của bạn vào. Gõ từ khóa “Check GZIP compression” để có được các trang như vậy. Ví dụ trang này:https://web5s.com.vn/cach-trang-web-tai-va-hien-thi/

Rất nhiều dịch vụ hosting mặc định bật gzip nên có thể bạn sẽ bất ngờ khi thấy trang của mình đã được bật rồi dù bản thân chưa làm gì cả. Bật gzip giúp các hãng hosting giảm tải băng thông.

Hiện nay một số hosting hỗ trợ kiểu nén còn tốt hơn tên làbrotli, một chương trình do Google phát triển. Để kiểm tra xem hosting của bạn có hỗ trợ kiểu nén này không, bạn vào trang này:https://tools.keycdn.com/brotli-test

Các câu hỏi thường gặp (FAQ)

Pageweb5s.com.vn Insight báo là nhiều nội dung tĩnh của tôi (my static content) cần nén gzip, nhưng tôi đã cấu hình máy chủ web để nén gzip các file đó. Tại sao Pageweb5s.com.vn Insights không phát hiện được là tôi đã bật nén rồi?

Proxy servers và phần mềm chống virus có thể vô hiệu hoá nén khi các file này được tải về máy khách. Kết quả của Pageweb5s.com.vn Insight dựa trên headers, khi chúng thực sự được trả lại cho máy khách, vì vậy nếu bạn thực hiện phân tích trên máy khách sử dụng các phần mềm chống virus như vậy hoặc ngồi phía sau máy chủ proxy trung gian (nhiều máy chủ là vô hình, và bạn có thể thậm chí không ý thức được sự can thiệp của proxy giữa máy khách của bạn và máy chủ web), chúng có thể là nguyên nhân của vấn đề này.

Để xác định nếu proxy là nguyên nhân, bạn có thể sử dụng Pageweb5s.com.vn Insights Chrome extension để kiểm tra headers:

Chạy Pageweb5s.com.vn trên trang.Click vào tab Hiển thị Nguồn (Show Resource).Mở rộng URL của nguồn được gắn cờ là không bật nén. Các header đi kèm với nguồn được hiển thị. Nếu bạn thấy header gọi đếnVia, Forwarded, or Proxy-Connection, điều đấy chỉ ra rằng một proxy đang phục vụ tài nguyên.

3. Cải thiện thời gian phản hồi của máy chủ

Quy tắc này được kích hoạt khi Pageweb5s.com.vn Insights phát hiện thời gian phản hồi máy chủ của bạn trên 200 ms.

Tổng quan

Thời gian phản hồi máy chủ (server response time) đo khoảng thời gian phải bỏ ra (how long it takes) cho việc tải HTML cần thiết để bắt đầu quá trình hiển thị trang từ máy chủ của bạn, trừ đi độ trễ mạng (network latency) giữa Google và máy chủ của bạn. Có thể có sự khác nhau ngay cả lần chạy tiếp theo, nhưng sự khác biệt không nên quá lớn. Trong thực tế, sự không ổn định của thời gian phản hồi máy chủ có thể biểu thị cho một vấn đề nghiêm trọng mang tính nền tảng về hiệu suất (underlying performance issue).

Lời khuyên

Bạn phải giảm thời gian phản hồi của máy chủ xuống dưới 200 ms. Có hàng tá yếu tố tiềm năng có thể gây chậm thời gian phản hồi của máy chủ: ứng dụng logic chậm, truy vấn cơ sở dữ liệu chậm, bộ định tuyến chậm, frameworks, các thư viện, thiếu CPU, hoặc thiếu RAM.

Bạn cần xem xét tất cả các yếu tố đó để cải thiện thời gian phản hồi của máy chủ. Bước đầu tiên để biết được lý do tại sao thời gian phản hồi của máy chủ lại tăng là đo đạc. Sau đó, với dữ liệu trong tay, tìm hiểu các hướng dẫn thích hợp để biết rắc rối nằm ở đâu. Một khi vấn đề được giải quyết, bạn phải tiếp tục đo thời gian phản hồi của máy chủ và xác định bất cứ sự tắc nghẽn cổ chai về hiệu suất nào trong trương lai.

Thu thập và kiểm tracác dữ liệu và thông tin hiệu suất có sẵn. Nếu không có, đánh giá bằng cách sử dụng một ứng dụng theo dõi web tự động (được hosted và có phiên bản nguồn mở cho hầu hết các nền tảng) hoặc thêm thiết bị tùy chỉnh.Xác định và khắc phục các nguyên nhân hàng đầu gây tắc nghẽn cổ chai làm ảnh hưởng đến hiệu suất. Nếu bạn sử dụng framework web, hoặc nền tảng quản lý nội dungphổ biến, tham khảo tài liệu về các thực hành tốt nhất của nó để tối ưu hóa hiệu suất.Theo dõi và cảnh báo cho bất cứ vấn đề suy giảm (regressions) về hiệu suất nào trong tương lai!

Kinh nghiệm cá nhân với WordPress: Khi so sánh 2 trang WordPress của mình thì thấy một trang có vấn đề về thời gian phản hồi máy chủ, một trang thì không. Trang có vấn đề lại là trang nhẹ hơn, bằng 1/10 truy cập trang kia, ít cài cắm plugin & cũng không có plugin nặng. Thời gian phản hồi của trang chậm đều trên 0,4 giây (400ms).

Xem thêm: Hướng Dẫn Cách Đánh Số Trang Khác Nhau Trong Word, Đánh Số Trang Từ Một Trang Bất Kỳ Trong Word

Vấn đề với trang của mình là hosting, một trang được đặt trên host tối ưu cho WordPress, còn trang kia đặt trên VPS thông thường cùng vài trang khác nữa.

Vì không có vấn đề khác trong quá khứ nên mình chẳng có gì để nói thêm. Ngoài chuyện này:

Đôi khi các plugin có khả năng xung đột với nhau và có thể ảnh hưởng đến tốc độ tải trang, có khả năng là do ảnh hưởng đến RAM hoặc CPU.

4. Tận dụng sức mạnh bộ nhớ đệm của trình duyệt

Quy tắc này kích hoạt khi Pageweb5s.com.vn Insights phát hiện hồi đáp từ máy chủ của bạn không bao gồm caching header hoặc nếu có thì chỉ được chỉ định thời gian cache ngắn (specified to be cached for only a short time).

Tổng quan

Tìm nạp nguồn qua mạng (fetching resources over the network) gặp hai bất lợi là chậm và đắt đỏ: dowload có thể cần nhiều vòng lặp giữa máy khách và máy chủ (server), điều này sẽ làm trì hoãn xử lý và có thể ngăn chặn quá trình hiển thị (rendering) nội dung của trang, nó cũng làm tăng chi phí dữ liệu (incurs data costs) cho người xem. Tất cả hồi đáp từ máy chủ phải chỉ rõ (specify) chính sách (thông số) caching để giúp máy khách xác định được khi nào nó có thể sử dụng lại (reuse) phản hồi tìm nạp đã có trước đó.

Lời khuyên

Mỗi tài nguyên nên chỉ định rõ ràng chính sách (thông số) caching để trả lời các câu hỏi sau: khi nào dữ liệu nguồn có thể lưu trữ, ai lưu trữ, trong bao lâu, và nếu được áp dụng thì làm thế nào để việc kiểm tra lại hiệu quả khi thời gian caching hết hạn (caching policy expires).Khi máy chủ trả về hồi đáp, nó phải cung cấp Cache-Control và ETag headers:

Để xác định được chính sách caching tối ưu cho trang của bạn, hãy sử dụng các hướng dẫn sau:

Chúng tôi khuyên thời gian cache tối thiểu là một tuần và tốt nhất (preferably) là một năm cho nội dung tĩnh, hoặc các nội dung ít khi thay đổi. Nếu bạn cần kiểm soát chính xác khi tài nguyên không được xác nhận, chúng tôi khuyên sử dụng dấu vân tay URL – xem hủy và cập nhật hồi đáp cache ở liên kết trên.

Kinh nghiệm cá nhân với WordPress: Bạn có thể dễ dàng tạo hoặc tối ưu bộ nhớ đệm của trình duyệt thông qua chỉnh sửa file .htaccess. Nhiều plugin tạo bộ nhớ cache phổ biến cho WordPress như W3 Total Cache, WP Super Cache, WP Fastest Cache hoặc WP Rocket cho phép bạn làm điều này qua giao diện trực quan.

Nếu bạn không dùng các plugin trên mà chỉnh sửa thủ công, việc đó cũng không hề khó khăn đâu, bạn dễ dàng tìm các mẫu code chuẩn chỉnh dành cho máy chủ của mình, nó rất phổ biến trên mạng (trong đường link tối ưu bộ nhớ đệm của trình duyệt ở trên cũng có đoạn mã đó).

Cách thức tăng tốc này là điều rất đáng làm vì nó thực sự hiệu quả, rất đơn giản và không tốn kém gì.

5. Giảm thiểu tài nguyên (HTML, CSS và JavaScript)

Quy tắc này được kích hoạt khi Pageweb5s.com.vn Insights phát hiện ra một trong các nguồn của bạn có thể được giảm thiểu dung lượng.

Tổng quan

Giảm thiểu (minification) đề cập đến quá trình loại bỏ các dữ liệu không cần thiết (unnecessary) hoặc dư thừa (redundant) mà không làm ảnh hưởng đến việc trình duyệt xử lý nguồn nội dung – thí dụ như mã của bình luận, loại bỏ code không sử dụng, sử dụng các tên biến và tên hàm ngắn hơn và nhiều kỹ thuật khác nữa.

Xem tiền xử lý và tối ưu hóa theo ngữ cảnh cụ thể để biết thêm chi tiết.

Lời khuyên

Bạn nên giảm thiểu nguồn HTML, CSS và JavaScript:

Ngoài ra, Pageweb5s.com.vn Module, tương hợp với cả máy chủ Apache hoặc Nginx sẽ tự động tối ưu trang của bạn, bao gồm cả việc tối thiểu hóa nguồn.

Kinh nghiệm cá nhân với WordPress: Bạn có thể thấy đây là cách thức rất dễ hiểu để cải thiện dung lượng của trang. Bạn đơn giản loại bỏ các dữ liệu không cần thiết. Hiện một trong các plugin rất mạnh trong công việc này của WordPress là Autoptimize(xem hướng dẫn sử dụng Autopimize ở đây) kết hợp nhiều cách thức tối ưu trong đó có cả giảm thiểu dung lượng, nối file & tải không đồng bộ/trì hoãn JS. Ngoài ra thì nhiều plugin chuyên cho cache cũng có sẵn tính năng này, ví dụ như WP-Rocket.

Nếu giảm thiểu dung lượng không ảnh hưởng gì đến việc hiển thị thì nối file và tải không đồng bộ/trì hoãn CSS, JS có thể gây lỗi giao diện. Đây là nguyên nhân mà bạn cần kiểm tra kỹ lại trang sau khi dùng Autoptimize, đặc biệt là những trang có giao diện phức tạp, hoặc có nhiều tính năng. Trong đa số trường hợp tối ưu cho JS, CSS và HTML là cách thức rất an toàn.

Việc chỉnh sửa thủ công bằng các công cụ mà Google gợi ý ở trên cũng khá hay, nhưng đòi hỏi bạn phải tìm hiểu sâu hơn về WordPress chứ nó không đơn giản như cách dùng plugin.

Tuy nhiên nhược điểm của chỉnh sửa thủ công ngay cả khi bạn là người khá thành thạo đi nữa đó là nếu theme cập nhật thì bạn cũng phải cập nhật lại các thao tác thủ công của mình & điều này chẳng phải là công việc nhẹ nhàng, dễ nhớ hay thú vị gì. Dùng plugin thì không bị như thế, nó tự động làm cho bạn (tôi nghĩ có lẽ đó là lý do tại sao người phát triển plugin trên đặt tên của nó bắt đầu bằng tiền tố auto / tự động).

6. Tối ưu hóa ảnh

Quy tắc này được kích hoạt khi Pageweb5s.com.vn Insights phát hiện các hình ảnh trên trang của bạn có thể được tối ưu để giảm dung lượng (optimized to reduce their filesize) mà không ảnh hưởng đáng kể (without significantly impacting) đến chất lượng đồ họa (visual quality).

Tổng quan

Các hình ảnh thường chiếm phần lớn dung lượng tải trên trang. Hệ quả là: tối ưu hóa hình ảnh có thể tiết kiệm được rất nhiều dung lượng (băng thông) và nâng cao hiệu suất: càng ít dữ liệu trình duyệt phải tải xuống, thì sự cạnh tranh cho băng thông của khách hàng cũng ít theo và trình duyệt có thể tải và hiển thị nội dung trên màn hình nhanh hơn.

Lời khuyên

Tìm ra định dạng tối ưu (optimal format) và chiến lược tối ưu hóa hình ảnh của bạn có thể phải yêu cầu phân tích cẩn thận trên nhiều khía cạnh: kiểu dữ liệu được mã hóa, các định dạng hình ảnh có thể, cài đặt chất lượng, độ phân giải và nhiều điều khác nữa. Thêm vào đó, bạn cần xem xét liệu một số hình ảnh sẽ tốt nhất khi ở định dạng vector (SVG), một số hiệu ứng mong muốn có thể đạt được thông qua CSS, và làm thế nào phân phối các định dạng tài nguyên thích hợp cho từng thiết bị.

Tối ưu hóa cho tất cả các định dạng ảnh

Tối ưu hóa cho ảnh GIF, PNG và JPEG

GIF, PNG và JPEG là các định dạng chiếm đến 96% toàn bộ lưu lượng ảnh trên Internet. Do sự phổ biến của chúng, Pageweb5s.com.vn Insights cung cấp các lời khuyên tối ưa hóa cụ thể. Để thuận tiện cho bạn, bạn có thể tải các ảnh được tối ưu hóa trực tiếp từ Pageweb5s.com.vn Insights (được xử lý bằng thư viện tối ưu hình ảnh của modpageweb5s.com.vn.com).

*

Bạn cũng có thể sử dụng các công cụ chuyển đổi nhị phân của ImageMagick để thực hiện các tối ưu hóa tương tự – xem các ví dụ hướng dẫn bên dưới.

Nếu bạn sử dụng công cụ tối ưu hình ảnh của bên thứ ba, hãy ý thức rằng quá trình chuyển đổi có thể làm hình ảnh lớn hơn nếu các ảnh của bạn đã được tối ưu sẵn từ trước rất tốt rồi (tôi cũng từng chia sẻ kinh nghiệm này trong bài viết thử chuyển JPG & PNG sang WebP). Nếu tình huống này xảy ra, hãy sử dụng lại bản gốc của bạn.

GIFPNG là định dạng không mất dữ liệu, vì vậy quá trình xử lý nén sẽ không gây bất kỳ ảnh hưởng nào đến chất lượng hình ảnh. Đối với hình ảnh tĩnh, PNG đạt được tỷ lệ nén tốt hơn với chất lượng hình ảnh tốt hơn. Với hình ảnh động, xem xét sử dụng video thay vì GIF để nhận được khả năng nén tốt hơn.

Xem thêm: Da Handmade Là Gì? Tại Sao Lại Có Sức Hút Mạnh Mẽ Đến Giới Trẻ? ?

Luôn luôn chuyển đổi GIF sang PNG trừ khi ảnh gốc là ảnh động hoặc rất nhỏ (ít hơn vài trăm bytes).Với cả ảnh GIF và PNG, loại bỏ kênh alpha nếu tất cả các pixel không rõ ràng.

Lấy thí dụ, bạn có thể sử dụng chuyển đổi nhị phân để tối ưu ảnh GIF và PNG với các lệnh sau (các thông số bên trong dấu ngoặc là tùy chọn):