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 kỹ thuật đó;
  • Tóm tắt ngắn gọn về kỹ thuật.

Hiểu rõ cách sử dụng font sẽ giúp bạn tăng tốc website tốt hơn nữa.

Lưu ý: Vui lòng thanh toán web font của bạn và sử dụng chúng hợp pháp. Tôi khuyên những người quản trị web nên dùng FontSpring. Họ cung cấp giấy phép hợp pháp cho webfont với giá chỉ 29 đô là mỗi font với thỏa thuận rất tốt (chỉ phải trả một lần – và trang của bạn vẫn sử dụng hợp pháp mãi mãi nếu không vượt quá 500 ngàn view một tháng).

Không cần sử dụng webfont tí nào

Điểm lợi:

  • Hoạt động ở bất cứ đâu trên mọi thiết bị;
  • Không gia tăng thêm phức tạp;
  • Không tạo bất cứ ảnh hưởng nào lên tốc độ trang.

Điểm hại:

  • Giới hạn khả năng lựa chọn font;
  • Trông font chữ có thể khá tẻ nhạt;
  • Có thể trông không được chuyên nghiệp.

Nó hoạt động trên mạng như thế nào

không dùng webfont

Trình duyệt nhận HTML/CSS từ máy chủ. Không yêu cầu các bước bổ sung.

Cách triển khai thông thường

p {font-family: "Times New Roman", Georgia, Serif;}

Sử dụng CSS font-family, lựa chọn font web an toàn trong các font mà bạn thích, theo thứ tự ưu tiên. Trình duyệt sẽ lựa chọn font để hiển thị trang web từ danh sách đó.

Ví dụ về trang sử dụng phương thức này

Ví dụ về phiên bản của trang này (trang gốc varvy tiếng Anh) không sử dụng webfont để bạn kiểm tra và xem phương thức sử dụng: https://varvy.com/pagespeed/webfonts/nofont.html

Lưu ý về phương thức này

Phương thức này là cách nhanh nhất, đơn giản nhất và phổ biến nhất để hiển thị font. Chẳng thành vấn đề là phương thức font khác bạn đang sử dụng là gì, đây vẫn là phương thức dự phòng mặc định cho các thiết bị và trình duyệt cũ vì thế bạn cần để ý xem trang của bạn sẽ trông như thế nào khi sử dụng nó.


Nội tuyến font vào trong HTML

Điểm lợi:

  • Không bổ sung lời gọi mạng để nhận được font;
  • Không phụ thuộc vào bên thứ ba;
  • Không có hiện tượng Flash của văn bản chưa được định dạng (FOUT);
  • Sử dụng bất cứ font nào mà bạn muốn.

Điểm hại:

  • Làm cho tệp HTML lớn hơn;
  • Đặt font vào tuyến hiển thị quan trọng;
  • Chỉ nhanh nếu bạn đã nội tuyến CSS từ trước vào trong HTML;
  • Chỉ nhanh khi mà bạn có CSS rất nhỏ;
  • Chỉ là lựa chọn hợp lý nếu trang của bạn không sử dụng nhiều hơn một font;
  • Không được hỗ trợ bởi các trình duyệt cũ (khi sử dụng định dạng font .woff);
  • Font phải tải lại mỗi khi trang được xem.

Cách nó hoạt động trên mạng

nội tuyến webfont

Trình duyệt nhận file HTML từ máy chủ. Không cần kết nối mạng bổ sung. HTML lớn hơn 10K trong các tình huống được tối ưu hóa.

Cách triển khai thông thường

@font-face{font-family:'robotolight';src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRg .... AAA==) format('woff');font-weight: normal;font-style: normal;}

Font chữ được mã hóa base64 & được thêm nội tuyến vào trong CSS nằm trong file HTML.

Ví dụ về trang sử dụng phương thức này

Chính trang gốc tiếng Anh của bài dịch này sử dụng phương thức nội tuyến font vào HTML: https://varvy.com/pagespeed/web-font-options.html

Lưu ý về phương thức này

Trang Varvy đang sử dụng phương thức nội tuyến font vào HTML. Nó không được nhiều người khuyên dùng, và chỉ hoạt động tốt với những trang đơn giản và được tối ưu rất tốt. Phương thức này dễ bị nhầm lẫn với phương thức nội tuyến font vào trong file CSS ngoài (cái sẽ được mô tả trong phương thức kế tiếp).

