מכווץ HTML (HTML Minifier)

הדביקו HTML כדי להסיר הערות ורווחים מיותרים ולכווץ CSS ו-JavaScript מוטמעים. התוכן שבתוך <pre> ו-<textarea> נשאר בדיוק כפי שנכתב.

רץ בדפדפן שלכםבלי הרשמהשום דבר לא מועלה

פלט מכווץ

איך משתמשים בכלי מכווץ HTML

  1. הדביקו מסמך HTML או קטע ממנו, או פתחו קובץ .html.
  2. בחרו מה להסיר: הערות, רווחים, והאם לכווץ גם בלוקים מוטמעים של <style> ו-<script>.
  3. בדקו את שורת האזהרות: סקריפט מוטמע עם שגיאת תחביר נשמר ללא שינוי במקום לשבור את הדף.
  4. העתיקו את ה-HTML המכווץ או הורידו אותו.

מה מוסר?

  • הערות: <!-- … --> מוסרות, מלבד הערות מותנות של Internet Explorer והערות שמתחילות ב-<!--!.
  • רווחים בין אלמנטים מסוג block: ירידות שורה והזחות בין תגיות כמו <div>, <li> או <head> אף פעם לא מוצגות, ולכן הן מוסרות לגמרי.
  • רצפי רווחים בטקסט: הם מצטמצמים לרווח יחיד, בדיוק כפי שהדפדפן מציג אותם בכל מקרה.
  • רווחים בתוך תגיות: <p class = "a"> הופך ל-<p class="a">.

מה נשמר?

במקומות מסוימים לרווחים יש משמעות, והמכווץ מכבד אותם. התוכן של <pre> ו-<textarea> נשמר בית אחר בית. רווח יחיד בין אלמנטים מסוג inline, כמו <b>bold</b> text, נשמר, כי הסרתו הייתה מחברת את המילים. ערכי מאפיינים ומירכאות לעולם לא משתנים.

CSS ו-JavaScript מוטמעים

בלוקים מוטמעים של <style> עוברים אופטימיזציה עם CSSO, ובלוקים מוטמעים של <script> עם Terser, אותם מנועים שמשמשים בדפים של מכווץ ה-CSS ומכווץ ה-JavaScript. בלוקים של JSON-LD ושל JSON אחר נדחסים, וסקריפטים מסוגים לא מוכרים (למשל תבניות) נשארים כמו שהם.

האם שווה לכווץ HTML?

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

שאלות נפוצות

האם כיווץ HTML ישנה את מראה הדף?
לא. מוסרים רק רווחים שהדפדפן היה מצמצם בכל מקרה, ותוכן של <pre>/<textarea> לא נוגעים בו. אם אתם מעצבים אלמנטים עם white-space: pre ב-CSS, כבו את צמצום רווחים.
האם הכלי מכווץ JavaScript ו-CSS מוטמעים?
כן, כשהאפשרויות מופעלות. אם בבלוק מוטמע יש שגיאת תחביר, הוא נשמר ללא שינוי ומוצגת אזהרה, כך שהדף אף פעם לא נשבר.
אפשר לכווץ קובצי תבניות כמו Handlebars,‏ Jinja או Blade?
בדרך כלל כן, כל עוד תגיות התבנית מופיעות בטקסט או בערכי מאפיינים. תבניות ששמות לוגיקה בתוך שמות תגיות או בין מאפיינים עשויות לדרוש בדיקה ידנית.
האם ה-HTML שלי נשלח לאנשהו?
לא. הכול מעובד מקומית בדפדפן שלכם.

כלים קשורים

מכווץ CSS הקטנת גיליונות סגנונות: קיצור ערכים ומיזוג כללים כפולים. מכווץ JavaScript דחיסה ו-mangling של JS עם Terser, כולל נתוני גודל ו-gzip. מקודד / מפענח HTML Entities Escape לתווים מיוחדים ב-HTML או פענוח &entities;. קידוד / פענוח URL קידוד/פענוח percent-encoding וניתוח query strings של URL.