Font chữ ảnh hưởng đến tốc độ tải trang nhiều hơn phần lớn người làm web vẫn nghĩ. Chúng tôi từng nhận một bản thiết kế đẹp mắt. Nhưng trang tải mất sáu giây, chỉ vì ôm tới năm kiểu chữ khác nhau. Mỗi kiểu lại kèm thêm vài biến thể đậm, nghiêng, mảnh. Trình duyệt phải tải về ngần ấy file, trước khi trang hiện đủ chữ cho người đọc thấy.

Font Chữ Là Yếu Tố Quan Trọng Trong Thiết Kế Website Nhưng Nhiều Người Chưa Hiểu Rõ Ảnh Hưởng Đến Tốc Độ Tải Trang

Khi nói về tốc độ website, người ta hay nhắc ảnh nặng, mã nguồn cồng kềnh, hosting yếu. Font chữ ít khi được nhắc tới. Dù nó cũng là một file phải tải về, như bao thứ khác trên trang. Đây là điểm mù quen thuộc trong nghề thiết kế web.

Chúng tôi từng làm việc cùng một đội thiết kế trẻ. Họ chọn font theo cảm hứng, ưng mắt là dùng ngay. Không ai quan tâm font đó nặng bao nhiêu kilobyte. Kết quả là trang chủ có tới bốn font khác nhau. Mỗi font lại kéo theo hai ba biến thể đậm nhạt. Cộng dồn lại, riêng phần chữ đã nặng hơn nửa megabyte, tương đương một tấm ảnh cỡ vừa.

Gốc rễ thường nằm ở khâu dựng bản nháp. Lúc chọn công cụ dựng khung giao diện miễn phí, nhiều bạn tiện tay bật vài kiểu chữ có sẵn. Mục đích chỉ để hình dung bố cục cho nhanh. Rồi quên đổi lại khi bắt tay code bản thật. Bản nháp vốn là chỗ thử nghiệm. Nhưng nếu không rà lại trước khi lên bản chính thức, font thử nghiệm cứ thế theo vào sản phẩm cuối cùng.

Một sai lầm khác chúng tôi hay gặp: khách hàng thích một bộ font nước ngoài rất đẹp. Nhưng bộ đó lại không hỗ trợ đủ dấu tiếng Việt. Nhà phát triển buộc phải tải thêm một bộ ký tự mở rộng để bù dấu hỏi, dấu ngã, dấu mũ. Vậy là dung lượng font tăng gấp đôi, chỉ để hiển thị đúng chính tả tiếng Việt.

Thiếu kiến thức về cách trình duyệt xử lý font khiến vấn đề này bị bỏ qua nhiều năm liền. Một website tối ưu tốt về ảnh, về mã, nhưng font chữ vẫn có thể kéo lùi điểm số. Công cụ đo tốc độ như Google PageSpeed sẽ bắt lỗi ngay chỗ này. Vì vậy chúng tôi luôn xếp font vào danh sách kiểm tra đầu tiên. Cách kiểm tra rất đơn giản: mở tab Network trên trình duyệt, lọc theo Font. Nhìn vào đó là thấy ngay có bao nhiêu file đang tải, và mất bao lâu.

Chúng tôi có một thói quen nhỏ trước khi bàn giao dự án cho khách. Đó là liệt kê hết font đang dùng ra một tờ giấy nháp. Font nào lặp lại mục đích với font khác thì gạch bỏ. Bước này chỉ mất mười phút, nhưng cắt được không ít font thừa. Nhiều lần chính khách hàng cũng ngỡ ngàng, vì họ không nhớ mình đã thêm bao nhiêu kiểu chữ trong lúc chỉnh sửa.

Điều Gì Khiến Việc Tải Font Làm Chậm Trang Web Đến Vậy

Mỗi font là một file riêng, y như một tấm ảnh hay một đoạn mã. Trình duyệt phải tải xong file đó, thì chữ mới hiện đúng kiểu dáng thiết kế. Trang dùng càng nhiều font, trình duyệt càng phải gửi càng nhiều yêu cầu tới máy chủ. Mỗi yêu cầu đều tốn thời gian, dù chỉ vài chục mili giây.

Một font hệ Latin cơ bản, đủ dấu tiếng Việt, thường nặng từ 20 đến 60 kilobyte. Đó là tính theo định dạng WOFF2 — định dạng nén tốt nhất hiện nay. Nghe có vẻ nhỏ, nhưng nếu trang gọi năm sáu font cùng lúc, tổng dung lượng dễ vượt nửa megabyte. Với người dùng mạng 3G hay wifi quán cà phê chập chờn, từng đó đủ khiến trang ì ạch thêm vài giây.

Font tải từ nguồn bên ngoài — phổ biến nhất là Google Fonts — còn thêm một lớp rủi ro nữa. Trình duyệt phải kết nối tới máy chủ của Google trước, rồi mới tải được file font. Nếu máy chủ đó phản hồi chậm, trang sẽ đứng hình một nhịp chờ chữ hiện ra. Người dùng ở khu vực mạng bị hạn chế truy cập ra ngoài còn gặp tình trạng này nặng hơn. Chúng tôi gọi hiện tượng này là FOIT — chữ ẩn đi cho tới khi font tải xong. Khách hàng chỉ thấy khoảng trắng trống trơn vài giây, trước khi nội dung xuất hiện.