Có một vài lý do chính đáng cho việc bạn không nên sử dụng font nội tuyến vào HTML. Một trong các lý do chính là cache (không được bộ nhớ đệm của trình duyệt lưu lại). Phương thức này làm cho font của bạn phải tải lại mỗi lần trang được xem, điều này là khá ngớ ngẩn với hầu hết mọi người, nhưng sẽ có tác dụng giúp trang web nhanh hơn trong một số điều kiện nào đó. Phương thức này cũng gần như chắc chắn làm cho file HTML của bạn vượt quá 14KB, đây cũng là điều không được khuyến khích.

Vậy tại sao tôi vẫn sử dụng nó trên trang này? Bởi vì đây là cách nhanh nhất với trang của tôi. Điều này sẽ không đúng nữa nếu áp dụng cho các trang khác. Tôi có thể loại bỏ các rắc rối vì CSS của tôi rất nhỏ gọn mà nó cũng được nội tuyến từ trước rồi, trang web của tôi trông sẽ vẫn tốt nếu font không hoạt động, đa số người dùng của tôi sử dụng trình duyệt hiện đại và bởi vì tôi đã thiết kế trang này chỉ tạo ra rất ít lời gọi tới máy chủ gốc.

Hầu hết các chuyên gia đã chính xác và đúng đắn khi nói rằng phương thức này là ý tưởng tồi tệ. Dầu vậy, các trang mà họ nói cái này là ý tưởng tồi tệ tải chậm hơn so với trang của tôi (đoạn này Varvy thật tự tin ghê!).


Nội tuyến font vào trong CSS ngoài

Điểm lợi:

  • Không bổ sung lời gọi mạng để nhận font;
  • Không dựa vào bên thứ ba;
  • Không xảy ra hiện tượng Flash (nháy) cho các văn bản chưa được định dạng (FOUT);
  • Sử dụng bất cứ font nào mà bạn muốn;
  • Có lưu bộ nhớ đệm trình duyệt.

Điểm hại:

  • Đặt font vào tuyến hiển thị quan trọng;
  • Làm tăng kích cỡ file CSS;
  • Chỉ là lựa chọn khả thi nếu trang của bạn sử dụng không nhiều hơn một font;
  • Không hỗ trợ bởi các trình duyệt cũ (khi sử dụng định dạng font .woff).

Nó hoạt động thế nào

nội tuyến font vào trong css

Trình duyệt nhận HTML và CSS từ máy chủ. Không cần các bước kết nối mạng bổ sung. File CSS lớn hơn 10KB trong các tình huống được tối ưu hóa.

Ví dụ về trang sử dụng phương thức này

Phiên bản của trang này sử dụng font css nội tuyến để bạn kiểm tra và xem cách thức sử dụng: https://varvy.com/pagespeed/webfonts/inlinecss.html

Lưu ý về phương thức này

Phương thức này cho phép trang tải nhanh và font hiển thị có khả năng được cache vào bộ nhớ trình duyệt. Tôi sẽ nói rằng nó là giải pháp tuyệt vời cho các trang chỉ sử dụng một font chữ mà nó đã được tối ưu sẵn cho tốc độ. Phương thức này đặt font trực tiếp vào trong CSS, cái mà trang của bạn đã tải từ trước (sẽ giúp các lần tải sau được nhanh hơn).

Nội tuyến font vào trong CSS không phải là lựa chọn tốt nếu bạn sử dụng hơn một font hoặc nhiều hơn một font weight (độ đậm nhạt của font). Nó cũng không phải là giải pháp tốt cho các trang chỉ sử dụng font chữ rất ít.

Tôi coi đây là một cách nâng cao để hiển thị font chữ, và như vậy tôi khuyến nghị bạn khám phá các lựa chọn khác trước khi thử cách này.


Tự self host font chữ

Điểm lợi:

  • Được hỗ trợ bởi hầu hết trình duyệt và thiết bị;
  • Không phục thuộc vào bên thứ ba;
  • Sử dụng đa dạng kiểu font và mức độ đậm nhạt;
  • Phương pháp hiện đại và tài liệu hướng dẫn tốt;
  • Bộ nhớ cache cũng tốt.

Điểm hại:

  • Yêu cầu thêm kết nối mạng;
  • Có hiện tượng Flash cho văn bản chưa được định dạng (FOUT).

Đây là cách được khuyến nghị và an toàn để phục vụ font web của riêng bạn. Hãy để trình duyệt lựa chọn font lý tưởng dựa trên trình duyệt của người dùng hoặc thiết bị. Đơn giản để triển khai và có tài liệu hướng dẫn phong phú.

