Cách trì hoãn phân tích phông chữ đang tải trên Blog

Cách trì hoãn (Trì hoãn) Phân tích phông chữ đang tải trên Blog - Việc trì hoãn tải phông này nhằm giảm tải tải blog từ các phông chữ, do đó, nếu không có phông chữ trong tải blog chính, điều này sẽ tăng tốc độ tải blog của bạn.



Với công nghệ phân tích cú pháp trì hoãn này, việc tạo phông chữ sẽ được tải sau khi tải blog chính xong, do đó, điều này sẽ có tác động tiêu cực đến sự xuất hiện của blog của bạn, trong một vài giây không sẽ hiển thị một phông chữ phù hợp với phông chữ tùy chỉnh của blog của bạn, nhưng sau đó phông chữ sẽ trở lại bình thường sau khi tải phông chữ bị trì hoãn tải xong.

Các tác động tiêu cực của kỹ thuật sẽ được cảm nhận khi bạn truy cập blog của mình thông qua điện thoại di động có trình duyệt cũ, các phông chữ tùy chỉnh nên được tải sau khi tải chính hoàn tất, trong các trình duyệt cũ, việc tải này không xảy ra, do blog không hiển thị phông chữ tùy chỉnh và chỉ hiển thị phông chữ an toàn trên web. không thú vị

Nhưng tất cả những tác động tiêu cực này đều có giải pháp và sẽ bị che dấu bởi kết quả tốc độ ngày càng tăng của blog của bạn. Ngay lập tức, chúng tôi đi đến hướng dẫn, phương pháp này thực sự không chỉ dành cho nền tảng blog, tất cả các nền tảng như wordpress, weebly, github cũng có thể làm theo hướng dẫn lần này.

Trì hoãn phân tích cú pháp (Trì hoãn phân tích cú pháp) Phông chữ tùy chỉnh trên Blog
Đầu tiên, vui lòng vào menu chỉnh sửa HTML của blog của bạn.
Đối với Blogger = Chủ đề (Chủ đề) >> Chỉnh sửa HTML

Sau đó, vui lòng truy cập Google Fonts để tìm phông chữ tùy chỉnh cho blog của bạn, nhưng nếu bạn đã có một phông chữ tùy chỉnh, không cần phải tìm kiếm lại. Dưới đây là một ví dụ tôi sẽ sử dụng phông chữ Roboto tùy chỉnh với Trọng lượng 400 và 700 để sau này tôi đưa lên blog. Nếu chúng tôi tìm kiếm trên Google Fonts, chúng tôi sẽ được cung cấp mã script phông chữ css như thế này.

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

Trước khi đưa nó lên blog, trước tiên chúng tôi cung cấp cho nó Trình tải xuống Javascript, vì vậy nó giống như thế này.

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.googleapis.com/css?family=Roboto:400,700");//]]>
</script>

Lưu ý: Thay đổi liên kết phông chữ mà tôi đã đánh dấu bằng liên kết phông chữ của bạn.

Nếu bạn có nhiều phông chữ tùy chỉnh trên blog của mình, bạn có thể thêm một liên kết phông chữ khác vào phân tích cú pháp trì hoãn JavaScript như bên dưới. Để làm ví dụ, tôi sử dụng một Biểu tượng Vật liệu phông chữ tùy chỉnh (Phông chữ Tuyệt vời).

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.googleapis.com/css?family=Roboto:400,700");loadCSS("https://fonts.googleapis.com/icon?family=Material+Icons");//]]>
</script>

Sau khi tạo xong tập lệnh, đặt tập lệnh bên trên mã </body>. Sử dụng nó ...

Lưu ý: Thay đổi văn bản mà tôi đã đánh dấu bằng tên của phông chữ bạn đang sử dụng.

để sử dụng phông chữ trên các yếu tố của blog của bạn. Với họ phông chữ này, bạn có thể thay thế phông chữ Roboto bằng phông chữ hệ thống nếu phông chữ Roboto không tải được bởi tập lệnh phân tích cú pháp trì hoãn.

Khi tất cả đã xong, bấm Lưu Mẫu .

Hãy thử mở trang blog của bạn, nó chắc chắn sẽ cảm thấy nhanh hơn bình thường.

Kỹ thuật này rất phù hợp với các blog không phải AMP, bởi vì kỹ thuật này thực sự làm cho blog của bạn tải như không có phông chữ. Nếu tại AMP, có lẽ chúng ta chỉ sử dụng kỹ thuật @ font-face để tối đa hóa việc tải phông chữ trên blog.

Đó là tất cả hướng dẫn của tôi về Cách trì hoãn (Trì hoãn) Phân tích phông chữ Đang tải trên Blog này, hy vọng nó sẽ hữu ích cho tất cả các bạn và chúc may mắn

Không có nhận xét nào