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

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

סקירה כללית

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

המלצות

אם משאבי ה-CSS החיצוניים קטנים, תוכלו להוסיף אותם ישירות למסמך ה-HTML. פעולה זו נקראת הטבעה. הטבעת 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 Optimization עבור 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).

משוב

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