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

font chữ

Nếu bạn phân tích trang 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ó.

Đọc thêmSửa lỗi Flash of Invisible Text (FOIT) trong WordPress

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

loại bỏ CSS không dùng

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:

Đọc thêmLoại bỏ CSS không sử dụng

Critical CSS là gì, làm sao trích xuất critical CSS trong WordPress

CSS quan trọng trong WordPress

Hiểu về bản chất của CSS trong WordPress

Trước khi đi sâu hơn, chúng ta sẽ tìm hiểu cách CSS (thông thường) sẽ hoạt động như thế nào trong WordPress.

Mọi giao diện (theme) WordPress đều bao gồm một file style.css bao gồm tất cả các đoạn mã cần thiết để tạo style cho website của bạn. Nhà phát triển theme cần hỗ trợ tất cả các tính năng của WordPress bao gồm bài đăng blog, bình luận, trang sản phẩm, trang thành viên, form, vân vân. Các plugin khác mà bạn cài cũng có thể thêm các style css tương tự.

Điều này có khả năng làm file CSS phình to ra và có kích cỡ lên đến 200KB hoặc thậm chí còn cao hơn nữa.

Đọc thêmCritical CSS là gì, làm sao trích xuất critical CSS trong WordPress

Các yếu tố đơn giản giúp bạn cải thiện sự hài lòng của người đọc trên website sử dụng WordPress [Hướng dẫn tổng quan]

sự hài lòng khi duyệt web

Có những thứ tưởng chừng bé nhỏ khi liên quan đến sự tiện dụng của người đọc mà chúng ta dễ bỏ qua, dễ bỏ qua đến mức khó tin. Nhưng có 2 vấn đề:

  • Thực ra thì từng thứ đó chẳng hề bé tí nào (chốc nữa tôi sẽ chứng minh cho bạn thấy)
  • Và tập hợp chúng lại thì lại càng không bé!

Đọc thêmCác yếu tố đơn giản giúp bạn cải thiện sự hài lòng của người đọc trên website sử dụng WordPress [Hướng dẫn tổng quan]

Cách căn giữa ảnh bằng CSS

Căn giữa chữ rất dễ, bạn chỉ cần sử dụng thuộc tính text-align: center; là OK.
Còn căn giữa ảnh thì lại không dễ như thế! Đã rất nhiều lần tôi vò đầu bứt tai vì chẳng căn giữa nổi! Thực ra kỹ thuật không có gì đặc biệt, nhưng cần mẹo nhỏ thì mới được. Đấy là đặc điểm chung của mẹo, biết thì rất dễ mà không biết thì khó vô cùng (chém gió tí!)

Đọc thêmCách căn giữa ảnh bằng CSS