Tối ưu Google Font bằng JavaScript

Một website đẹp cũng cần có một bộ Font ổn. Bạn có thể sử dụng Google Font để có được bộ Font ưng ý. Tuy nhiên, điều này ít nhiều ảnh hưởng đến tốc độ load của trang web và nó cũng làm giảm điểm hiệu suất trong PageSpeed Insights.

Có nhiều bài viết hướng dẫn tối ưu hóa Font của Google bằng thuộc tính font-display: swap. Nhưng nó chỉ khắc phục được lỗi về "webfont load" chứ không làm tăng điểm hiệu suất.

Ở bài viết này, tôi sẽ hướng dẫn cách tối ưu Font bằng JavaScript giúp bạn có thể thoải mái lựa chọn Font chữ đẹp cho website mà không lo vấn đề tốc độ nữa.

Chọn Google Font

Để chọn Font bạn cần truy cập Google Font.

Như ví dụ của tôi là Font "Montserrat" với 2 cỡ chữ "400" và "700".

Bạn cũng có thể chọn thêm nhiều kiểu Font khác và import ra 1 url duy nhất.

Sử dụng JavaScript để tối ưu Google Font

Đây là 2 cách tải Font mặc định của Google.

<!-- 1. <link> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

<!-- 2. @import -->
<style>
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
</style>

Mặc dù Google Font đã được thêm thuộc tính font-display: swap. Nhưng khi kiểm tra hiệu suất trên PageSpeed Insights vẫn bị báo lỗi liên quan đến FCP (First Contentful Paint) và LCP (Largest Contentful Paint).

Để khắc phục vấn đề này, tôi sẽ load Font bằng mã JavaScript và đặt nó ở cuối trang (Footer).

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const script_font = document.createElement('link');
        script_font.href = 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap';
        script_font.setAttribute('rel', 'stylesheet');
        document.body.appendChild(script_font);
    });
</script>

Ở dòng script_font.href bạn hãy lấy url từ mục @import mà Google cung cấp.

Sau khi thay đổi cách load Font này bạn hãy kiểm tra tốc độ website xem đã cải thiện chưa.