Tăng tốc webfont tăng ngay 12% tốc độ load

Mình sẽ chia sẻ thủ thuật giúp website của bạn tăng 12% tốc độ load khi loại bỏ font chữ, sử dụng font quen thuộc của khách hàng dễ đọc, không bao giờ bị flash nháy font chữ giật khó chịu.

Font chữ là gì?

Một kiểu chữ là thiết kế của chữ [1] có thể bao gồm các biến, chẳng hạn như thêm đậm, đậm, thường xuyên, ánh sáng, nghiêng, ngưng tụ, mở rộng, vv Mỗi một biến thể của kiểu chữ là một phông chữ định nghĩa của wikipedia.

Font chữ khái niệm đơn giản do wp tăng tốc định nghĩa ra: giống như học cấp 1 bạn thường được giao viên dạy bắt luyện chữ, chữ xấu bạn cũng hiểu được chữ đẹp bạn cũng hiểu được, giao viên dạy bạn luyện chữ đẹp đó là font chữ.

nếu bạn là marketing chuyên nghiệp có thể hiệu font chữ này có ý nghĩa là tăng doanh thu thì hãy sử dụng và hoan ghênh bạn sử dụng.

Tuy nhiên trong chúng ta không phải ai cũng biết cách sử dụng font chữ chuyên nghiệp thấu hiểu font chữ dùng nào cho tuyệt vời khách hàng, nhưng người không biết ý nghĩa sử dụng font chữ trong đó có mình.

Nếu bạn không hiểu font chữ ý nghĩa thì đừng có bừa!, đừng nghĩa dùng font chữ thể hiện sự cao cấp dối lòng ( đó là thứ khiến chúng ta sử dụng font chữ bừa bãi) tác lợi thì chưa biết tác hại thì có rồi nhé khiến website của bạn load chậm đi.

Sử dụng font chữ nó tăng khả năng hiệu xuất? hay không sử dụng font chữ?

Font chữ đẹp có phải là thứ khách hàng yêu cầu trang web của bạn có phải là cách dễ dàng nhất để người dùng tiếp cận nội dung không?

Có 3 cách để sử dụng font chữ trên website.

• Google font tài nguyên bên thứ 3
• Lưu chữ font chữ tại host
• Font chữ mặc định của trình duyệt

Mỗi một cách sử dụng font chữ sẽ có một cách để ưu thế vượt trội.

Tuy nhiên WP Tăng Tốc là một blogger chia sẻ về thủ thuật tăng tốc độ load website và ux thiết kế thì mình sẽ tập trung vào điều đó.

Đừng ham thích. Đơn giản hóa. Đừng chạy theo sự nổi tiếng bầy đàn. Đối mặt với nó. Người đọc nội dung không quan tâm đến phông chữ nhiều như ý thích của chủ sở hữu trang web. Từ bỏ bóng bẩy

Đơn giản là sự tinh tế tối thượng

Một cảm giác cao cấp dối lòng để biện minh cho việc giữ các phông chữ trang trí.

Ưu nhược điểm của font chữ google font đây là cách nhiều người sử dụng nhiều nhất

Ưu điểm:
dễ dàng cài đặt nên rất nhiều người sử dụng và các themes muốn bán nhiều để khách hàng tùy biến hay dùng cái này để khách hàng thoải mái lựa chọn
dùng tài nguyên webhost giảm được một chút tài nguyên sử dụng webhost của bạn.

Nhược điểm:

Load không cache được, làm chậm website.
Tối ưu không tối sẽ bị giật font chữ gây khó chịu cho người dùng css Display-font:

Font chữ lưu chữ tại webhost

Ưu điểm :
cache được load nhanh hơn font chữ dùng google font.
Dễ dàng chỉnh sửa tối ưu hơn.
Nhược điểm:
tốn tài nguyên webhost.

Hầu hết không nhận ra các font web thêm các yêu cầu câu hỏi HTTP máy chủ và ảnh hưởng đến thời gian phản hồi của máy chủ, tốn tài nguyên máy chủ

