Trong thời đại số hóa ngày nay, tốc độ trang web đóng một vai trò quan trọng trong trải nghiệm của người dùng và sự thành công của doanh nghiệp trực tuyến. Chúng ta đã thảo luận về nhiều khía cạnh để cải thiện tốc độ trang web trong các phần trước của loạt bài viết “Hướng dẫn tối ưu tăng tốc độ website nâng cao.”
Trong phần này, chúng ta sẽ bàn luận về một khía cạnh quan trọng khác của tối ưu hóa trang web – tối ưu hóa font chữ. Mặc dù có vẻ như một chi tiết nhỏ, nhưng font chữ có thể có ảnh hưởng đáng kể đến tốc độ tải trang và trải nghiệm người dùng. Vì vậy, hãy tiếp tục đọc để tìm hiểu cách tối ưu hóa font chữ trên trang web của bạn để đảm bảo nó hoạt động tốt nhất có thể.
Giới thiệu
Bạn có thể nghĩ rằng font chữ có kích thước nhỏ đến mức chúng không ảnh hưởng đến hiệu suất, nhưng thực sự chúng có ảnh hưởng hoàn toàn. Người dùng đánh giá tốc độ tải trang web của bạn dựa trên nội dung và font chữ là điều cho phép văn bản của bạn tải lên. Tải font chữ một cách hiệu quả và người dùng sẽ thấy nội dung hiển thị ngay lập tức.
Nếu thực hiện một cách không hiệu quả, người dùng sẽ thấy nhiều không gian trống (gọi là FOIT, flash-of-invisible-text)… hoặc tệ hơn, văn bản không được thiết kế đẹp mắt, tiếp theo là một đợt nhấp màn hình trước khi font chữ tải lên (gọi là FOUT, flash-of-unstyled-text). Đây là trải nghiệm thực sự gây sốc. Trang web trở nên tệ và làm cho trang web của bạn trông chậm (cả với người dùng và các kiểm tra tốc độ).
Lý do khiến font chữ trở nên chậm chạp ngày nay là do sự phong phú của các font chữ đẹp mắt miễn phí (Google fonts). Trong quá khứ, bạn phải trả tiền cho các font chữ đẹp mắt, vì vậy bạn luôn cân nhắc lựa chọn cẩn thận. Bây giờ, thậm chí một plugin miễn phí cũng có thể tải hàng trăm font chữ từ Google. Điều này làm cho việc theo dõi nơi font chữ được tải lên và dành cho văn bản nào trở nên khó khăn hơn.
Font chữ có ảnh hưởng đáng kể đến tốc độ hiển thị, không kể trang web của bạn có kích thước lớn hay nhỏ. Thực tế, một trong những chiến thuật tối ưu hóa yêu thích của tôi để tăng tốc các trang web đã nhẹ. Có nhiều yếu tố cần xem xét khi tải font chữ, tất cả đều ảnh hưởng đến thời gian tải nội dung của bạn một cách đáng kể!
So sánh font chữ hệ thống, font tải từ máy chủ cục bộ và web font
- Font chữ hệ thống – nhanh hơn so với việc tải font chữ từ máy chủ cục bộ hoặc webfont.
- Font chữ tải từ máy chủ cục bộ – nhanh hơn so với webfont và có thể được lưu trữ trên CDN hoặc trình duyệt.
- Webfont – chậm nhất, nhưng có thể tải nhanh bằng cách lưu trữ trước.
Font chữ hệ thống (đã được tích hợp vào hệ điều hành) sẽ tải nhanh hơn so với webfont từ máy chủ của bên thứ ba (như Google webfont, Adobe, Typekit, Typography.com, v.v.). Hãy biết rằng một số font hệ thống (như Arial, Helvetica) có sẵn trên cả Windows và Mac, trong khi các font hệ thống khác thì không và phải sử dụng font tương đương (như Segoe UI cho Windows và System UI cho OS X).
Tôi sử dụng font chữ hệ thống cho một số trang web của mình. Còn lại, giống như hầu hết các trang web ngày nay, cần một webfont đẹp để trang trí. May mắn là webfont ngày càng cải thiện thời gian tải của họ theo nhiều cách. Chúng ngày càng nhẹ nhàng hơn và loại bỏ các byte không cần thiết.
Webfont cũng được lưu trữ trong trình duyệt, vì vậy nếu bạn sử dụng một webfont phổ biến, có khả năng người dùng của bạn sẽ không cần phải tải lại nó (vì họ đã tải từ một trang web khác). Ngoài ra, tôi tưởng tượng rằng các webfont phổ biến của Google sẽ sớm được lưu trữ trực tiếp trong trình duyệt Chrome (nếu chúng chưa được). Tuy nhiên, trình duyệt trên điện thoại di động thường xuyên xóa bộ nhớ cache. Nhưng cũng có DNS prefetch giúp tải webfont nhanh hơn.
Font chữ được tải từ máy chủ cục bộ (nghĩa là “cục bộ” từ máy chủ của bạn) được xem như một cách cũ kỹ để tải font chữ. Nhà thiết kế web trước đây thường mua font chữ đẹp từ các trang web bên thứ ba, tải toàn bộ gói font chữ, sau đó lựa chọn cẩn thận và đưa vào trang web. Điều này là quá trình tẻ nhạt và không cho phép người dùng cuối (một cách dễ dàng) thay đổi font chữ. Nhưng vì webfont có kích thước lớn trong triển khai của họ, việc tải font chữ từ máy chủ cục bộ vẫn phổ biến trong số các nhà phát triển quan tâm đến tốc độ.
- Bạn có thể tải font chữ web từ máy chủ cục bộ bằng cách sao chép nó vào máy chủ của bạn và yêu cầu nó từ máy chủ cục bộ thay vì từ dịch vụ font chữ web bên thứ ba.
- Điều này giúp giảm đi một số yêu cầu và giảm thời gian chờ đợi (với nhược điểm nhỏ và có thể không thấy rõ).
- Tải font chữ Google từ máy chủ cục bộ – google-webfonts-helper của Mario Ranftl
- Cũng có các plugin tiện lợi như OMGF để lưu trữ font chữ Google từ máy chủ cục bộ.
- Và các công cụ như localFont của Jaime Caballero.
- Cá nhân tôi sử dụng chỉ font chữ hệ thống hoặc font chữ web được tải từ máy chủ cục bộ.
Sử dụng ít hơn font chữ
- Sử dụng chỉ một font chữ là nhanh nhất.
- Nếu sử dụng 2 hoặc 3 font chữ, hãy đảm bảo tắt đi các kiểu chữ không sử dụng!
Sử dụng ít font chữ sẽ có lợi, điều này rất rõ ràng. Nếu bạn có thể dùng chỉ một font chữ thì tốt hơn cả. Đó là cái nhìn sáng sạch nhất trong ý kiến của tôi và bạn vẫn có thể tạo ra các phong cách khác nhau bằng cách thay đổi kích thước, độ dày, khoảng cách giữa các chữ cái, kiểu chữ, màu sắc, v.v. Nhưng nếu cần, bạn có thể thêm một font chữ thứ hai dùng cho tiêu đề. Một số trang web được thiết kế chuyên nghiệp thậm chí có thể sử dụng thêm một font chữ thứ ba cho phụ đề, tiêu đề H3, trích dẫn, giá cả hoặc các khu vực văn bản được nhấn mạnh khác.
- Một số font chữ nặng hơn các font khác. Đôi khi, thậm chí một font chữ cũng có thể nặng hơn hai font chữ khác.
- Đừng quên tắt việc tải font chữ (enqueue) từ trang web của bạn. Chỉ đơn giản ngừng sử dụng nó là chưa đủ.
- Nếu bạn sử dụng hơn 2 kiểu chữ của cùng một font, bạn có thể thử sử dụng font biến. Chúng tải cùng một lượng byte bất kể bạn có bao nhiêu kiểu chữ. Đây là công nghệ font mới thú vị.
Không nên tải lên các kiểu chữ, kiểu dáng, bộ ký tự không sử dụng
Nhiều người không chú ý đến việc tải lên các kiểu chữ không sử dụng trên trang web của họ! Tôi đã thấy nhiều trang web tải tất cả các kiểu chữ (100, 200, 300, 400, 500, 600, 700) và kiểu dáng chữ (bình thường, nghiêng), và bộ ký tự (ký tự mở rộng latin, tiếng Hy Lạp, tiếng Cyrillic, v.v.)… trong thực tế, họ chỉ cần các kiểu chữ 400 (bình thường) và 700 (đậm), và chỉ bộ ký tự latin cơ bản.
- Kiểm tra trang web của bạn để xác định tất cả các kiểu chữ không sử dụng.
- Loại bỏ yêu cầu tải kiểu chữ này từ cài đặt theme và plugin.
- Cũng loại bỏ chúng khỏi phần header và các tệp stylesheet (nếu đã cài đặt thủ công).
Nếu bạn không biết bạn đang sử dụng những kiểu chữ nào thực sự, hãy tạo danh sách. Đặt liên kết đến công cụ tìm kiếm font FOUNT trong thanh đánh dấu trình duyệt của bạn và xác định tất cả các font được sử dụng trên trang web của bạn. Kiểm tra trên các bố cục trang khác nhau và nhấp vào tất cả các phần nội dung. Tiêu đề, thanh điều hướng, tiêu đề, nội dung, văn bản trong chân trang và các tiện ích. Đừng quên kiểm tra các yếu tố ẩn như carousel, pop-up, nội dung tab hoặc thu gọn. Bạn có cảm thấy quá tải không? Điều đó chỉ chứng tỏ rằng bạn đang tải nhiều hơn những gì bạn cần!
- Văn bản trong nội dung thường cần kiểu chữ bình thường (400), nghiêng (400) và đậm (700).
- Tiêu đề và phần đầu có thể sử dụng lại kiểu chữ bình thường 400 hoặc đậm 700, nhưng một số người muốn kiểu mảnh (300) hoặc kiểu cực đậm (900).
- Hầu hết các trang web không sử dụng kiểu nghiêng cho tiêu đề/phần đầu, vì vậy nếu bạn đang tải kiểu cực đậm 900 cho chúng, có lẽ bạn sẽ không cần kiểu nghiêng 900.
Dù sao thì hầu hết đều là điều hiển nhiên. Những người thủ công thêm font chữ đã nhận biết và đưa ra những lựa chọn hợp lý. Những người mới sử dụng các pagebuilder hoặc plugin để tải font chữ có thể đang tải lên các kiểu chữ, kiểu dáng và bộ ký tự không cần thiết.
Phương pháp tải font chữ
Theo ý kiến của tôi, đây là một lĩnh vực nghệ thuật và là một vùng đầy tranh cãi trong thế giới phát triển. Có nhiều cách để tải font chữ (đặc biệt là webfont), mỗi cách đều có ưu điểm và nhược điểm riêng của họ. Dưới đây, tôi sẽ để lại một số hướng dẫn tổng quan:
- Font chữ nên được tải trước nội dung – tôi không quan tâm đến FOIT hoặc render-blocking, việc tải văn bản bằng font đúng đắn ngay từ đầu sẽ mang lại trải nghiệm người dùng tốt hơn.
- Font chữ nên được tải (cẩn thận) bởi theme, không phải là một plugin. Nếu các plugin của bạn có tùy chọn font chữ/kiểu dáng chữ, hãy chọn “inherit”.
Webfont tải nhanh hơn khi được tải từ máy chủ cục bộ và có thời gian lưu trữ dài hạn. Nhưng sự khác biệt về tốc độ này không đáng kể nếu bạn đang sử dụng một webfont thông thường (nhẹ).
Vấn đề lớn nhất khi tải webfont xuất phát từ những nỗ lực của các nhà phát triển để làm cho chúng thân thiện với người dùng. Nếu bạn thủ công enqueuing chỉ một webfont và cẩn thận chèn nó vào theme, thì thường không có vấn đề gì. Vấn đề nảy sinh khi các nhà phát triển cố gắng tạo ra các danh sách thả xuống vô tận cho người dùng mới, khi đó mọi thứ trở nên rối ren và có nhiều thứ được tải lên hơn là cần thiết.
Đừng bị cuốn vào việc đọc các hướng dẫn cực kỳ chi tiết như này hoặc này. Chúng sẽ làm bạn bối rối với các phân tích chi tiết về preload và fallback. Điều quan trọng là… tải font chữ trước khi tải văn bản. Đừng để văn bản tải lên trước, vì điều này sẽ tạo ra rất nhiều sự hỗn loạn FOUT đối với các trang web WordPress quá nặng nề.
Tạo bộ ký tự con theo cách tự động
Việc tạo bộ ký tự con là một chiến thuật giảm kích thước thông minh bằng cách chỉ tải các ký tự font thực sự được sử dụng trong nội dung của bạn. Có nhiều trường hợp sử dụng mà bạn không cần tất cả các ký tự trong một font chữ. Đối với một số người, việc loại bỏ các ký tự không sử dụng đã làm cho kích thước tệp font của họ nhẹ hơn gấp 1040 lần!
- Chỉ bao gồm các ký tự latin cơ bản – nếu bạn không cần dấu nhấn, biểu tượng Ai Cập và những ký tự tương tự.
- Chỉ bao gồm ký tự viết hoa – dành cho tiêu đề và phần đầu.
- Chỉ bao gồm số – cho các số có kiểu dáng cụ thể
- Chỉ bao gồm các biểu tượng tiền tệ – nếu bạn chỉ sử dụng font này cho menu giá
- Chỉ bao gồm một số ký tự cụ thể – cho logo, tiêu đề.
- Chỉ bao gồm các ký tự thông thường – tất cả các ký tự được sử dụng trong 99% trang web.
Thường khi bạn thực hiện tối ưu hóa font đến mức này, kích thước font của bạn trở nên nhỏ đến mức chỉ cần tải chúng từ máy chủ cục bộ là hợp lý nhất. Không có ý nghĩa gì trong việc gọi Google’s font server nhiều lần chỉ để lấy được 1/3 font. Nhưng đây là quyết định của bạn để đưa ra. Tôi nghĩ nếu bạn đang tối ưu hóa thủ công đến mức này, hãy đi hết chặng đường.
- Phương pháp “tạo bộ ký tự con tải từ máy chủ cục bộ” này mang lại cho tôi các font đẹp và tải nhanh siêu nhẹ.
- Vâng, tôi bị mất đi lợi ích từ việc chúng đã được lưu trữ từ các trang web khác hoặc dễ dàng cập nhật thông qua dịch vụ lưu trữ font.
- Nhưng tương tự, chúng nhẹ hơn và cũng có thể được lưu trữ trên CDN và trình duyệt theo khoảng thời gian mà tôi chỉ định. (Cũng xuất hiện nhanh hơn trong các kiểm tra trang web.) Tổng cộng, lợi ích vượt qua các nhược điểm.
- Tôi khuyên bạn nên chỉ sử dụng định dạng WOFF2 vì nó là định dạng nén/nhẹ nhất và tương thích với tất cả các trình duyệt hiện đại. Đôi khi, các dịch vụ font sẽ tải định dạng WOFF, đây là định dạng lớn hơn nhưng tương thích với các trình duyệt cũ thực sự (không quan trọng với tôi).
Việc tạo bộ ký tự con cũng có thể mở ra khả năng linh hoạt trong thiết kế sáng tạo. Ví dụ, bạn có thể kết hợp các chữ cái của một font với các số hoặc biểu tượng từ font khác. Hoặc có thể bạn chỉ muốn một biểu tượng “&” độc đáo hoặc một ký tự đặc biệt khác vì đó là chữ cái logo tùy chỉnh của bạn. Trong trường hợp bạn đã thực hiện điều này, ít nhất bây giờ bạn biết cách thực hiện mà không cần tải toàn bộ font.
Việc tạo bộ ký tự con không chỉ giúp giảm kích thước font mà còn giúp bạn tối ưu hóa tốc độ tải trang web của mình. Điều này có lợi cho trải nghiệm người dùng và sự tốc độ của trang web của bạn.
Đặt lại font chữ thủ công
Một số người đam mê tốc độ đến mức cuồng sẽ tự chỉnh sửa font chữ thủ công để loại bỏ TẤT CẢ các ký tự và biểu tượng không cần thiết. Và tôi nghĩa là… TẤT CẢ! Chiến thuật này cực kỳ phiền toái và chắc chắn sẽ khiến bạn nhận được giải thưởng ‘Tôi không có cuộc sống’ từ phía tôi.
Công cụ duy nhất được lựa chọn ở đây không ai khác ngoài FontForge huyền thoại, được sử dụng bởi các nhà thiết kế chuyên nghiệp để tạo và chỉnh sửa font chữ mới. Nó giống như một thư viện hình ảnh khổng lồ của mọi ký tự trong font của bạn. Cho phép bạn điều chỉnh thủ công hình dạng và khoảng cách của từng ký tự với các ký tự kế bên.
Có 2 cách làm việc với FontForge:
- Giảm – tải một font và sau đó xóa các ký tự không cần thiết. (Có lẽ nên bắt đầu với một font đã được tạo bộ ký tự con trước đó.)
- Xây dựng từ đầu – mở font hiện tại và font mới cùng lúc, và sao chép qua. Con đường này hợp lý nếu bạn chỉ cần một vài ký tự.
Đúng vậy, bạn phải điên đảo để điều chỉnh đến mức này, nhưng thực sự nó làm cho font của bạn trở nên siêu nhẹ. Thật ra, tôi thấy nó rất vui (mặc dù công việc này mất thời gian). Nó là một trong những chiến thuật ít ai có thể làm cho các trang web đã nhẹ trở nên còn nhẹ hơn.
Cách tải nhiều Google Webfonts trong một yêu cầu URL
Đúng vậy, điều này quan trọng ngay cả khi bạn chỉ sử dụng 1 family font Google. Khi yêu cầu webfonts, hãy gom tất cả chúng vào một yêu cầu thay vì nhiều yêu cầu riêng lẻ. Nếu có, điều này là một thực hành để tải tất cả webfonts vào một nơi! Đừng để một số font được tải bởi theme, một số khác bởi plugin, và cứ thế.
Tối ưu Font Awesome
Tôi không thích Font Awesome (FA) nhưng có lẽ bạn thích nó hoặc không muốn thiết lập lại một theme đã được xây dựng cho FA. Dưới đây là cách bạn có thể làm cho FA trở nên nhẹ hơn, cải thiện tốc độ VÀ điểm trang!
- Chỉ cần tải nó lên từ máy chủ cục bộ.
- Có nhiều thời gian hơn? Loại bỏ các biểu tượng không sử dụng.
Nếu bạn nghĩ rằng việc xây dựng một biểu tượng font mới hoặc sử dụng SVG có thể dễ dàng hơn, có lẽ đúng… chỉ có vấn đề là bạn phải thay thế tất cả các cuộc gọi CSS đến FA.
Việc tải FA từ máy chủ cục bộ rất dễ dàng. Chỉ cần tải nó từ trang web (có thể khớp với phiên bản bạn đã có). Tải thư mục FA lên thư mục trang web của bạn, sau đó vào theme hoặc bất kỳ nơi nào FA được tải từ và thay đổi yêu cầu để tải từ trang web của bạn thay vì tên miền của FA.
Tải trước font
Bạn có cảm giác rằng nội dung của bạn không hiển thị ngay lập tức không? Bạn có thể tải trước các font trong phần tiêu đề của trang web thay vì chờ đợi CSS tải lên. Điều này cũng khiến việc tiền tải font trở nên hữu ích đối với những người có tệp CSS lớn (hoặc được kết hợp).
Tránh gọi font trùng lặp
Lỗi mà người mới học thường mắc và một lỗi mà tôi thấy xảy ra rất thường xuyên. Theme gọi một webfont (ví dụ như Montserrat của Google), pagebuilder gọi cùng một font chính xác, và plugin pop-up gọi nó thêm một lần nữa. Vì vậy bây giờ, chúng ta có 3 cuộc gọi và 30 yêu cầu đến máy chủ webfont của Google để tải cùng một font mà thôi.
- Hãy cố gắng tải font chỉ từ một nơi, ưu tiên là theme của bạn.
- Tất cả các nơi cài đặt font khác (như các plugin) nên sử dụng tùy chọn “inherit” thay vì chọn một font cụ thể.
- Cẩn thận với các plugin cho phép bạn chọn font (pagebuilder, slider, pop-up, mega-menu).
Lỗi phổ biến là người dùng nghĩ rằng họ phải chọn lại font của họ trong mọi thiết lập trang web. Đừng làm như vậy!
Hẹn gặp các bạn ở phần sau!
