Tài nguyên từ bên thứ ba trong WordPress: Cách phân tích & tăng tốc độ tải trang

Tối ưu hóa tài nguyên của bên thứ ba là một trong những thứ khó xử lý nhất trong WordPress. Một giải pháp rõ ràng đó là loại bỏ các script/plugin không cần thiết – cái tạo ra các yêu cầu tới bên thứ ba đó. Nhưng nếu loại bỏ plugin không phải là giải pháp lúc nào cũng khả thi thì bạn nên đọc bài viết này! Các yêu cầu từ bên thứ ba là gì? Các yêu cầu đến từ bên thứ ba về cơ bản là các file như CSS, JS, ảnh, font được tải từ các …

Đọc thêm

Cách inline ảnh sử dụng Base64/SVG trong WordPress

Một trong các mục tiêu chính của tôi trong việc tối ưu hóa tốc độ website là cải thiện First Contentful Paint và First Meaningful Paint, làm cho nội dung thuộc màn hình đầu tiên hiển thị nhanh nhất có thể. Lý tưởng nhất, trình duyệt nên có khả năng render và style nội dung thuộc màn hình đầu tiên (above fold content) với số lượng ít nhất các yêu cầu HTTP. Tạo critical CSS, cộng với trì hoãn tải JavaScript và CSS rất có ích trong chuyện này. Một trong các kỹ thuật tương tự mà tôi dùng để …

Đọc thêm

Cách đọc hiểu bảng Waterfall trong phân tích tốc độ website

Tóm tắt: Bài viết này sẽ giúp bạn học cách biết ý nghĩa của từng thành phần trong bảng Waterfall và mối liên hệ của nó với tốc độ website. Là người mới tham gia vào lĩnh vực tối ưu tốc độ trang web, đọc bảng Waterfall (*) có thể là điều mà bạn cảm thấy quá sức khó hiểu – thậm chí còn có cảm giác sợ hãi khi mới nhìn qua lần đầu. Trong phần mở đầu của chuỗi bài viết về bảng Waterfall, bạn sẽ được tìm hiểu ý nghĩa của từng thanh (bar), dòng (line), và …

Đọc thêm

Các tính năng cải tiến đáng giá của Plugin Flying Images by WP Speed Matters

Plugin Flying Images by WP Speed Matters mới nâng cấp lên phiên bản mới (cuối tháng 12 năm 2019) có nhiều tính năng thú vị. Bao gồm: [Mới] – Dịch vụ CDN cho ảnh (miễn phí) thông qua Statically – tôi sẽ bàn kỹ về nó sau; [Mới] – Chuyển ảnh sang định dạng .webp giúp tối ưu hơn nữa dung lượng ảnh (với rất nhiều tiện lợi); [Mới] – Vẫn nén ảnh miễn phí với các định dạng khác nếu cần; [Mới] – Cho phép lazy load cả ảnh background; [Cập nhật] – Ảnh co giãn theo màn hình …

Đọc thêm

Hướng dẫn sử dụng plugin Async JavaScript để trì hoãn tải JS trong WordPress

Tác giả Frank Goossens (futtta) có nhiều plugin hỗ trợ tăng tốc WordPress, trong đó nổi tiếng nhất có lẽ là Autoptimize (có thể bạn cũng đang dùng đấy ạ!). Nhưng chỉ dùng mỗi plugin đó thì hơi phí, ông còn nhiều plugin khác rất thú vị, làm các nhiệm vụ chuyên sâu hơn nữa trong vấn đề cải thiện tốc độ trang. Và hôm nay chúng ta sẽ làm quen với một trong các plugin như vậy, nó có tên Async JavaScript, để biết cách trì hoãn và/hoặc tải không đồng bộ JS. Bản thân plugin Autoptimize tuy cũng …

Đọc thêm

Tải JavaScript hiệu quả với defer và async

Khi bạn tải JavaScript trên trang HTML, bạn cần cẩn thận để không làm ảnh hưởng xấu đến hiệu suất (tốc độ) của trang. Phụ thuộc vào việc bạn đặt đoạn mã JavaScript ở đâu và cách đặt nó trên trang HTML, sự kết hợp này sẽ ảnh hưởng đến thời gian tải trang (loading time). Một đoạn mã JavaScript thông thường sẽ được đặt như thế này: Bất cứ khi nào trình phân tích (parser) HTML tìm thấy dòng này, một yêu cầu sẽ được thực hiện để tìm nạp (fetch / tải xuống) JavaScript, và đoạn mã sẽ …

Đọc thêm

Một lý giải đơn giản về lazy load, và tại sao nó lại quan trọng đến thế trong tăng tốc Website

Lazy loading là ý tưởng cốt lõi trong tăng tốc website, thường gắn nhiều với ảnh và video, tuy nhiên ứng dụng của nó nhiều hơn như thế. Nếu quen với các ứng dụng đánh giá tốc độ web, như Google PageSpeed Insights, bạn chắc hẳn là không lạ các khái niệm như: Chặn hiển thị của CSS và JS Màn hình đầu tiên Critical CSS Trì hoãn tải ảnh Trì hoãn tải video vân vân Về bản chất, tất cả những thứ trên đều gắn chặt với khái niệm lazy loading (tải lười, tải chậm, trì hoãn). Và trong …

Đọc thêm

Cách tăng tốc tải video YouTube và Vimeo nhúng trong WordPress

Gần đây tôi có cơ hội làm việc với một website rất nặng video (compare.parts), các video này được host (lưu trữ) trên Vimeo, và được đặt trong màn hình đầu tiên, tại những vị trí thu hút của website (hero section). Yêu cầu của họ là chúng cần tải nhanh và bật tự động (autoplay). Bạn có thể xem video đó ở đường link website mà tôi trích dẫn ở trên (cập nhật: hiện trang trên không nhúng video làm background nữa). Với cách tối ưu hóa thích hợp, tôi đã đạt được số điểm 100/100 trên Google PageSpeed …

Đọc thêm

Sửa lỗi Flash of Invisible Text (FOIT) trong WordPress

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 …

Đọc thêm

Loại bỏ CSS không sử dụng trong WordPress: nói dễ hơn làm

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 thêm