Font chữ trình duyệt mặc định có nghĩa là không mất thời gian trao đổi thông tin. Hệ thống phản hồi với thông tin phông chữ ngay lập tức. Chúng tôi khuyên bạn không nên sử dụng Phông chữ Google – hoặc bất kỳ phông chữ nào khác được lưu trữ từ máy chủ từ xa.

Bạn càng sử dụng nhiều phông chữ, thời gian tải trang nặng nền hơn webhost phải làm việc hơn ngắn gọn là tồi tệ hơn

Có những thủ thuật khác được các tác giả và lập trình viên plugin khác nhau quảng cáo là có lợi. Chúng bao gồm các phông chữ tải chậm hoặc giảm bộ ký tự phông chữ. Đây là những chất thải bí truyền của năng lượng.

Plugin OMGF dùng để lưu trữ cục bộ các phông chữ của Google. mình đã đã thử nó và không ấn tượng và không ngon cho lắm.

Hầu hết không nhận ra các font web thêm các yêu cầu câu hỏi HTTP máy chủ và ảnh hưởng đến thời gian phản hồi của máy chủ, tốn tài nguyên máy chủ

Font chữ mặc định của trình duyệt

Với nhu cầu đa số 99% mọi người trong đó có tôi thì cách này sẽ dành cho tăng tốc đáng kể tốc dộ load, ngoài chữ bạn là dân marketing chuyên nghiệp thấu hiểu ý nghĩa lợi ích sử dụng font chữ ra sao font này giúp tăng doanh thu như thế nào.

cách là phương pháp tăng tốc độ load website rất tốt nếu bạn là người không đòi hỏi nhu cầu về font chữ.

Ưu điểm khi sử dụng font chữ mặc định trình duyệt:

Phông chữ nhanh nhất là phông chữ mà bạn không bao giờ phải đưa ra yêu cầu.

Trong quá khứ, đó là những phông chữ an toàn cho web phổ biến như Arial, Verdana và Georgia. Đây là trên 99,9 phần trăm máy tính. Phông chữ cuối cùng được chỉ định trong ngăn xếp phông chữ là phông chữ mặc định sans-serif hoặc serif.

Phông chữ System-UI là tốt nhất để dễ đọc trên màn hình di động smartphone, khách hàng đã quen thuộc với font chữ mặc định của trình duyệt từ lâu rồi.

Thói quen là thứ giúp người dùng dễ dàng hơn.

Đây là các cài đặt phông chữ mặc định trong các các trình duyệt web như chrome, cốc cốc, filefox… Các chủ đề như chủ đề Twenty-nineteen mặc định của WordPress hoặc GeneratePress hoặc Astra. Họ sử dụng thủ thuật mã hóa ngăn xếp phông chữ Cascading Style Sheet (CSS). Có vẻ như định nghĩa mã này:

Để có tốc độ tốt nhất, hãy chấp nhận số phận của bạn. Hy sinh các phông chữ tùy chỉnh ưa thích và thay vào đó sử dụng phông chữ hệ thống load ngay lập tức.

Khi bạn sử dụng font chữ mặc định của trình duyệt bạn không cần phải quan tâm tối ưu làm sao, preconnect, preload thế nào, font-display: swap; có hợp lý không… theo nguyên tắc tải mặc định của trình duyệt nó sẽ không hiển thị chữ khi bạn sử dụng font mà file font chữ đó bạn chưa tải và phân tích xong mà nhọ cái là font chữ nó ưu tiên thứ tự tải rất kém gần như là những file cuối cùng của website.

Nhược điểm:
Nếu bạn là dân marketing chuyên nghiệp thấu hiểu font chữ thì bạn có thể kết hợp thêm cách lưu trữ tại webhost.
Font chữ mặc định mình đã thử test thì nó hoạt động tốt hết mọi tình huống trừ một huống với các trình duyêt cũ đó là font to cực đại font-weight: 900; thì chữ ‘ê’ sẽ bị lỗi nhé. nhưng kéo font-weight: 800; mọi thứ rất ngon nhưng sử dụng bình thường thì chả ai kéo đến font-weight: 900; để sử dụng đọc lồi mắt ra mất kakakak.

