אופטימיזציה של הצגת מודעות CSS

הכלל הזה מופעל כששירות PageSpeed Insights מזהה שדף כולל רכיבים חיצוניים שחוסמים עיבוד גיליונות סגנונות, שמעכבים את זמן העיבוד הראשון.

סקירה כללית

כדי שהדפדפן יוכל לעבד תוכן, עליו לעבד את כל פרטי הסגנון והפריסה עבור בדף הנוכחי. כתוצאה מכך, הדפדפן יחסום את העיבוד עד שגיליונות של סגנונות חיצוניים שהורדו ועובדו, וייתכן שיהיה צורך לבצע מספר פעולות הלוך ושוב ולעכב את זמן העיבוד הראשון. ראו כדי לקבל מידע נוסף על נתיב העיבוד הקריטי, עיצוב, פריסה וציור של עץ ולעבד חסימת שירות CSS כדי לקבל טיפים לביטול חסימת הרינדור ולשיפור הצגת המודעות ב-CSS.

המלצות

אם משאבי ה-CSS החיצוניים קטנים, אפשר להוסיף אותם ישירות למסמך ה-HTML, שנקרא 'inining'. הטמעה של קוד CSS קטן באופן הזה מאפשרת לדפדפן להמשיך בעיבוד הדף. חשוב לזכור: אם קובץ ה-CSS גדול, הטמעה מלאה של שירות ה-CSS עלולה לגרום ל-PageSpeed Insights להזהיר שמוצג בחלק העליון והקבוע חלק גדול מדי מהדף שלכם באמצעות כדאי לתת עדיפות לתוכן גלוי. אם קובץ CSS גדול, תצטרכו לזהות ולהטמיע את ה-CSS הדרוש לעיבוד התוכן בחלק העליון והקבוע, ולעכב את הטעינה של שאר הסגנונות עד לאחר פרסום התוכן בחלק העליון והקבוע.

דוגמה להטמעה של קובץ CSS קטן

אם מסמך ה-HTML נראה כך: 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
והמשאב small.css נראה כך: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
לאחר מכן תוכלו להטביע נכסים חשובים של CSS באופן הבא: 
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

הטרנספורמציה הזו, כולל קביעה של CSS קריטי/לא קריטי, ב-CSS הקריטי, ודחו את הטעינה של ה-CSS שאינו קריטי, יכולה להתבצע באופן אוטומטי באמצעות מודולים של אופטימיזציה של PageSpeed עבור nginx, apache, IIS, ATS ו-Open Lightspeed מסנן prioritize_critical_css.

ראו גם loadCSS שעוזרת לטעון CSS באופן אסינכרוני, שיכול לפעול עם קריטית, כלי לחילוץ ה-CSS הקריטי מדף אינטרנט.

הסגנונות החיוניים שנדרשים כדי לעצב את התוכן בחלק העליון והקבוע יתווספו למסמך באופן מיידי. קובץ Small.css המלא נטען לאחר ציור הדף הראשוני. הסגנונות שלו מוחלים על הדף בסיום הטעינה, בלי לחסום את העיבוד הראשוני של התוכן הקריטי.

שימו לב שבקרוב פלטפורמת האינטרנט תתמוך בטעינת דפי סגנונות באופן שאינו חוסם עיבוד, בלי שתצטרכו להשתמש ב-JavaScript באמצעות ייבוא HTML.

לא מומלץ להטביע מזהי URI גדולים של נתונים

חשוב להיזהר כשמטמיעים מזהי URI של נתונים בקובצי CSS. יכול להיות הגיוני להשתמש במזהי URI קטנים של נתונים ב-CSS, אבל מזהי URI גדולים של נתונים יכולים לגרום לגודל ה-CSS שמוצג בחלק העליון והקבוע, וכך להאט את זמן עיבוד הדף.

אסור להטמיע מאפייני CSS

הטמעה של מאפייני CSS ברכיבי HTML (למשל <p style=...>) יש להימנע ככל האפשר, מפני שפעולה כזו מובילה לעיתים קרובות לכפילות בקוד. בנוסף, CSS מוטבע ברכיבי HTML חסום כברירת מחדל עם Content Security Policy (CSP).

משוב

האם הדף הזה הועיל לך?