הפחתת בקשות HTTP הייתה פעם אחת העצות הכי חשובות לשיפור מהירות: כל קובץ שהדפדפן מבקש מהשרת עלה בזמן, ולכן איחדו קבצים ככל האפשר. היום, ברוב האתרים, החשבון השתנה. כאן אני מסביר מה זה בקשת HTTP, למה המספר שלהן פחות חשוב משהיה, ומה עדיין כדאי לצמצם.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
מה זו בקשת HTTP
כל קובץ שהעמוד צריך, העמוד עצמו, כל תמונה, כל קובץ עיצוב, סקריפט או פונט, הוא בקשה נפרדת שהדפדפן שולח לשרת. בעמוד אתר רגיל יש עשרות בקשות כאלה. מדדתי את דף הבית של האתר הזה: 45 בקשות, כמעט כולן לשרת של האתר עצמו.
למה המספר פחות חשוב היום
בפרוטוקול הישן, HTTP/1.1, הדפדפן יכול היה להוריד רק כמה קבצים במקביל מכל שרת, והשאר חיכו בתור. לכן עשרות קבצים קטנים היו איטיים יותר מכמה קבצים גדולים, ואיחוד קבצים חסך הרבה זמן.
הפרוטוקולים החדשים, HTTP/2 ו HTTP/3, מורידים הרבה קבצים במקביל על אותו חיבור. באותה מדידה, 36 מתוך 45 הבקשות בדף הבית עברו ב HTTP/3, והשאר ב HTTP/2. במצב כזה, איחוד כל הקבצים לקובץ אחד כבר לא חוסך הרבה, ולפעמים אפילו מאט, כי הדפדפן צריך לחכות לקובץ הגדול כולו.
מה עדיין כדאי לצמצם
המספר פחות חשוב, אבל לא כל בקשה שווה. יש בקשות HTTP שעדיין עולות ביוקר, וכדאי לבדוק אותן בכל אתר.
בקשות לשרתים חיצוניים
כל שרת חדש, של גוגל, פייסבוק, צ'אט או ווידג'ט, דורש חיבור חדש: מציאת הכתובת, יצירת חיבור מאובטח, ורק אז הקובץ. זה יכול להוסיף מאות אלפיות שנייה. לכן כדאי לטעון פונטים מהשרת של האתר ולא מגוגל, ולדחות סקריפטים של צד שלישי עד אחרי הטעינה.
קבצים שחוסמים את ההופעה הראשונה
קובצי עיצוב וסקריפטים בראש העמוד גורמים לדפדפן לחכות לפני שהוא מציג משהו. כאן מספר הבקשות משנה: כל קובץ חוסם מוסיף זמן. הפתרון הוא לדחות את מה שלא נחוץ מיד, ולהשאיר בראש העמוד רק את העיצוב של החלק העליון.
קבצים שלא בשימוש
תוספים טוענים לפעמים את הקבצים שלהם בכל עמוד, גם כשהם לא מופיעים בו. תוסף טפסים שטוען את הקוד שלו בכל מאמר, או תוסף סליידר בעמודים בלי סליידר. טעינה של כל תוסף רק בעמודים שצריכים אותו חוסכת גם בקשות וגם משקל.
איך בודקים את הבקשות באתר
ב Chrome לוחצים F12, עוברים ללשונית הרשת ומרעננים. בתחתית מופיע מספר בקשות HTTP של העמוד. כדאי להוסיף את עמודת הדומיין, ולראות לכמה שרתים שונים העמוד פונה, ואת עמודת הפרוטוקול, כדי לוודא שהאתר עובד ב HTTP/2 או HTTP/3. אם מופיע HTTP/1.1, כדאי לבדוק את זה מול חברת האחסון.
ב PageSpeed Insights אפשר לראות את הבקשות שחוסמות את ההופעה הראשונה ואת הסקריפטים של צד שלישי. אלה הבקשות שבאמת עולות בזמן, ושם כדאי להתחיל. את התמונה הכוללת של משקל העמוד פירטתי במאמר איך להקטין משקל אתר.
שאלות ותשובות על בקשות HTTP
האם כדאי לאחד את כל קובצי העיצוב לקובץ אחד?
בשרת שעובד ב HTTP/2 או HTTP/3, בדרך כלל לא. היתרון של האיחוד קטן, והחיסרון הוא שכל שינוי קטן מבטל את המטמון של כל הקובץ, והדפדפן צריך להוריד הכל מחדש. עדיף להסיר קבצים שלא בשימוש ולדחות את מה שלא נחוץ.
כמה בקשות זה יותר מדי?
אין מספר קבוע. עמוד עם 80 בקשות לשרת אחד יכול להיות מהיר, ועמוד עם 30 בקשות לעשרה שרתים שונים יכול להיות איטי. מה שקובע הוא כמה מהן חוסמות, כמה שרתים שונים מעורבים, וכמה הן שוקלות.
איך יודעים באיזה פרוטוקול האתר עובד?
בכלי המפתחים של Chrome, בלשונית הרשת, לוחצים קליק ימני על כותרות העמודות ומוסיפים את עמודת הפרוטוקול. h2 הוא HTTP/2, ו h3 הוא HTTP/3. רוב האחסונים המודרניים ושירותים כמו קלאודפלייר תומכים בשניהם.
האם סקריפטים של גוגל אנליטיקס ופייסבוק מאטים?
כל אחד מהם דורש חיבור לשרת חיצוני ומריץ קוד בדפדפן. אחד או שניים בדרך כלל לא מורגשים, אבל חמישה או שישה כלים כאלה מורגשים, במיוחד בטלפון. כדאי לטעון אותם אחרי שהעמוד הופיע, ולהסיר כלים שאף אחד לא משתמש בהם.
הצעד הבא
רוצים לדעת אילו בקשות באמת מאטות את העמודים שלכם? שלחו לי את הכתובת. אבדוק לכמה שרתים העמוד פונה, מה חוסם את ההופעה הראשונה, ומה אפשר להסיר או לדחות בלי לשבור כלום.