Nó hoạt động thế nào?

tự host webfont

Trình duyệt nhận HTML và CSS từ máy chủ web. Trình duyệt tìm đường dẫn của font. Trình duyệt yêu cầu font từ máy chủ web. Máy chủ web phân phối file font.

Cách triển khai thông thường

@font-face { font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }

Hướng dẫn CSS cung cấp đường dẫn tới file font khác. Trình duyệt sử dụng thông tin này để lựa chọn font nào cần tải và sử dụng sau đó.

Ví dụ về trang sử dụng phương thức này

Phiên bản của trang này (bản gốc tiếng Anh) sử dụng phương pháp tự host font bên ngoài để bạn kiểm tra và xem cách nó được sử dụng: https://varvy.com/pagespeed/webfonts/selfhostfont.html


Sử dụng font của bên thứ ba

Giải pháp sử dụng font của bên thứ ba phổ biến là Google fontsTypepad.

Điểm lợi:

  • Triển khai đơn giản;
  • Miễn phí các lựa chọn;
  • Có nhiều font và định dạng cho bạn chọn lựa.

Điểm hại:

  • Thường là lựa chọn chậm nhất;
  • Có thể gây ảnh hưởng lớn đến tốc độ trang;
  • Vẫn có hiện tượng Flash của văn bản chưa được định dạng (FOUT);
  • Là nguyên nhân làm bổ sung các yêu cầu để tải trang;
  • Làm cho trang của bạn gặp vấn đề nếu bên thứ ba có vấn đề (điểm thất bại duy nhất/single point of failure).

Font của bên thứ ba thường là lựa chọn chậm nhất để hiển thị font cho web. Điều này đặc biệt chính xác với điện thoại di động.

Font của bên thứ ba yêu cầu trang của bạn tải font từ máy chủ khác với máy chủ của bạn. Điều này có thể là nguyên nhân rắc rối nếu máy chủ khác đó gặp vấn đề, và thậm chí có thể ngăn không cho trang web của bạn hiển thị một chút nào.

Font của bên thứ ba rất dễ sử dụng, thường đơn giản là chỉ cần copy và paste với một dòng code là xong. Đây là lý do chính nó được sử dụng rất phổ biến.

Khi sử dụng font của bên thứ ba, lời khuyên trọng tâm của tôi là nên sử dụng ít font nhất có thể, lý tưởng nhất là chỉ một font với một mức độ đậm nhạt.

Nó hoạt động thế nào

webfont của bên thứ ba

Trình duyệt nhận trang từ máy chủ của bạn. Trang thực hiện yêu cầu đến máy chủ của bên thứ ba. Bên thứ ba phân phối file CSS cho trình duyệt. Trang tạo yêu cầu mới cho máy chủ bên thứ ba. Máy chủ bên thứ ba phân phối font chữ phù hợp.

Triển khai thông thường

<link href="http://fonts.googleapis.com/css?family=Abel" rel="stylesheet" type="text/css" />

Bên thứ ba cung cấp một đoạn code nhỏ giống như bên trên. Nó được đặt vào phần đầu của file html.

Ví dụ về trang sử dụng phương thức này

Phiên bản của trang sử dụng phương thức font của bên thứ ba để bạn kiểm tra và xem xem nó được dùng như thế nào: https://varvy.com/pagespeed/webfonts/third-party.html


Chọn một phương pháp sử dụng font web

Mỗi phương pháp font cho web đều có điểm lợi và điểm hại riêng. Đánh giá của tôi về từng phương pháp theo tiêu chí khác nhau sẽ là…

An toàn nhất:

  • Không sử dụng web font
  • Tự host lấy font
  • Sử dụng font của bên thứ ba
  • Nội tuyến font vào CSS
  • Nội tuyến font vào HTML

Đơn giản nhất:

  • Không sử dụng web font
  • Sử dụng font của bên thứ ba
  • Tự host lấy font
  • Nội tuyến font vào CSS
  • Nội tuyến font vào HTML

Hỗ trợ rộng nhất:

  • Không sử dụng web font
  • Tự host lấy font
  • Sử dụng font của bên thứ ba
  • Nội tuyến font vào CSS
  • Nội tuyến font vào HTML

Tốc độ:

  • Không sử dụng web font
  • Nội tuyến font vào HTML
  • Nội tuyến font vào CSS
  • Tự host lấy font
  • Sử dụng font của bên thứ ba

(Dịch từ bài viết: Webfont options and speed – Tác giả: Patrick Sexton – Website: Varvy)