Sai lầm phổ biến nhất ở khâu này là nhúng nguyên cả bộ font đầy đủ. Cả trăm ký tự Latin mở rộng, Cyrillic, Hy Lạp đi kèm trong một file. Trong khi trang chỉ cần bảng chữ cái tiếng Việt và vài con số. Chúng tôi từng kiểm tra một website bán hàng, phát hiện file font nặng gần 300 kilobyte. Nhưng thực tế chỉ dùng chưa tới một phần ba số ký tự có trong file đó.

Có dự án chúng tôi từng đo cụ thể. Riêng bước gọi font từ nguồn ngoài đã chiếm gần một giây rưỡi, trong tổng thời gian tải trang. Sau khi chuyển font về lưu ngay trên máy chủ của khách hàng, thời gian đó giảm còn chưa tới nửa giây. Một thay đổi nhỏ, nhưng hiệu quả nhìn thấy rõ trên báo cáo tốc độ gửi cho khách.

Cách Tối Ưu Font Chữ Để Không Ảnh Hưởng Tốc Độ Website

Việc đầu tiên chúng tôi khuyên khách hàng là giới hạn số font trong toàn bộ website. Tốt nhất chỉ nên dùng hai: một cho tiêu đề, một cho nội dung. Càng ít font, trình duyệt càng ít việc phải làm. Giao diện cũng đồng bộ hơn hẳn khi ít kiểu chữ trộn lẫn.

Ưu tiên font hệ thống khi có thể. Đây là những kiểu chữ đã có sẵn trên máy người dùng, như Arial, Segoe UI trên Windows, hay San Francisco trên máy Apple. Font hệ thống không tốn thời gian tải, vì máy không cần tải gì thêm. Chữ hiển thị ngay lập tức, không có độ trễ nào cả. Nhiều thương hiệu công nghệ lớn đã quay về dùng font hệ thống cho phần nội dung. Họ chỉ giữ font riêng cho logo và vài điểm nhấn quan trọng.

Với những font bắt buộc phải tải riêng, mấy kỹ thuật sau giúp giảm độ trễ đáng kể:

• Dùng thẻ preload để trình duyệt tải font ngay từ đầu, không phải đợi đọc hết CSS mới bắt đầu tải.
• Chuyển font sang định dạng WOFF2 thay vì TTF hay OTF cũ, dung lượng giảm được khoảng 30 đến 50%.
• Chỉ tải đúng những ký tự cần dùng, kỹ thuật này gọi là subset font, thay vì tải nguyên bộ ký tự nhiều ngôn ngữ.

Ngoài ba kỹ thuật trên, chúng tôi luôn khuyên thêm thuộc tính font-display: swap trong CSS. Nói dễ hiểu, đây là lệnh yêu cầu trình duyệt cứ hiển thị chữ bằng font tạm có sẵn trước. Đợi font chính tải xong thì đổi lại sau cũng chưa muộn. Người đọc vẫn thấy chữ ngay, không phải nhìn khoảng trắng chờ đợi như FOIT đã nhắc ở trên. Sai lầm thường gặp là quên khai báo thuộc tính này. Cả đoạn văn biến mất vài giây, dù mạng không hề chậm.

Trước khi bàn giao, chúng tôi luôn bật chế độ giả lập mạng chậm trên trình duyệt. Chọn mức 3G chậm là đủ để thấy sự khác biệt rõ rệt. Nếu chữ vẫn hiện ngay dù mạng yếu, phần font coi như đã tối ưu ổn. Nếu màn hình còn trắng trơn vài giây, phải quay lại kiểm tra từng bước ở trên.

Tốc độ chỉ là một nửa câu chuyện. Nửa còn lại là cảm giác người dùng có muốn ở lại hay không. Một trang tải nhanh nhưng giao diện rời rạc vẫn khiến khách rời đi. Chúng tôi từng thấy hiệu ứng tương tự ở việc đầu tư cho trang lỗi 404 thay vì để mặc định. Chi tiết nhỏ, nhưng đủ khiến người dùng nán lại thêm vài giây, thay vì bấm thoát ngay.

Nhiều đội nhỏ không có sẵn nhân sự kỹ thuật để tự làm hết các bước trên. Điều đó hoàn toàn bình thường trong nghề. Nếu ngân sách cho phép, có thể thuê một đơn vị dịch vụ thiết kế website bán hàng chuyên nghiệp. Họ xử lý phần tối ưu font cùng lúc với tối ưu ảnh, mã nguồn. Cách này thường tiết kiệm thời gian hơn nhiều, so với tự mò từng dòng CSS.

Chọn Đúng Font Ngay Từ Đầu, Đỡ Phải Sửa Lại Sau

Font chữ không phải chi tiết trang trí, có cũng được, không có cũng chẳng sao. Nó là một phần hạ tầng của trang web. Nó ảnh hưởng trực tiếp tới trải nghiệm, ngay từ giây đầu tiên khách ghé thăm. Việc cần làm không hề phức tạp: chọn ít font, ưu tiên font hệ thống khi hợp lý. Với những font bắt buộc phải tải riêng, cứ áp dụng preload cùng WOFF2 là đủ.

Nếu bạn đang làm lại giao diện, đây là lúc rà luôn phần font cùng những yếu tố hiển thị khác. Chúng tôi có thêm một số kiến thức thiết kế website và giao diện số về chế độ tối đáng tham khảo. Vì font đẹp trên nền sáng chưa chắc đã rõ nét khi chuyển sang nền tối. Làm tốt cả hai, trang của bạn vừa nhìn chuyên nghiệp, vừa tải nhanh, giữ chân được người đọc ở lại lâu hơn.