Các mẹo tối ưu hóa Google Fonts từ A đến Z

Đúng vậy, có một số nhà thiết kế/lập trình viên lười biếng và họ thêm mọi font họ có thể để làm website trông đẹp hơn. Nhưng về hiệu suất, tốc độ thì sao nào? Giống như các tối ưu khác, font cần ưu tiên cao vì văn bản có lẽ là thứ đầu tiên người dùng có khả năng nhìn thấy trên website. Hướng dẫn này sẽ cho bạn biết các phương thức khác nhau để tối ưu hóa Google Fonts, đặc biệt là cho WordPress. Sử dụng font hệ thống để thay thế Bạn có để ý là …

Đọc thêm

Đảm bảo văn bản vẫn hiển thị trong khi font tùy chỉnh tải về

Vài lời của người dịch: font tùy chỉnh- khi sử dụng một cách khéo léo, sẽ giúp tăng tính thẩm mỹ, cá tính của trang, và đó là một yếu tố quan trọng để thu hút người dùng, chúng ta không nên cực đoan loại bỏ nó chỉ để tốc độ tăng thêm. Tuy nhiên, mặt khác, văn bản cũng cần cố gắng hiển thị càng sớm càng tốt trên trang, bài viết này sẽ hướng dẫn chúng ta cân bằng cả 2 yếu tố này. OK, let’s go! Các font thường là những file lớn, và mất thời gian …

Đọc thêm

Code mẫu dns-fetch, preconnect, preload mỳ ăn liền

Tôi từng có các bài viết chi tiết giải thích ý nghĩa & cách dùng dns-fetch, preconnect, preload. Tuy chúng cũng hay khi muốn tìm hiểu sâu, nhưng đối với trường hợp áp dụng vào thực tế mà khi bạn đã hiểu ý nghĩa cơ bản rồi thì các mã mẫu chuẩn sẽ tiện cho các bạn sử dụng hơn. Mỳ ăn liền không tốt cho sức khỏe nếu ăn thường xuyên, cơ mà thi thoảng chúng ta dùng một bữa thì cũng không sao. Mẫu cho dns-prefetch Bạn không cần thêm kiểu kết nối http hay https. DNS-prefetch chỉ …

Đọc thêm

Website lớn vẫn có thể mắc lỗi rất cơ bản về tính khả dụng

Nếu bạn từng tìm mua hosting cho website, hẳn là bạn có khả năng cao đã nghe đến thương hiệu Hostinger. Đây là dòng hosting giá rẻ rất có tiếng, về chất lượng tôi chưa dùng thử bao giờ nên không dám nhận xét. Hostinger có khả năng làm content marketing rất tốt. Khi tra cứu tôi thường xuyên thấy thương hiệu này nằm trong top 10, nhiều từ khóa còn nằm trong top 3. Ngay cả tên miền của họ tôi cũng nghĩ là cách đặt tên hay, họ còn khéo léo mua tên miền cấp quốc gia tại …

Đọc thêm

Cẩn thận với font tùy chỉnh: lợi thì có lợi nhưng…

Vì yêu cầu thẩm mỹ, nhiều website sử dụng font tùy chỉnh, tức là file font tải từ bên thứ ba hoặc chính hosting của website để làm font chữ cho trang. Font tùy chỉnh thường sử dụng CSS có tên @font-face. Trong khi việc sử dụng thích hợp font tùy chỉnh chắc chắn đem đến hiệu quả thẩm mỹ ít nhiều, thì cái giá phải trả cho nó cũng không hề nhỏ: Các font tùy chỉnh thường có dung lượng khá lớn, 50 – 100 KB không phải là chuyện hiếm. Font tùy chỉnh làm gia tăng request, sẽ …

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

Font cho web và vấn đề tốc độ tải trang

Vì sao các lựa chọn font cho web (khác nhau) lại ảnh hưởng đến tốc độ tải trang? Bài viết này mô tả một số phương pháp sử dụng font cho web và cách chúng ảnh hưởng đến tốc độ trang. Nói chung danh sách được liệt kê từ nhanh nhất đến chậm nhất về mặt lý thuyết và cung cấp các thông tin sau về từng biện pháp: Điểm có lợi; Điểm có hại; Minh họa cách nó làm việc trên mạng; Một ví dụ triển khai điển hình; Một liên kết đến một trang thực sự sử dụng …

Đọc thêm