HTML Minifier

Επικολλήστε HTML για να αφαιρέσετε σχόλια και περιττά κενά και να ελαχιστοποιήσετε το inline CSS και JavaScript. Το περιεχόμενο των <pre> και <textarea> μένει ακριβώς όπως γράφτηκε.

Τρέχει στον browser σαςΧωρίς εγγραφήΤίποτα δεν ανεβαίνει

Ελαχιστοποιημένη έξοδος

Πώς να χρησιμοποιήσετε: HTML Minifier

  1. Επικολλήστε ένα έγγραφο ή απόσπασμα HTML ή ανοίξτε ένα αρχείο .html.
  2. Επιλέξτε τι θα αφαιρεθεί: σχόλια, κενά, και αν θα ελαχιστοποιηθούν επίσης τα inline μπλοκ <style> και <script>.
  3. Ελέγξτε τη γραμμή προειδοποιήσεων: ένα inline script με συντακτικό σφάλμα διατηρείται αμετάβλητο αντί να χαλάσει τη σελίδα σας.
  4. Αντιγράψτε το ελαχιστοποιημένο HTML ή κατεβάστε το.

Τι αφαιρείται;

  • Σχόλια: το <!-- … --> αφαιρείται, εκτός από τα conditional comments του Internet Explorer και τα σχόλια που ξεκινούν με <!--!.
  • Κενά μεταξύ block στοιχείων: οι αλλαγές γραμμής και οι εσοχές ανάμεσα σε tags όπως <div>, <li> ή <head> δεν εμφανίζονται ποτέ, οπότε αφαιρούνται εντελώς.
  • Διαδοχικά κενά στο κείμενο: συμπτύσσονται σε ένα κενό, ακριβώς όπως τα εμφανίζει ούτως ή άλλως ο browser.
  • Κενά μέσα στα tags: το <p class = "a"> γίνεται <p class="a">.

Τι διατηρείται;

Σε ορισμένα σημεία τα κενά έχουν σημασία και ο minifier τα σέβεται. Το περιεχόμενο των <pre> και <textarea> διατηρείται byte προς byte. Ένα μονό κενό ανάμεσα σε inline στοιχεία, όπως <b>bold</b> text, διατηρείται, επειδή η αφαίρεσή του θα ένωνε τις λέξεις. Οι τιμές και τα εισαγωγικά των attributes δεν αλλάζουν ποτέ.

Inline CSS και JavaScript

Τα inline μπλοκ <style> βελτιστοποιούνται με το CSSO και τα inline μπλοκ <script> με το Terser, τις ίδιες μηχανές που χρησιμοποιούν οι σελίδες CSS minifier και JavaScript minifier. Τα JSON-LD και άλλα μπλοκ script με JSON συμπτύσσονται, ενώ τα scripts άγνωστου τύπου (για παράδειγμα templates) μένουν ως έχουν.

Αξίζει η ελαχιστοποίηση HTML;

Σε σελίδες που αποδίδονται στον server και σε στατικά sites, το έγγραφο HTML είναι το πρώτο πράγμα που κατεβάζει ο browser, οπότε κάθε byte που γλιτώνετε μειώνει τον χρόνο μέχρι την πρώτη απόδοση. Εξοικονόμηση 10–25% πριν από τη συμπίεση είναι συνηθισμένη, και περισσότερη σε templates με πολλές εσοχές και σελίδες με μεγάλα inline scripts.

Συχνές ερωτήσεις

Θα αλλάξει η εμφάνιση της σελίδας μου με την ελαχιστοποίηση HTML;
Όχι. Αφαιρούνται μόνο κενά που ο browser θα συμπτύσσε έτσι κι αλλιώς, και το περιεχόμενο των <pre>/<textarea> μένει ανέγγιχτο. Αν δίνετε σε στοιχεία white-space: pre μέσω CSS, απενεργοποιήστε τη Σύμπτυξη κενών.
Ελαχιστοποιεί το inline JavaScript και CSS;
Ναι, όταν είναι ενεργές οι αντίστοιχες επιλογές. Αν ένα inline μπλοκ έχει συντακτικό σφάλμα, διατηρείται αμετάβλητο και εμφανίζεται προειδοποίηση, ώστε η σελίδα να μη χαλάει ποτέ.
Μπορώ να ελαχιστοποιήσω αρχεία templates όπως Handlebars, Jinja ή Blade;
Συνήθως ναι, εφόσον τα template tags εμφανίζονται μέσα σε κείμενο ή σε τιμές attributes. Templates που βάζουν λογική μέσα σε ονόματα tags ή ανάμεσα σε attributes ίσως χρειάζονται χειροκίνητο έλεγχο.
Αποστέλλεται κάπου το HTML μου;
Όχι. Όλα επεξεργάζονται τοπικά στον browser σας.

Σχετικά εργαλεία

CSS Minifier Μικρότερα stylesheets: σύντομες τιμές και συγχώνευση διπλών κανόνων. JavaScript Minifier Συμπίεση και σύντμηση ονομάτων JS με Terser, με στατιστικά μεγέθους και gzip. HTML Entity Encoder / Decoder Escape ειδικών χαρακτήρων HTML ή αποκωδικοποίηση &entities;. URL κωδικοποίηση / αποκωδικοποίηση Percent-encoding/decoding κειμένου και ανάλυση query strings.