Render-Blocking Resources, איך לטפל

Render-blocking resources זה כל קוד (CSS או JS) שעוצר את הצגת הדף עד שהוא נטען ועובד.

בברירת מחדל, browsers מעבדים HTML מלמעלה למטה. אם בתוך ה-head יש קישור ל-CSS חיצוני, ה-browser עוצר, מוריד את ה-CSS, מעבד, ורק אז ממשיך.

בזמן הזה, הקורא רואה דף ריק.

הסוגים

CSS

כל קישור ל-stylesheet ב-head הוא render-blocking.

JS

כל script tag ב-head שלא async או defer הוא render-blocking.

Fonts

שטעינה של fonts יכולה לעצור את הדף עד שהם זמינים.

איך לפתור

CSS

1. Critical CSS inline

הCSS הקריטי inline, השאר async. (ראיתי במאמר נפרד.)

2. Async CSS

<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">

JS

1. defer

תוסיפו defer לscripts:

<script src="main.js" defer></script>

הbrowser מוריד את הJS במקביל לפרסור ה-HTML, ומריץ אחרי הפרסור.

2. async

אותו דבר כמעט, אבל הסדר לא מובטח. טוב לסקריפטים שלא תלויים זה בזה.

3. הזיזו לbottom

טכניקה ישנה. סקריפטים בסוף ה-body לא render-blocking.

Fonts

1. font-display: swap

ב-CSS:

@font-face {
  font-family: 'MyFont';
  font-display: swap;
}

הbrowser ייצג את הטקסט ב-fallback font עד שה-custom font נטען.

2. preload

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

איך לזהות

PageSpeed Insights יציג רשימת "Eliminate render-blocking resources" אם יש בעיות.

טעויות נפוצות

טעות 1, async ל-CSS חיוני

אם ה-CSS חיוני לעיצוב הדף, async יגרום ל-FOUC.

טעות 2, defer לlibraries אחרים

אם library דורש את libraries אחר, defer יכול לשבור את הסדר.

טעות 3, להאמין שזה הכל

render-blocking הוא אחד מהגורמים. יש גם גודל קובץ, מספר requests, server speed.

סיכום

render-blocking resources הם הסיבה הכי נפוצה ל-LCP גרוע. תזהו, תתקנו, ותקבלו דף שטוען מהר.

רוצה עזרה ממוקדת ל-SEO באתר שלך?

אני שמוליק דורינבאום — יועץ SEO ב-20+ שנות ניסיון. אם המאמר הזה נתן לך כיוון ואתה רוצה ליישם על האתר שלך, יש לי קורס קידום אתרים חינמי מלא, או שאפשר לקפוץ לשיחת ייעוץ אישית.

לקורס החינמי → לייעוץ אישי