PageSpeed Insights

First Contentful Paint (FCP) là gì?

Bởi

First Contentful Paint (FCP / Hình ảnh có nội dung đầu tiên) là một trong sáu chỉ số được theo dõi, nằm trong khu vực Performance / hiệu suất của báo cáo Lighthouse. Mỗi chỉ số nắm bắt một số khía cạnh về tốc độ tải trang. Lighthouse trình bày FCP dưới dạng giây: Cách đo FCP FCP đo khoảng thời gian trình duyệt cần bỏ ra để render phần đầu tiên thuộc nội dung DOM sau khi người dùng điều hướng đến trang của bạn. Các ảnh, các phần tử <canvas> non-white, và SVG trên trang của bạn được …

Đọc thêm

Preload các tài nguyên quan trọng để tăng tốc độ website

Bởi

Khi bạn mở một trang web, trình duyệt sẽ gửi các yêu cầu tài liệu HTML đến máy chủ (server), phân tích nội dung của nó, và gửi các yêu cầu riêng cho bất kỳ nguồn tài nguyên nào được tham chiếu đến (referenced resource). Là người lập trình, bạn cần biết về tất cả các nguồn tài nguyên mà trang của bạn cần và cái nào trong số đó là quan trọng nhất (most important). Bạn có thể sử dụng hiểu biết đó để yêu cầu các tài nguyên quan trọng (critical resources) trước và qua đó giúp tăng …

Đọc thêm

Sử dụng preconnect để gửi yêu cầu trước cho server gốc bên ngoài

Bởi

Khu vực báo cáo opportunites (cơ hội) của Lighthouse liệt kê tất cả các yêu cầu (request) quan trọng nhất mà hiện vẫn chưa được ưu tiên tìm nạp với thẻ <link rel=preconnect>: Nguyên văn: Yêu cầu preconnect tới máy chủ bên ngoài (không phải tài nguyên thuộc hosting gốc của bạn). Xem xét thêm gợi ý tài nguyên kiểu ‘preconnect’ hoặc ‘dns-prefetch’ để sớm thiết lập các kết nối quan trọng với tài nguyên của bên thứ ba (third-party). URL: chỉ đến tài nguyên của bên thứ ba. Potentical Saving: chỉ đến lượng thời gian có khả năng tiết …

Đọ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ỏ 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

Thời gian phản hồi của máy chủ, hay TTFB là gì?

Bởi

TTFB là gì? Đây là khoảng thời gian mà trình duyệt cần phải đợi để nhận được phần thông tin đầu tiên từ máy chủ web sau khi gửi yêu cầu nhận nó; TTFB là viết tắt của “Time To First Byte”; Nó có thể là nguyên nhân gây trì hoãn đáng kể trong kết xuất trang (page rendering); Nó là hệ quả kết hợp của vấn đề mạng và tốc độ trang phía máy chủ. Trì hoãn có thể xuất hiện giữa thời gian trình duyệt thực hiện yêu cầu và khi trình duyệt nhận được phản hồi. Các …

Đọc thêm