כיצד עובד HTML דחוס ומדוע ייתכן שתזדקק לו

כיצד עובד HTML דחוס ומדוע ייתכן שתזדקק לו

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





במאמר זה נעבור על שתי השיטות העיקריות לכווץ קבצי HTML, מדוע יש לכווץ קבצי HTML וכיצד להתמודד עם זה.



דחיסה מול מיניפיקציה

בכל הנוגע לאופטימיזציה של קבצי HTML, ישנן שתי שיטות עיקריות לכך: דְחִיסָה ו צמצום . הם נשמעים דומים על פני השטח, אך למעשה מדובר בשתי טכניקות מובחנות, אז אל תבלבלו אותן.





המיניפיקציה

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

דף HTML לדוגמה:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

גודל מקורי: 354. גודל מוקטין: 272. חיסכון: 82 (23.16%).

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



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

דְחִיסָה

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



אך מכיוון שפרוטוקול HTTP תומך בדחיסה, שרת האינטרנט שלך יכול לדחוס את הדף לפני שליחתו למבקר (בהנחה שהדחיסה מופעלת בהגדרות השרת שלך), ואז הדפדפן של המבקר יכול לדחוס את הדף בחזרה למצבו המקורי.

ערכת הדחיסה הנפוצה ביותר היא GZIP , שהוא פורמט קובץ המשתמש ב- אלגוריתם דחיסה ללא הפסד נקרא DEFLATE.

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

שקול מחרוזת טקסט כזו (דוגמה שנלקחה מאתר GZIP):

Blah blah blah blah blah.

האלגוריתם מזהה את החזרה הבאה:

B{lah b}{lah b}{lah b}{lah b}lah.

המופע הראשון הוא ההתייחסות שלנו, אז השאר את זה:

Blah b{lah b}{lah b}{lah b}lah.

המופע השני מתייחס לאירוע הראשון, החמש תווים מאחור וחמש התווים:

Blah b[5,5]{lah b}{lah b}lah.

אך במקרה זה האלגוריתם מזהה שההתרחשות הבאה היא אותו רצף של תווים, ולכן הוא מאריך את אורך ההתייחסות בחמישה נוספים:

Blah b[5,10]{lah b}lah.

ושוב:

Blah b[5,15]lah.

והאלגוריתם מספיק חכם כדי להבין ששלוש התווים הבאים הם שלושת התווים הראשונים בהתייחסות, ולכן הוא משתרע על ידי שלוש:

Blah b[5,18].

עכשיו חשבו על קובץ HTML טיפוסי וכמה חזרה קיימת בתוכו. כמעט כל תג, כגון

, בעל תג סגירה מתאים, כמו

. יתר על כן, תגים רבים חוזרים על עצמם לאורך כל הדרך, כגון

,

,

,

  • , וכו 'גם התכונות חוזרות על עצמן לעתים קרובות, כולל

    class

    ,

    href

    , ו

    src

    . קל להבין מדוע דחיסת GZIP יעילה כל כך עם HTML.

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

    מדוע כדאי לדחוס ולמזער

    ישנם שני יתרונות עיקריים, שניהם מכריעים בנוף האינטרנט הכבד לנייד כיום.

    טעינת דפים מהירה יותר

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

    פחות רוחב פס בשימוש

    נניח שיש לך 10 קבצים, כל אחד ממוזער מ- 50 KB ל -45 KB עבור הצטמקות כוללת של 50 KB. ונניח שהאתר שלך משרת בממוצע 1,000 מבקרים מדי יום, כאשר כל ביקור בממוצע עשרה עמודים. הקטנת HTML בלבד מפחיתה את השימוש ברוחב הפס שלך ב- 50 MB ליום (1.5 GB לחודש).

    דחיסה + הקטנה

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

    כיצד לשנות בחזרה לג'ימייל הקלאסי

    אבל מה שטוב באופטימיזציה של HTML הוא שאתה לא צריך לבחור מיעור או דחיסה. אתה יכול לעשות את שניהם! למעשה, אתה צריך לעשות את שניהם.

    בממוצע, אתה יכול לצפות שדחיסת GZIP תכווץ קובץ HTML ב -70 עד 90 אחוזים. באמצעות הדוגמה שלמעלה עם אומדן דחיסה שמרני, קבצי ה- HTML הממוזערים יגיעו מ -45 KB ל -13.5 KB כל אחד, עבור הצטמקות כוללת של 365 KB. בהשוואה לא ממוזער/לא דחוס, רוחב הפס של האתר שלך מצטמצם כעת ב- 365 MB ליום (11 GB לחודש).

    ובנוסף לחיסכון ברוחב הפס, כל דף נטען מהר יותר באופן דרמטי מכיוון שדפדפן משתמש הקצה צריך להוריד רק 13.5 KB לעומת 50 KB לדף.

    כיצד לדחוס ולמזער HTML

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

    תוספי וורדפרס

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

    רוב תוספי המטמון עושים יותר מסתם מטמון דפים. לדוגמה, המטמון המהיר ביותר של WP ו מטמון כולל W3 לשניהם יש הגדרות בלחיצה אחת המאפשרות לך להפעיל מינימיזציה של HTML ודחיסת GZIP, בין שאר התכונות שמאיצות את טעינת הדפים ומפחיתות את השימוש ברוחב הפס.

    אם אתה רק רוצים minification, אנו ממליצים על צמצם HTML חיבור. זה פשוט, תומך ב- HTML/CSS/JS ומאפשר לך לשנות קצת את שיטת המיניפיקציה (למשל האם להסיר

    http:

    ו

    https:

    מתוך כתובות אתרים).

    מגדלי HTML סטטיים

    אם קבצי HTML שלך סטטיים (כלומר לא נוצרים באופן דינמי על ידי מערכת CMS או מסגרת אינטרנט), תוכל לשמור על שתי קבוצות של קבצי HTML: ערכת 'מקור', שאינה ממוזערת לעריכה קלה, וערכה 'ממוזערת', שאתה יוצר בכל פעם שאתה מבצע שינוי בקובץ המקור.

    כדי לצמצם, השתמש באחד הכלים הבאים:

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

    אפשר דחיסת GZIP

    השלבים לאפשר דחיסת GZIP עשויים להשתנות בהתאם לתוכנת שרת האינטרנט שבה אתה משתמש. מכיוון שאפצ'י היא האפשרות הפופולרית ביותר, נסקור כיצד להפעיל אותה באמצעות .htaccess.

    התחבר לשרת האינטרנט שלך באמצעות FTP ולאחר מכן צור קובץ בשם

    .htaccess

    בספריית השורש. ערוך את קובץ .htaccess כך שיהיה לו את ההגדרות הבאות:


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


    SetOutputFilter DEFLATE

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

    לקבלת היעילות האולטימטיבית, עליך גם למד כיצד לבדוק, לנקות ולייעל את ה- CSS שלך .

    לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל האם כדאי לשדרג ל- Windows 11 באופן מיידי?

    Windows 11 יגיע בקרוב, אך האם עליך לעדכן בהקדם האפשרי או לחכות מספר שבועות? בוא נגלה.

    קרא הבא     נושאים קשורים
    • תִכנוּת
    • HTML
    • בניית אתרים
    על הסופר ג'ואל לי(1524 מאמרים פורסמו)

    ג'ואל לי הוא העורך הראשי של MakeUseOf מאז 2018. יש לו תואר B.S. במדעי המחשב ומעל תשע שנות ניסיון בכתיבה ועריכה מקצועיות.

    עוד מאת ג'ואל לי

    הירשם לניוזלטר שלנו

    הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

    לחצו כאן להרשמה