AZ Tối ưu hóa Phông chữ của Google trong WordPress

Giải thưởng cho trang yêu cầu nhiều phông chữ web nhất sẽ thuộc về trang web đã thực hiện 718 yêu cầu phông chữ web!

Nhật ký web

Có, một số nhà thiết kế / nhà phát triển lười biếng và thêm mọi phông chữ có thể để làm cho trang web trông đẹp.

Nhưng về hiệu suất thì sao?

Cũng giống như bất kỳ tối ưu hóa nào khác, phông chữ cần có mức độ ưu tiên cao vì văn bản có thể là thứ đầu tiên người dùng nhìn thấy trong một trang web.

Hướng dẫn này sẽ chỉ cho bạn các phương pháp khác nhau để tối ưu hóa Google Fonts, đặc biệt là cho WordPress.

Sử dụng Phông chữ Hệ thống Thay thế

Bạn có nhận thấy rằng các phông chữ trong Medium.com, WordPress admin, GitHub tải quá nhanh không?

Tất cả chúng đều sử dụng phông chữ hệ thống.

/* System Fonts as used by GitHub */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* System Fonts as used by Medium and WordPress */
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

Phông chữ hệ thống là phông chữ được cài đặt sẵn trong mọi hệ điều hành. Trình duyệt của bạn không cần thực hiện thêm yêu cầu HTTP để tải xuống bảng định kiểu hoặc tệp phông chữ.

Có, không yêu cầu!

Văn bản dưới đây được hiển thị bằng phông chữ hệ thống:

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ. Lorem Ipsum đã trở thành văn bản giả tiêu chuẩn của ngành kể từ những năm 1500 khi một máy in không xác định lấy một dãy loại và xáo trộn nó để tạo thành một cuốn sách mẫu. Nó đã tồn tại không chỉ năm thế kỷ, mà còn là bước nhảy vọt vào lĩnh vực sắp chữ điện tử, về cơ bản vẫn không thay đổi. Nó được phổ biến vào những năm 1960 với việc phát hành các tờ Letraset chứa các đoạn Lorem Ipsum, và gần đây là phần mềm xuất bản trên máy tính để bàn như Aldus PageMaker bao gồm các phiên bản của Lorem Ipsum.

Không tồi phải không? 😏

Bạn sẽ không có nhiều sự lựa chọn trong thiết kế, nhưng nếu bạn muốn có hiệu suất tốt nhất, hãy sử dụng nó!

Giới hạn Họ và Trọng số Phông chữ

Có một số cách tối ưu hóa mà tôi đã đề cập bên dưới. Nhưng giới hạn họ phông chữ là điều quan trọng nhất. Tốt nhất, bạn không nên có nhiều hơn 2 (tối đa 3) họ phông chữ.

Tương tự, mỗi phông chữ sẽ có trọng số khác nhau. Nó bắt đầu từ 100 đến 900. Bao gồm mỗi trọng lượng sẽ dẫn đến một tệp phông chữ bổ sung để tải xuống. Vì vậy, hãy hạn chế số lượng trọng lượng phông chữ quá.

Nếu bạn đang nhúng trực tiếp phông chữ từ Google Fonts, bạn có thể chọn các trọng số khác nhau như sau:

hình ảnh 1

Dưới đây là một ví dụ về việc chọn họ phông chữ và trọng số trong Oxy:

cài đặt phông chữ oxy google

Tín dụng: WPDevDesign

Sử dụng Phông chữ có thể thay đổi (Mới!)

Như tôi đã đề cập ở trên, đối với mỗi trọng lượng phông chữ, trình duyệt cần tải xuống các tệp phông chữ riêng biệt. Vì vậy, nếu bạn bao gồm 400 và 700, hai tệp phông chữ sẽ được tải xuống.

Nhưng trong các phông chữ biến, bản thân một phông chữ duy nhất có thể biến đổi thành bất kỳ trọng lượng phông chữ nào.

Đây là bản demo (thử thay đổi font-weight):

