Cách khắc phục “Đảm bảo văn bản vẫn hiển thị trong khi tải phông chữ web” trong blogspot

. Admin .

Mình có thể chắc chắn một điều đa số các trang blogspot khi kiểm tra hiệu suất bằng công cụ PageSpeed Insights của Google sẽ gặp cảnh báo “Đảm bảo văn bản vẫn hiển thị trong khi tải phông chữ web”. Cảnh báo này sẽ gây ảnh hưởng trực tiếp đến hiệu suất của trang khi tải vì khi nào font chữ cũng được tải trước để hiển thị văn bản.

blogger webfont load

blogger webfont load

Trong blogspot, mặc định font chữ được cấu hình bằng các biến variable trong b:skin để tải trực tiếp từ server của Blogger mà không cần phải chèn font từ bên ngoài. Tuy nhiên đây cũng chính là nhược điểm gây ra lỗi cảnh báo hiển thị. Do đó, phương pháp tối ưu nhất để khắc phục lỗi này là chặn tải font mặc định.

Đọc thêm: Tìm hiểu về cách chặn font, css và js mặc định của Blogger

Lưu ý quan trọng: Chặn tải font đồng nghĩa với chặn b:skin và css trong này bắt buộc phải được đưa ra bên ngoài cho nên các bạn nên cân nhắc trước khi thực hiện hoặc nếu quyết định thực hiện nên sao lưu theme trước để sau dễ phục hồi lại.

Bằng cách chặn css hiển thị theo bài viết trước, các bạn làm như sau:

Bước 1: Chặn temp css và font

Thay <head> thành &lt;head&gt;

Thay </head> thành &lt;/head&gt;

Thêm đoạn &lt;!--<head/>--&gt; ngay trước thẻ đóng </body> để đưa phần chặn nằm dưới cuối trang

Bước 2: Tạo đánh dấu bằng thẻ b:defaultmarkups và b:defaultmarkup để chứa css trong này

Ví dụ mình sẽ đánh dấu bằng thẻ b:defaultmarkups và b:defaultmarkup bằng cách ngay trước thẻ &lt;/head&gt; mà các bạn vừa thay, mình thêm đoạn sau:

<b:include name='font-face'/>

<b:include name='page-skin'/>

<b:defaultmarkups>

  <b:defaultmarkup type='Common'>

    <b:includable id='font-face'>

      <b:tag name='style'>/* <![CDATA[ */

        /* Đặt font trong này */

      /* ]]> */</b:tag>

    </b:includable>

    <b:includable id='page-skin'>

      <b:tag name='style'>/* <![CDATA[ */

        /* Đặt css trong này */

      /* ]]> */</b:tag>

    </b:includable>

  </b:defaultmarkup>

</b:defaultmarkups>

Bước 3: Xem nguồn trang

Tại trang chủ blog, chọn xem nguồn (view-source) của trang, tìm đoạn tương tự như hình minh họa bên dưới

blogger webfont load

Sao chép toàn bộ font trong phần mình bôi màu vào notepad để chỉnh sửa, thêm thuộc tính font-display:swap; cho mỗi dòng @font-face, ví dụ:

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

Khi đã thêm xong lại sao chép toàn bộ font vào trong cặp thẻ <b:includable id='font-face'> mà mình đã đánh dấu ở trên ngay dưới dòng /* Đặt font trong này */

Tiếp theo, trong nguồn trang tìm dòng <style id='page-skin-1' type='text/css'> nó nằm ngay bên dưới font sao chép toàn bộ nội dung css bên trong vào trong cặp thẻ <b:includable id='page-skin'> mà mình đã đánh dấu ở trên ngay dưới dòng /* Đặt css trong này */

Khi thêm xong, mở thẻ b:skin ra xóa toàn bộ nội dung css chỉ chừa lại các dòng biến Variable lại thôi, tiếp theo đặt thẻ điều kiện <b:if cond='data:view.isLayoutMode'> ngay trước b:skin như sau:

<b:if cond='data:view.isLayoutMode'>

  <b:skin><![CDATA[

  ]]></b:skin>

</b:if>
blogger webfont load
Hình minh họa

Cuối cùng, thêm các thẻ link cho url font ngay trước <b:if cond='data:view.isLayoutMode'>, ví dụ

<link as='font' crossorigin='' href='//fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2' rel='preload' type='font/woff2'/>

Một số bạn đang tìm kiếm font chữ web của blog mình tiện đây, mình cũng chia sẻ luôn

&lt;head&gt;

<link as='font' crossorigin='' href='//fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2' rel='preload' type='font/woff2'/>

<link as='font' crossorigin='' href='//fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2' rel='preload' type='font/woff2'/>

<link as='font' crossorigin='' href='//fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2' rel='preload' type='font/woff2'/>

<link as='font' crossorigin='' href='//fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2' rel='preload' type='font/woff2'/>

<link as='font' crossorigin='' href='//fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2' rel='preload' type='font/woff2'/>

<link as='font' crossorigin='' href='//fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2' rel='preload' type='font/woff2'/>

<b:if cond='data:view.isLayoutMode'>

  <b:skin><![CDATA[

  ]]></b:skin>

  <b:template-skin><![CDATA[

  ]]></b:template-skin>

</b:if>

<b:include name='font-face'/>

<b:include name='page-skin'/>

<b:defaultmarkups>

  <b:defaultmarkup type='Common'>

      <b:includable id='font-face'>

  <b:tag name='style'>/* <![CDATA[ */

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

@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');unicode-range:U+1F00-1FFF}

@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');unicode-range:U+0370-03FF}

@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}

@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');unicode-range:U+1F00-1FFF}

@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');unicode-range:U+0370-03FF}

@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}

@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');unicode-range:U+1F00-1FFF}

@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');unicode-range:U+0370-03FF}

@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}

@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

  /* ]]> */</b:tag>

    </b:includable>

    <b:includable id='page-skin'>

  <b:tag name='style'>/* <![CDATA[ */

  body, input, button, textarea, pre {

    font-family: Roboto,Arial,sans-serif;

    font-size: 1rem;

    -webkit-tap-highlight-color: rgba(0,0,0,0);

  }

  /* ]]> */</b:tag>

    </b:includable>

  </b:defaultmarkup>

</b:defaultmarkups>

&lt;/head&gt;
4.5/5 - (2712 bình chọn)

Admin
Admin

Viết blog dạo
Liên hệ admin qua Zalo: 0974.858.395

2 Nhận xét
  1. Tâm Miu20:39 28/12/19

    hay

    Trả lờiXóa
  2. FPT Telecom03:58 1/8/21

    ngay bước 1 mình có chèn đoạn đó vào trc thẻ đó body nhưng nó báo là ko nên chèn thẻ head vào giữa thẻ body. Bạn fix giùm mình với

    Trả lờiXóa

Cùng chuyên mục