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

Bởi

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

Bởi

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

Bởi

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

Bởi

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

Bởi

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

Bởi

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

Bởi

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

Trì hoãn tải CSS không quan trọng

Bởi

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 …

Đọc thêm

Loại bỏ CSS không sử dụng

Bở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: #1. 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 …

Đọc thêm

Loại bỏ các tài nguyên chặn hiển thị trong website

Bởi

Khu vực cơ hội (opportunities) của báo cáo Lighthouse liệt kê tất cả các URL chặn hiển thị cho màn hình đầu tiên. Mục tiêu là giảm ảnh hưởng của các URL chặn hiển thị (render-blocking) này bằng cách: nội tuyến (inline) các tài nguyên quan trọng, trì hoãn (defer) các tài nguyên không quan trọng, và loại bỏ (remove) bất cứ thứ gì không sử dụng. Những URL nào bị gắn cờ là tài nguyên chặn hiển thị? Lighthouse có ba kiểu gắn cờ cho URL chặn hiển thị: scripts (JS), stylesheets (CSS) và HTML imports: Một thẻ <script> …

Đọc thêm