Đọc thêm về phông chữ biến: https://web.dev/variable-fonts/.

Bạn có thể lọc phông chữ trong Google Phông chữ hỗ trợ phông chữ thay đổi:

hình ảnh 4

Để bạn hiểu rõ hơn, đây là sự khác biệt:

Họ phông chữ, (các) trọng số Kích thước phông chữ bình thường Kích thước phông chữ thay đổi
Roboto, 400 16 KB 20 KB
Roboto, 400 + 700 30 KB 35 KB
Roboto, 400 + 700 + 900 43 KB 35 KB
Roboto, 300 + 400 + 700 + 900 57 KB 35 KB
Roboto, 100 + 300 + 400 + 700 + 900 59 KB 35 KB

Đây là một mẫu phông chữ thay đổi có trọng số từ 100 đến 900:

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected]" rel="stylesheet" />

Kết hợp Google Fonts

Kết hợp Google Fonts sẽ làm giảm các yêu cầu HTTP. Nó sẽ không có tác động lớn đến hiệu suất với http / 2. Nhưng vẫn còn, một thực hành tốt để xem xét.

Trước khi kết hợp:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

Sau khi kết hợp:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto" rel="stylesheet">

Nếu bạn đang sử dụng FlyingPress, hãy bật “Tối ưu hóa Phông chữ của Google” và nó sẽ xử lý việc tối ưu hóa này.

Sửa lỗi Flash của văn bản ẩn

Nếu bạn đang phân tích trang web của mình bằng Google PageSpeed ​​Insights, bạn có thể đã thấy lỗi này “Đảm bảo văn bản vẫn hiển thị trong khi tải webfont”

lỗi phông chữ goole psi

Có một thuộc tính CSS hiển thị phông chữ cho biết hiển thị phông chữ dự phòng trong khi tải phông chữ hay làm cho phông chữ hoàn toàn ẩn. Nếu người dùng sử dụng kết nối chậm và bạn chưa bật dự phòng, người dùng có thể không nhìn thấy văn bản trong một thời gian, còn được gọi là Flash of Invisible Text (FOIT).

Trong Google Fonts, thêm “& display = swap” vào cuối URL sẽ khắc phục được sự cố này.

Trước khi thêm hoán đổi:

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

Sau khi thêm hoán đổi:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

FlyingPress có thể khắc phục sự cố này tự động. Tôi cũng đã phát triển một plugin độc lập cho việc này: Hoán đổi Hiển thị Phông chữ của Google.

Cũng đọc

phông chữ

Cách sửa lỗi Flash của văn bản ẩn (FOIT) trong WordPress


Tải Google Phông chữ không đồng bộ

Trình duyệt sẽ đợi cho đến khi CSS và các tệp phông chữ của nó sẵn sàng hiển thị trang? Theo ý kiến ​​của tôi, Phông chữ Google không nên chặn hiển thị vì phông chữ dự phòng có thể được hiển thị trong khi đó.

Cho phép tải Google Fonts không đồng bộ. Thêm mã sau vào :

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto" as="style" onload="this.rel="stylesheet"">

Thao tác này yêu cầu trình duyệt tải trước Phông chữ của Google trong nền (không chặn hiển thị) và làm cho nó có sẵn dưới dạng biểu định kiểu khi sẵn sàng.

Phông chữ Google nội tuyến

Có các định dạng tệp khác nhau cho các phông chữ, như ttf, otf, woff, woff2, v.v. Google Fonts CDN khá thông minh để cung cấp các tệp phông chữ khác nhau dựa trên thiết bị của người dùng.

Nhưng nếu bạn chỉ muốn hỗ trợ các trình duyệt hiện đại, thay vì liên kết với biểu định kiểu, hãy nội dòng trực tiếp nội dung css.

Định dạng phông chữ mới nhất “woff2” thường được hỗ trợ (ngoại trừ IE và Opera Mini). Nó cũng sẽ có kích thước tệp thấp nhất.

hình ảnh 3

Trước:

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

Sau (chưa được xác minh):

<style>
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
....
</style>

