הצגת משאבים המבוססים על טקסט צריכה להתבצע בעזרת דחיסת נתונים כדי לצמצם את כמות הבייטים שמועברים ברשת. בקטע 'הזדמנויות' בדוח Lighthouse מפורטים כל המשאבים מבוססי הטקסט שלא עוברים דחיסה:
איך Lighthouse מטפל בדחיסת טקסט
Lighthouse אוסף את כל התשובות ש:
- צריכים להיות לכם סוגי משאבים מבוססי-טקסט.
- אין לכלול כותרת
content-encodingשמוגדרת ל-br, ל-gzipאו ל-deflate.
לאחר מכן, מערכת Lighthouse דוחסת כל אחד מהם באמצעות GZIP כדי לחשב את החיסכון הפוטנציאלי.
אם הגודל המקורי של התגובה הוא פחות מ-1.4KB, או אם החיסכון הפוטנציאלי מדחיסה הוא פחות מ-10% מהגודל המקורי, Lighthouse לא יסמן את התגובה הזו בתוצאות.
הפעלת דחיסת טקסט בשרת
כדי לעבור את הביקורת הזו, צריך להפעיל דחיסת טקסט בשרתים שהציגו את התשובות האלה.
כשדפדפן מבקש משאב, הוא משתמש בכותרת הבקשה של ה-HTTP Accept-Encoding כדי לציין באילו אלגוריתמים של דחיסה הוא תומך.
Accept-Encoding: gzip, compress, br
אם הדפדפן תומך ב-Brotli (br), כדאי להשתמש ב-Brotli כי הוא יכול לצמצם את גודל הקובץ של המשאבים יותר מאשר אלגוריתמי הדחיסה האחרים. מחפשים את how to enable Brotli compression in <X>, כאשר <X> הוא שם השרת. נכון לדצמבר 2022, יש תמיכה ב-Brotli בכל הדפדפנים העיקריים, מלבד Safari ב-iOS. למידע על עדכונים, ראו תאימות דפדפן.
שימוש ב-GZIP כחלופה ל-Brotli. GZIP נתמך בכל הדפדפנים המובילים, אבל הוא פחות יעיל מ-Brotli. דוגמאות מפורטות זמינות במאמר הגדרות שרת.
השרת צריך להחזיר את הכותרת Content-Encoding של תגובת ה-HTTP כדי לציין באיזה אלגוריתם דחיסה הוא השתמש.
Content-Encoding: br
בדיקה אם התשובה דחוסה
כדי לבדוק אם שרת דחס תגובה:
מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את כלי הפיתוח.
לוחצים על הכרטיסייה 'רשת'.
- מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
- לוחצים על הכרטיסייה רשתות.
- לוחצים על הבקשה שגרמה לתגובה הרצויה.
- לוחצים על הכרטיסייה Headers.
- בודקים את הכותרת
content-encodingבקטע כותרות תגובה.
content-encoding.
כדי להשוות בין הגודל הדחוס לבין הגודל לאחר הדחיסה של תשובה:
- כדי לפתוח את כלי הפיתוח, מקישים על Control+Shift+J (או על Command+Option+J ב-Mac).
- לוחצים על הכרטיסייה רשתות.
- מפעילים את האפשרות 'שורות בקשה גדולות'. שימוש בשורות בקשה גדולות
- בודקים את העמודה Size של התגובה הרצויה. הערך העליון הוא הגודל הדחוס. הערך התחתון הוא הגודל לאחר הסרת הדחיסה.
אפשר גם לעיין במאמר צמצום ודחיסה של מטענים ייעודיים (payloads) ברשת.
הנחיות ספציפיות ל-stack
- Drupal: הצגת משאבים המבוססים על טקסט צריכה להתבצע בעזרת דחיסת נתונים (gzip, deflate או brotli) כדי לצמצם את כמות הבייטים שמועברים ברשת. מומלץ להשתמש ב-CDN שתומך בכך באופן מקורי, או להגדיר את שרת האינטרנט לבצע את הפעולה הזו. מידע נוסף
- Joomla: מפעילים את ההגדרה Gzip Page Compression (System > Global configuration > Server).
- WordPress: מפעילים דחיסת טקסט בהגדרות של שרת האינטרנט.