Vài lưu ý trước: Bài viết này chủ yếu là phần lý thuyết về việc loại bỏ CSS chặn hiển thị. Nó có ích nhất cho những ai làm lập trình web, viết giao diện tối ưu cho tốc độ hơn. Nếu bạn đơn thuần đang sử dụng các CMS sẵn có như WordPress, bài viết này không cung cấp các plugin cụ thể để bạn tối ưu, nhưng nó cũng có ích để bạn hiểu được cơ chế căn bản. Nếu thuộc dạng người dùng này, các mẹo để giảm các CSS chặn hiển thị bao gồm (nhưng không …
Phân phối CSS là gì? Cách dùng CSS để render (hiển thị) trang; Bao gồm việc sử dụng file CSS ngoài (external), CSS nội bộ (internal) hoặc kết hợp cả hai. Trang web có thể sử dụng CSS theo nhiều cách khác nhau và chúng đều hoạt động được bình thường. Vì nó có nhiều cách sử dụng nên cũng tồn tại nhiều cách thiết lập CSS khác nhau & một số cách sẽ tối ưu hơn cách khác. Dù bạn có đang thiết lập CSS trên các trang web của bạn như thế nào đi nữa thì CSS cần …
Tôi rất hứng thú với vấn đề tăng tốc WordPress, bởi vì tốc độ website lúc nào cũng là chủ đề quan trọng hàng đầu đối với người quản trị. Hôm nay tôi sẽ nói về plugin Autoptimze – một trong các công cụ hỗ trợ tăng tốc miễn phí tốt nhất. Plugin giúp tôi tăng tốc bằng cách nào? Autoptimze hỗ trợ cải thiện thời gian tải trang thông qua 3 yếu tố chính sau: Nén, gộp, và tối ưu file CSS. Nén, gộp, và tối ưu file JavaScript. Nén HTML. Thao tác nén giúp giảm dung lượng file, trong …
Nếu bạn phân tích website thông qua Google PageSpeed Insights, bạn có thể thấy lỗi như “Đảm bảo văn bản vẫn hiển thị trong khi tải phông chữ web / Ensuare text remains visible during web font load“. Trong bài viết này tôi sẽ nêu nguyên nhân gốc rẽ của vấn đề trên và cách để sửa nó. Ở trên là thông báo về dùng font Google, còn bên dưới là font tải từ hosting của bạn: Cách phông chữ hoạt động trong trình duyệt? Trước khi sửa lỗi này, chúng ta cần phải hiểu cách phông chữ hoạt động …
Khi bạn phân tích trang thông qua công cụ Google PageSpeed Insights, bạn có thể thấy lỗi như thế này về “Loại bỏ CSS không sử dụng / Remove unsued CSS”: Tạm dịch phần chụp màn hình phía trên: Loại bỏ các quy tắc/thuộc tính không dùng đến trong CSS và trì hoãn tải CSS không sử dụng trong màn hình đầu tiên để giảm dữ liệu tiêu thụ bởi hoạt động mạng. Bạn cần xem xét việc giảm hoặc chuyển đổi số lượng các plugin WordPress tải CSS không sử dụng trong trang. Để xác định plugin nào đang …
Các file CSS là loại tài nguyên chặn hiển thị: chúng phải được tải xuống (load) và xử lý (process) trước khi trình duyệt render trang. Trang web bao gồm lượng lớn các style không cần thiết có thể mất nhiều thời gian để render. Trong bài hướng dẫn này, bạn sẽ học được cách làm thế nào để trì hoãn các CSS không quan trọng (non-critical CSS) với mục tiêu tối ưu hóa tuyến hiển thị quan trọng (critical rendering path), và cải thiện thời gian thấy nội dung đầu tiên xuất hiện (First Contentful Paint / FCP). Tải …
Khu vực Opportunities (cơ hội) của báo cáo Lighthouse sẽ liệt kê tất cả các stylesheets gồm CSS không sử dụng- với tiềm năng tiết kiệm được từ 2 KB trở lên. Loại bỏ CSS không sử dụng giúp giảm lượng bytes (dữ liệu) không cần thiết tiêu thụ bởi hoạt động mạng: CSS không sử dụng làm chậm website như thế nào? Sử dụng thẻ link là cách thức phổ biến để thêm style vào trang web: file main.css mà trình duyệt tải xuống còn được biết đến với tên gọi stylesheet ngoài (external), bởi vì nó được lưu …
Tóm tắt: học cách cải thiện thời gian hiển thị website nhanh hơn với các kỹ thuật critical CSS. Trình duyệt phải tải và phân tích cú pháp (parse) các file CSS trước khi nó có thể hiển thị trang, điều này làm cho CSS là nguồn chặn hiển thị (render-blocking). Nếu các file CSS có kích thước lớn, hoặc điều kiện mạng chậm chạp (đứt cáp, kết nối trên di động yếu & không ổn định), các yêu cầu cho file CSS có thể làm gia tăng thời gian đáng kể việc hiển thị web. A. Thuật ngữ chính …
Với những ai có căn bản về web, bạn hiểu khá rõ về HTML, CSS, JS và có thể là một ngôn ngữ lập trình web phổ biến như PHP. Khi ấy các giải thích về citical CSS không khó khăn để hiểu. Tuy nhiên nếu bạn là người ngoại đạo, việc giải thích critical CSS là các đoạn mã được dùng để style cho nội dung thuộc màn hình đầu tiên, còn các đoạn mã CSS khác được trì hoãn tải có vẻ khó tiếp thu. Nếu bạn rơi vào trường hợp này, thì đây là bài viết dành …
Tóm tắt: Bài viết này sẽ cho bạn biết critical CSS là gì? Cách nó hoạt động và khi nào bạn nên sử dụng nó? Và thậm chí…khi nào bạn không nên sử dụng critical CSS? Đây là một hướng dẫn khác về hiệu suất của WordPress không-hề-chém-gió (cut-the-crap) tôi muốn dành cho bạn… Để tôi kể chuyện, hồi trước tôi nhận được một câu hỏi ngây thơ từ khách hàng từng mua hosting của mình: Này, tôi muốn hỏi bạn nhanh một câu: Bạn đã bao giờ xử lý critical CSS chưa? Tôi đang cố gắng thử nghiệm nó …