Bằng cách này, trình duyệt của bạn có thể giảm một chuỗi HTTP và tải xuống tệp phông chữ ngay lập tức.

Thêm gợi ý tài nguyên

Nếu bạn xem kỹ CSS Phông chữ của Google, biểu định kiểu được tải xuống từ “https://fonts.googleapis.com/”. Tuy nhiên, sau khi tải xuống tệp CSS, mỗi tệp phông chữ sẽ được tải xuống từ “https://fonts.gstatic.com”.

Trình duyệt cần thực hiện tra cứu DNS khác sau khi tải xuống biểu định kiểu. Điều này có thể thêm một chút chậm trễ.

Bằng cách thêm các gợi ý tài nguyên, chúng tôi có thể nói với trình duyệt rằng “Tôi sẽ sớm kết nối với URL này, vì vậy hãy chuẩn bị sẵn sàng cho nó 😉”.

trước khi kết nối trước
Trước khi kết nối trước
sau khi kết nối trước
Sau khi kết nối trước

Thêm dòng sau vào :

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Hoặc sử dụng plugin Pre * Party Resource Hints:

hình ảnh 2

Phông chữ Google Tự lưu trữ

Nhưng tại sao lại tự dẫn chương trình? Phông chữ Google được phân phối từ CDN siêu nhanh của họ và nó có thể đã được lưu vào bộ nhớ đệm trong trình duyệt, phải không ?!

  • Thời gian bộ nhớ cache của trình duyệt cho các bảng định kiểu là chỉ 24 giờ và 1 năm đối với tệp phông chữ.
  • Mặc dù phông chữ được phân phối từ CDN của chúng, vẫn có hai lần tra cứu DNS bổ sung và nhiều yêu cầu HTTP được xâu chuỗi.
  • Các trình duyệt đã bắt đầu triển khai bộ nhớ đệm hai phím. Có nghĩa là nếu trang web A tải xuống một phông chữ và lưu vào bộ nhớ cache, nó sẽ không khả dụng cho trang web B. Safari đã thực hiện điều này. Chrome sắp xuất xưởng. Bạn có thể đọc thêm về nó ở đây.
  • Tự lưu trữ có thể tận dụng kết nối hiện có của bạn (http / 2).

Vì vậy, tốt hơn hết là bạn nên tự lưu trữ Google Fonts!

không có máy chủ
Trước khi tự lưu trữ
tự lưu trữ
Sau khi tự lưu trữ

Làm thế nào để tự lưu trữ Google Fonts trong WordPress?

Plugin OMGF có thể tự lưu trữ Google Fonts. Nhưng tôi thấy nó khó sử dụng. Chúng tôi phải tìm kiếm các phông chữ theo cách thủ công hoặc tự động phát hiện bằng cách mở các trang.

Nếu bạn đang sử dụng FlyingPress, hãy bật “Tối ưu hóa Phông chữ của Google”. Nó sẽ đảm nhận việc tự lưu trữ, kết hợp và mọi thứ cho bạn!

hình ảnh 3

Phần kết luận

Trong tổng thể web, Google Fonts chiếm ưu thế với 75% việc sử dụng. Họ đã nỗ lực hết sức để tối ưu hóa chúng. Nhưng điều đó không có nghĩa là không còn nhiều chỗ để tối ưu hóa.

Nhiều tối ưu hóa có thể dễ dàng thực hiện bằng cách cài đặt FlyingPress như tự lưu trữ, tải trước, phông chữ dự phòng, kết hợp, tải không đồng bộ, v.v. Nhưng không có plugin nào có thể tối ưu hóa các lựa chọn thiết kế của bạn.

Thêm các phông chữ mà bạn thực sự cần, lọc ra các trọng lượng phông chữ không cần thiết và nếu có thể, hãy tự lưu trữ chúng.

Bình luận bên dưới nếu bạn có bất kỳ thắc mắc hoặc phản hồi nào. Tôi đọc và trả lời từng người trong số họ trong vòng 8 giờ!

Leave a Reply