Làm như thế nào để sử dụng font chữ mặc định trình duyệt

Bạn dùng css để khai báo sử dụng font chữ mặc định của trình duyệt cho vào file style.css đặt nó xuống cuối cùng file style.css
Phương pháp 1:

body{font-family: -apple-system, system-UI, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}

Hoặc nến theme của bạn bị chặn chuyển đổi font chữ.

body{font-family: -apple-system, system-UI, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important}

Phương pháp 2: mình đang sử dụng

body{font-family: sans-serif;}

Phương pháp 3: điện máy xanh đang sử dụng rất là hay

body{font-family: Arial,Helvetica,sans-serif;}

bạn dùng phương pháp nào cũng được tùy vào sở thích của bạn, đây là các kiểu sử dụng font chữ mặc định của trình duyệt rất tuyệt vời.

Nếu tối ưu nhất bạn hãy vào file style.css tìm đến các lệnh font-family: thay đổi từng cái cũng được.

Ví dụ themes flatsome họ tích hợp sẵn font lato, bạn vào chỉnh sửa theo nhu cầu font mặc định của cá nhân bạn…

bạn hãy xóa google font được tích hợp mặc định trong themes website của bạn đi thì sẽ có 2 cách phổ biến:

một là sửa xóa trực tiếp thằng file themes nhưng nhược điểm là cái này cập nhật sẽ bị mất mà themes cha họ code google font chỗ nào nhiều bạn cũng không biết tìm để chỗ nào mua sửa mà còn sửa lỗi xóa nhiều cái không chính xác thì toang, hãy đến với cách 2 nhé.

Và cách 2 là thêm đoạn code này vào file functions.php của child themes rồi đưa đoạn code này vào:

add_action('template_redirect', 'wptangtoc_disable_google_fonts');
function wptangtoc_disable_google_fonts() {
	ob_start('wptangtoc_disable_google_fonts_regex');
}

function wptangtoc_disable_google_fonts_regex($html) {
	$html = preg_replace('/<link[^<>]*\/\/fonts\.(googleapis|google|gstatic)\.com[^<>]*>/i', '', $html);
	return $html;
}

mình có làm video chia sẻ hướng dẫn cách chuyển đổi font chữ mặc định của trình duyệt bạn có thể tham khảo:

Nên sử dụng font chữ nào là tốt nhất cho tôi

Nếu bạn là người dùng cơ bản hay là blogger, hay yêu sự đơn giản, yêu tốc độ load website thì hãy sử dụng font chữ mặc định của trình duyệt tăng tốc thời gian load website đáng kể và bạn không cần phải bận tâm việc tối ưu font chữ ra sao như thế nào, lỗi này lỗi kia nữa.

Nếu bạn là dân marketing chuyên nghiệp thấu hiểu font chữ thì hãy lưu trữ font chữ tại webhost.

Nếu bạn đang dùng font chữ nội bộ trong webhost thì hãy nghiên cứu kỹ thuật preload hay nếu bạn dùng font chữ tải tài nguyên bên thứ 3 thì hãy nghiên cứu kỹ thuật preconnect và đặc biệt là nhớ thêm thuộc tính crossorigin sẽ giúp website của bạn tăng tốc đáng kể tốc độ đấy.

Mình có chia sẻ bài viết về: thứ tự tải tối ưu cho website WordPress bạn có thể tham khảo, mình có hướng dẫn thay đổi thứ tự tải của font chữ luôn.

Mình không thích kỹ thuật font-display: swap; cho lắm làm giảm trải nghiệm người dùng mà font-display: swap; được cái hack điểm google page speed cũng ok phết, theo cá nhân mình 1 là dùng mặc định còn 2 là xóa, không có font-display làm gì.

Bài viết này mình chỉ sẽ một phần trong tối ưu webfont là sử dụng font chữ mặc định bài viết khác mình sẽ cập nhật các thủ thuật tăng tốc webfont và webfont icon…