פרסומת

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

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

דחיסה לעומת מזעור

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

מזעור

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

דף HTML לדוגמא:

זהו כותרת עליונה
שלח לי דואר בשעה [email protected].
זו פיסקה חדשה!
זוהי פיסקה חדשה מודגש ונטוי.

דף HTML לדוגמא, ממוזער:

זהו כותרת עליונה
שלח לי דואר בשעה [email protected].
זו פיסקה חדשה!
זוהי פיסקה חדשה מודגש ונטוי.

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

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

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

דחיסה

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

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

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

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

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

בלה בלה בלה בלה בלה.

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

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

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

בלה ב {lah b} {lah b} {lah b} lah.

ההתרחשות השנייה מתייחסת חזרה להתרחשות הראשונה, שהיא חמש תווים מאחור ואורך חמש תווים:

בלה ב [5,5] {lah b} {lah b} lah.

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

בלה ב [5,10] {להה ב} לה.

ושוב:

בלה ב [5,15] לאה.

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

בלה ב [5,18].

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

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

מדוע עליכם לדחוס ולהמעיט

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

עומסי דפים מהירים יותר

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

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

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

דחיסה + מזער

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

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

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

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

כיצד לדחוס ולהקטין HTML

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

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

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

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

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

מוקדי HTML סטטיים

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

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

• HTMLC מדחס
• מפחית HTML
• מפחית HTML (שונה מזו שלמעלה)

זוהי טכניקה בת קיימא אם התרחקת מ- CMS כמו WordPress ועכשיו השתמשת בה מחוללי אתרים סטטיים 7 סיבות לנתק את ה- CMS שלך ולשקול מחולל אתרים סטטיבמשך שנים רבות פרסום של אתר היה קשה עבור משתמשים רבים. CMSs כמו WordPress שינו את זה, אך הם עדיין יכולים להיות מבלבלים. אלטרנטיבה נוספת היא מחולל אתרים סטטי. קרא עוד .

אפשר דחיסת GZIP

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

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

 mod_gzip_on כן mod_gzip_dechunk כן mod_gzip_item_include קובץ. (html? | txt | css | js | php | pl) $ mod_gzip_item_include מטפל ^ cgi-script $ mod_gzip_item_include mime ^ text / .* mod_gzip_item_include mime ^ יישום / x-javascript. * mod_gzip_item_exclude mime ^ image / .* mod_gzip_item_exclude rspheader ^ קידוד תוכן:. * Gzip. *
 SetOutputFilter DEFLATE. 

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

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