{"id":4211,"date":"2025-05-14T08:33:30","date_gmt":"2025-05-14T08:33:30","guid":{"rendered":"https:\/\/ingenio.vip\/?post_type=tools-pages&#038;p=4211"},"modified":"2025-05-14T08:33:34","modified_gmt":"2025-05-14T08:33:34","slug":"html-minifier","status":"publish","type":"tools-pages","link":"https:\/\/ingenio.vip\/zh\/tools-pages\/html-minifier\/","title":{"rendered":"HTML Minifier"},"content":{"rendered":"<h2 class=\"wp-block-heading\">\u26a1 Free HTML Minifier \u2013 Minify and Compress Your HTML Code Instantly<\/h2>\n\n\n\n<p>Our free HTML Minifier tool allows you to compress and minify your HTML code by removing unnecessary spaces, comments, and characters. Minified HTML files reduce the size of your web pages, leading to faster load times and improved overall website performance. Perfect for web developers, SEO specialists, and anyone looking to optimize their site\u2019s speed.<\/p>\n\n\n\r\n<div class=\"ingenio-tool html-minifier-wrapper\" role=\"region\" aria-labelledby=\"html-minifier-title\">\r\n  <div class=\"html-minifier\">\r\n    <h2 id=\"html-minifier-title\">\u2702\ufe0f HTML Minifier<\/h2>\r\n    \r\n    <div class=\"minifier-controls\">\r\n      <div class=\"input-section\">\r\n        <div class=\"tabs\">\r\n          <button class=\"tab-btn active\" data-target=\"html-input-tab\">HTML Input<\/button>\r\n          <button class=\"tab-btn\" data-target=\"url-input-tab\">Fetch from URL<\/button>\r\n        <\/div>\r\n        \r\n        <div class=\"tab-content active\" id=\"html-input-tab\">\r\n          <textarea id=\"html-input\" rows=\"12\" placeholder=\"Paste your HTML code here...\"><\/textarea>\r\n        <\/div>\r\n        \r\n        <div class=\"tab-content\" id=\"url-input-tab\">\r\n          <div class=\"url-input-group\">\r\n            <input type=\"url\" id=\"html-url\" placeholder=\"https:\/\/example.com\/page\">\r\n            <button id=\"fetch-html-btn\" class=\"fetch-btn\">\ud83c\udf10 Fetch HTML<\/button>\r\n          <\/div>\r\n          <div id=\"fetch-status\"><\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"file-actions\">\r\n          <button id=\"paste-html-btn\" class=\"action-btn\">\ud83d\udccb Paste HTML<\/button>\r\n          <input type=\"file\" id=\"file-upload\" accept=\".html,.htm,.php,.asp,.aspx,.jsp\">\r\n          <label for=\"file-upload\" class=\"action-btn\">\ud83d\udcc1 Upload File<\/label>\r\n          <span id=\"file-name\">No file selected<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"minification-options\">\r\n        <div class=\"option-group\">\r\n          <h3>\ud83d\udee0\ufe0f Minification Options<\/h3>\r\n          <label><input type=\"checkbox\" id=\"collapse-whitespace\" checked> Collapse whitespace<\/label>\r\n          <label><input type=\"checkbox\" id=\"remove-comments\" checked> Remove comments<\/label>\r\n          <label><input type=\"checkbox\" id=\"remove-attribute-quotes\" checked> Remove attribute quotes<\/label>\r\n          <label><input type=\"checkbox\" id=\"remove-empty-attributes\" checked> Remove empty attributes<\/label>\r\n          <label><input type=\"checkbox\" id=\"remove-redundant-attributes\" checked> Remove redundant attributes<\/label>\r\n          <label><input type=\"checkbox\" id=\"remove-optional-tags\"> Remove optional tags (html, head, body)<\/label>\r\n          <label><input type=\"checkbox\" id=\"remove-script-type\"> Remove script type attributes<\/label>\r\n          <label><input type=\"checkbox\" id=\"remove-style-type\"> Remove style type attributes<\/label>\r\n          <label><input type=\"checkbox\" id=\"remove-link-type\"> Remove link type attributes<\/label>\r\n        <\/div>\r\n        \r\n        <div class=\"option-group\">\r\n          <h3>\u26a1 Performance<\/h3>\r\n          <div class=\"stat\">\r\n            <span class=\"stat-label\">Original Size:<\/span>\r\n            <span id=\"original-size\" class=\"stat-value\">0 bytes<\/span>\r\n          <\/div>\r\n          <div class=\"stat\">\r\n            <span class=\"stat-label\">Minified Size:<\/span>\r\n            <span id=\"minified-size\" class=\"stat-value\">0 bytes<\/span>\r\n          <\/div>\r\n          <div class=\"stat\">\r\n            <span class=\"stat-label\">Reduction:<\/span>\r\n            <span id=\"reduction-percent\" class=\"stat-value\">0%<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"action-buttons\">\r\n          <button id=\"minify-btn\" class=\"minify-btn primary\">\u2728 Minify HTML<\/button>\r\n          <button id=\"reset-btn\" class=\"minify-btn secondary\">\ud83d\uddd1\ufe0f Reset<\/button>\r\n          <button id=\"compare-btn\" class=\"minify-btn\">\ud83d\udd0d Compare<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"output-section\">\r\n      <label for=\"html-output\">Minified HTML:<\/label>\r\n      <textarea id=\"html-output\" rows=\"12\" readonly><\/textarea>\r\n      <div class=\"output-actions\">\r\n        <button id=\"copy-html-btn\" class=\"output-btn\">\ud83d\udccb Copy<\/button>\r\n        <button id=\"download-btn\" class=\"output-btn\">\ud83d\udcbe Download<\/button>\r\n        <button id=\"view-diff-btn\" class=\"output-btn\">\ud83d\udc41\ufe0f View Diff<\/button>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <div id=\"diff-modal\" class=\"modal\">\r\n      <div class=\"modal-content\">\r\n        <span class=\"close-modal\">&times;<\/span>\r\n        <h3>\ud83d\udd0d Before\/After Comparison<\/h3>\r\n        <div class=\"diff-container\">\r\n          <div class=\"diff-column\">\r\n            <h4>Original HTML<\/h4>\r\n            <pre id=\"original-html\"><\/pre>\r\n          <\/div>\r\n          <div class=\"diff-column\">\r\n            <h4>Minified HTML<\/h4>\r\n            <pre id=\"minified-html\"><\/pre>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"pro-tips\">\r\n      <h3>\ud83d\udca1 Optimization Tips<\/h3>\r\n      <ul>\r\n        <li>Minified HTML can reduce file size by 5-20%<\/li>\r\n        <li>Removing comments significantly reduces size<\/li>\r\n        <li>Always test minified pages for functionality<\/li>\r\n        <li>Combine with CSS\/JS minification for best results<\/li>\r\n        <li>Use gzip compression with minification<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .html-minifier-wrapper {\r\n    background-color: var(--bg, #f5f5fa);\r\n    padding: 1rem;\r\n  }\r\n\r\n  .html-minifier {\r\n    max-width: 1400px;\r\n    margin: auto;\r\n    background: var(--bg, #fff);\r\n    border-radius: 10px;\r\n    padding: 25px;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n  }\r\n\r\n  .html-minifier h2 {\r\n    text-align: center;\r\n    font-size: 1.8rem;\r\n    color: var(--primary, #009688);\r\n    margin-bottom: 1.5rem;\r\n  }\r\n\r\n  .minifier-controls {\r\n    display: flex;\r\n    gap: 20px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .input-section {\r\n    flex: 2;\r\n  }\r\n\r\n  .tabs {\r\n    display: flex;\r\n    border-bottom: 1px solid #ddd;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .tab-btn {\r\n    padding: 8px 15px;\r\n    background: none;\r\n    border: none;\r\n    border-bottom: 2px solid transparent;\r\n    cursor: pointer;\r\n    font-size: 0.9rem;\r\n    color: #666;\r\n  }\r\n\r\n  .tab-btn.active {\r\n    color: var(--primary, #009688);\r\n    border-bottom-color: var(--primary, #009688);\r\n    font-weight: 500;\r\n  }\r\n\r\n  .tab-content {\r\n    display: none;\r\n  }\r\n\r\n  .tab-content.active {\r\n    display: block;\r\n  }\r\n\r\n  .url-input-group {\r\n    display: flex;\r\n    gap: 10px;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .url-input-group input {\r\n    flex: 1;\r\n    padding: 8px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .fetch-btn {\r\n    padding: 8px 15px;\r\n    background: var(--primary, #009688);\r\n    color: white;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .fetch-btn:hover {\r\n    background: var(--primary-dark, #00796B);\r\n  }\r\n\r\n  #fetch-status {\r\n    font-size: 0.9rem;\r\n    color: #666;\r\n    min-height: 20px;\r\n  }\r\n\r\n  .input-section textarea,\r\n  .output-section textarea {\r\n    width: 100%;\r\n    padding: 12px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 6px;\r\n    font-family: monospace;\r\n    font-size: 0.95rem;\r\n    resize: vertical;\r\n    min-height: 300px;\r\n  }\r\n\r\n  .file-actions {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    margin-top: 10px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .action-btn {\r\n    padding: 8px 15px;\r\n    background: #f0f0f0;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n    font-size: 0.9rem;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n  }\r\n\r\n  .action-btn:hover {\r\n    background: #e0e0e0;\r\n  }\r\n\r\n  #file-upload {\r\n    display: none;\r\n  }\r\n\r\n  #file-name {\r\n    font-size: 0.9rem;\r\n    color: #666;\r\n    margin-left: auto;\r\n  }\r\n\r\n  .minification-options {\r\n    width: 350px;\r\n  }\r\n\r\n  .option-group {\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .option-group h3 {\r\n    margin-top: 0;\r\n    font-size: 1.1rem;\r\n    color: #555;\r\n    border-bottom: 1px solid #eee;\r\n    padding-bottom: 5px;\r\n  }\r\n\r\n  .option-group label {\r\n    display: block;\r\n    margin-bottom: 8px;\r\n    font-size: 0.9rem;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .option-group label input[type=\"checkbox\"] {\r\n    margin-right: 8px;\r\n  }\r\n\r\n  .stat {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-bottom: 8px;\r\n    font-size: 0.95rem;\r\n  }\r\n\r\n  .stat:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  .stat-label {\r\n    color: #555;\r\n  }\r\n\r\n  .stat-value {\r\n    font-weight: bold;\r\n    color: var(--primary, #009688);\r\n  }\r\n\r\n  .action-buttons {\r\n    display: flex;\r\n    gap: 10px;\r\n    margin-top: 20px;\r\n  }\r\n\r\n  .minify-btn {\r\n    padding: 10px 15px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-size: 0.95rem;\r\n    transition: all 0.2s;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 6px;\r\n    flex: 1;\r\n  }\r\n\r\n  .minify-btn.primary {\r\n    background: var(--primary, #009688);\r\n    color: white;\r\n  }\r\n\r\n  .minify-btn.secondary {\r\n    background: #f5f5f5;\r\n    color: #333;\r\n    border: 1px solid #ddd;\r\n  }\r\n\r\n  .minify-btn:hover {\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n  }\r\n\r\n  .minify-btn.primary:hover {\r\n    background: var(--primary-dark, #00796B);\r\n  }\r\n\r\n  .minify-btn.secondary:hover {\r\n    background: #eee;\r\n  }\r\n\r\n  .output-actions {\r\n    display: flex;\r\n    gap: 10px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .output-btn {\r\n    padding: 8px 15px;\r\n    background: #f0f0f0;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n    font-size: 0.9rem;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 5px;\r\n    flex: 1;\r\n  }\r\n\r\n  .output-btn:hover {\r\n    background: #e0e0e0;\r\n  }\r\n\r\n  \/* Modal styles *\/\r\n  .modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 1000;\r\n    left: 0;\r\n    top: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: rgba(0,0,0,0.7);\r\n  }\r\n\r\n  .modal-content {\r\n    background-color: #fefefe;\r\n    margin: 5% auto;\r\n    padding: 20px;\r\n    border: 1px solid #888;\r\n    width: 90%;\r\n    height: 80%;\r\n    border-radius: 5px;\r\n    position: relative;\r\n    overflow: auto;\r\n  }\r\n\r\n  .close-modal {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 28px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .close-modal:hover {\r\n    color: black;\r\n  }\r\n\r\n  .diff-container {\r\n    display: flex;\r\n    gap: 20px;\r\n    height: calc(100% - 60px);\r\n  }\r\n\r\n  .diff-column {\r\n    flex: 1;\r\n    overflow: auto;\r\n  }\r\n\r\n  .diff-column h4 {\r\n    margin: 0 0 10px 0;\r\n    font-size: 1rem;\r\n    color: #555;\r\n  }\r\n\r\n  .diff-column pre {\r\n    background: #2d2d2d;\r\n    color: #f8f8f2;\r\n    padding: 15px;\r\n    border-radius: 4px;\r\n    font-family: monospace;\r\n    font-size: 0.9rem;\r\n    overflow-x: auto;\r\n    height: calc(100% - 40px);\r\n    margin: 0;\r\n  }\r\n\r\n  .pro-tips {\r\n    background: #E0F2F1;\r\n    border-radius: 10px;\r\n    padding: 15px 20px;\r\n    border-left: 4px solid var(--primary, #009688);\r\n    margin-top: 25px;\r\n  }\r\n\r\n  .pro-tips h3 {\r\n    margin-top: 0;\r\n    margin-bottom: 10px;\r\n    font-size: 1.1rem;\r\n  }\r\n\r\n  .pro-tips ul {\r\n    margin: 0;\r\n    padding-left: 20px;\r\n  }\r\n\r\n  .pro-tips li {\r\n    margin-bottom: 5px;\r\n  }\r\n\r\n  @media (max-width: 1200px) {\r\n    .minifier-controls {\r\n      flex-direction: column;\r\n    }\r\n    \r\n    .minification-options {\r\n      width: 100%;\r\n    }\r\n    \r\n    .diff-container {\r\n      flex-direction: column;\r\n      height: auto;\r\n    }\r\n    \r\n    .diff-column pre {\r\n      height: 300px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  \/\/ DOM elements\r\n  const htmlInput = document.getElementById('html-input');\r\n  const htmlOutput = document.getElementById('html-output');\r\n  const htmlUrl = document.getElementById('html-url');\r\n  const fetchHtmlBtn = document.getElementById('fetch-html-btn');\r\n  const fetchStatus = document.getElementById('fetch-status');\r\n  const fileUpload = document.getElementById('file-upload');\r\n  const fileName = document.getElementById('file-name');\r\n  const pasteHtmlBtn = document.getElementById('paste-html-btn');\r\n  const minifyBtn = document.getElementById('minify-btn');\r\n  const resetBtn = document.getElementById('reset-btn');\r\n  const compareBtn = document.getElementById('compare-btn');\r\n  const copyHtmlBtn = document.getElementById('copy-html-btn');\r\n  const downloadBtn = document.getElementById('download-btn');\r\n  const viewDiffBtn = document.getElementById('view-diff-btn');\r\n  const diffModal = document.getElementById('diff-modal');\r\n  const closeModal = document.querySelector('.close-modal');\r\n  const originalHtmlPre = document.getElementById('original-html');\r\n  const minifiedHtmlPre = document.getElementById('minified-html');\r\n  const tabBtns = document.querySelectorAll('.tab-btn');\r\n  const tabContents = document.querySelectorAll('.tab-content');\r\n  \r\n  \/\/ Minification options\r\n  const collapseWhitespace = document.getElementById('collapse-whitespace');\r\n  const removeComments = document.getElementById('remove-comments');\r\n  const removeAttributeQuotes = document.getElementById('remove-attribute-quotes');\r\n  const removeEmptyAttributes = document.getElementById('remove-empty-attributes');\r\n  const removeRedundantAttributes = document.getElementById('remove-redundant-attributes');\r\n  const removeOptionalTags = document.getElementById('remove-optional-tags');\r\n  const removeScriptType = document.getElementById('remove-script-type');\r\n  const removeStyleType = document.getElementById('remove-style-type');\r\n  const removeLinkType = document.getElementById('remove-link-type');\r\n  \r\n  \/\/ Stats elements\r\n  const originalSizeEl = document.getElementById('original-size');\r\n  const minifiedSizeEl = document.getElementById('minified-size');\r\n  const reductionPercentEl = document.getElementById('reduction-percent');\r\n\r\n  \/\/ Event listeners\r\n  fileUpload.addEventListener('change', handleFileUpload);\r\n  pasteHtmlBtn.addEventListener('click', pasteFromClipboard);\r\n  fetchHtmlBtn.addEventListener('click', fetchHtmlFromUrl);\r\n  minifyBtn.addEventListener('click', minifyHtml);\r\n  resetBtn.addEventListener('click', resetAll);\r\n  compareBtn.addEventListener('click', showComparison);\r\n  copyHtmlBtn.addEventListener('click', copyHtml);\r\n  downloadBtn.addEventListener('click', downloadHtml);\r\n  viewDiffBtn.addEventListener('click', showDiffModal);\r\n  closeModal.addEventListener('click', hideDiffModal);\r\n  window.addEventListener('click', outsideModalClick);\r\n  \r\n  \/\/ Tab switching\r\n  tabBtns.forEach(btn => {\r\n    btn.addEventListener('click', function() {\r\n      const target = this.dataset.target;\r\n      \r\n      \/\/ Update active tab\r\n      tabBtns.forEach(b => b.classList.remove('active'));\r\n      tabContents.forEach(c => c.classList.remove('active'));\r\n      \r\n      this.classList.add('active');\r\n      document.getElementById(target).classList.add('active');\r\n    });\r\n  });\r\n\r\n  \/\/ Handle file upload\r\n  function handleFileUpload(e) {\r\n    const file = e.target.files[0];\r\n    if (!file) return;\r\n    \r\n    fileName.textContent = file.name;\r\n    \r\n    const reader = new FileReader();\r\n    reader.onload = function(e) {\r\n      htmlInput.value = e.target.result;\r\n      updateStats();\r\n    };\r\n    reader.readAsText(file);\r\n  }\r\n\r\n  \/\/ Paste from clipboard\r\n  async function pasteFromClipboard() {\r\n    try {\r\n      const text = await navigator.clipboard.readText();\r\n      htmlInput.value = text;\r\n      updateStats();\r\n    } catch (err) {\r\n      alert('Failed to read clipboard contents. Please paste manually.');\r\n    }\r\n  }\r\n\r\n  \/\/ Fetch HTML from URL\r\n  async function fetchHtmlFromUrl() {\r\n    const url = htmlUrl.value.trim();\r\n    if (!url) {\r\n      fetchStatus.textContent = 'Please enter a valid URL';\r\n      fetchStatus.style.color = '#F44336';\r\n      return;\r\n    }\r\n    \r\n    try {\r\n      fetchStatus.textContent = 'Fetching HTML...';\r\n      fetchStatus.style.color = '#666';\r\n      \r\n      \/\/ Use a proxy to avoid CORS issues\r\n      const proxyUrl = `https:\/\/api.allorigins.win\/get?url=${encodeURIComponent(url)}`;\r\n      const response = await fetch(proxyUrl);\r\n      \r\n      if (!response.ok) throw new Error('Network response was not ok');\r\n      \r\n      const data = await response.json();\r\n      \r\n      if (data.contents) {\r\n        htmlInput.value = data.contents;\r\n        fetchStatus.textContent = 'HTML fetched successfully!';\r\n        fetchStatus.style.color = '#4CAF50';\r\n        updateStats();\r\n      } else {\r\n        throw new Error('No content received');\r\n      }\r\n    } catch (error) {\r\n      fetchStatus.textContent = `Error: ${error.message}`;\r\n      fetchStatus.style.color = '#F44336';\r\n    }\r\n  }\r\n\r\n  \/\/ Minify HTML\r\n  function minifyHtml() {\r\n    const html = htmlInput.value.trim();\r\n    if (!html) {\r\n      alert('Please enter some HTML to minify');\r\n      return;\r\n    }\r\n    \r\n    try {\r\n      const minified = processMinification(html);\r\n      htmlOutput.value = minified;\r\n      \r\n      \/\/ Update comparison view\r\n      originalHtmlPre.textContent = html;\r\n      minifiedHtmlPre.textContent = minified;\r\n      \r\n      updateStats();\r\n    } catch (error) {\r\n      alert('Error minifying HTML: ' + error.message);\r\n    }\r\n  }\r\n\r\n  \/\/ Process minification with selected options\r\n  function processMinification(html) {\r\n    \/\/ This is a simplified version - in production you'd use html-minifier library\r\n    let result = html;\r\n    \r\n    \/\/ Remove comments\r\n    if (removeComments.checked) {\r\n      result = result.replace(\/\/g, '');\r\n    }\r\n    \r\n    \/\/ Collapse whitespace\r\n    if (collapseWhitespace.checked) {\r\n      result = result.replace(\/\\s+\/g, ' ');\r\n      result = result.replace(\/>\\s+<\/g, '><');\r\n    }\r\n    \r\n    \/\/ Remove attribute quotes where safe\r\n    if (removeAttributeQuotes.checked) {\r\n      result = result.replace(\/(\\w+)=[\"']([^\"']*)[\"']\/g, '$1=$2');\r\n    }\r\n    \r\n    \/\/ Remove empty attributes\r\n    if (removeEmptyAttributes.checked) {\r\n      result = result.replace(\/\\s+\\w+=\"\"\/g, '');\r\n    }\r\n    \r\n    \/\/ Remove redundant attributes\r\n    if (removeRedundantAttributes.checked) {\r\n      result = result.replace(\/\\s+type=[\"']text\\\/javascript[\"']\/g, '');\r\n      result = result.replace(\/\\s+type=[\"']text\\\/css[\"']\/g, '');\r\n    }\r\n    \r\n    \/\/ Remove optional tags\r\n    if (removeOptionalTags.checked) {\r\n      result = result.replace(\/<\\\/?(html|head|body)>\/g, '');\r\n    }\r\n    \r\n    \/\/ Remove specific type attributes\r\n    if (removeScriptType.checked) {\r\n      result = result.replace(\/<script([^>]*)type=[\"']text\\\/javascript[\"']\/g, '<script$1');\r\n    }\r\n    \r\n    if (removeStyleType.checked) {\r\n      result = result.replace(\/<style([^>]*)type=[\"']text\\\/css[\"']\/g, '<style$1');\r\n    }\r\n    \r\n    if (removeLinkType.checked) {\r\n      result = result.replace(\/<link([^>]*)type=[\"']text\\\/css[\"']\/g, '<link$1');\r\n    }\r\n    \r\n    return result.trim();\r\n  }\r\n\r\n  \/\/ Show side-by-side comparison\r\n  function showComparison() {\r\n    if (!htmlInput.value || !htmlOutput.value) {\r\n      alert('Please minify some HTML first');\r\n      return;\r\n    }\r\n    \r\n    \/\/ This would use a proper diff library in production\r\n    originalHtmlPre.textContent = htmlInput.value;\r\n    minifiedHtmlPre.textContent = htmlOutput.value;\r\n    \r\n    showDiffModal();\r\n  }\r\n\r\n  \/\/ Update statistics\r\n  function updateStats() {\r\n    const originalHtml = htmlInput.value;\r\n    const minifiedHtml = htmlOutput.value;\r\n    \r\n    const originalSize = new Blob([originalHtml]).size;\r\n    const minifiedSize = minifiedHtml ? new Blob([minifiedHtml]).size : 0;\r\n    \r\n    originalSizeEl.textContent = formatBytes(originalSize);\r\n    minifiedSizeEl.textContent = minifiedHtml ? formatBytes(minifiedSize) : '0 bytes';\r\n    \r\n    if (originalSize > 0 && minifiedSize > 0) {\r\n      const reduction = ((originalSize - minifiedSize) \/ originalSize * 100).toFixed(1);\r\n      reductionPercentEl.textContent = `${reduction}%`;\r\n      reductionPercentEl.style.color = reduction > 0 ? '#4CAF50' : '#F44336';\r\n    } else {\r\n      reductionPercentEl.textContent = '0%';\r\n      reductionPercentEl.style.color = '#666';\r\n    }\r\n  }\r\n\r\n  \/\/ Format bytes for display\r\n  function formatBytes(bytes) {\r\n    if (bytes === 0) return '0 bytes';\r\n    \r\n    const k = 1024;\r\n    const sizes = ['bytes', 'KB', 'MB', 'GB'];\r\n    const i = Math.floor(Math.log(bytes) \/ Math.log(k));\r\n    \r\n    return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\r\n  }\r\n\r\n  \/\/ Copy HTML to clipboard\r\n  function copyHtml() {\r\n    if (!htmlOutput.value) {\r\n      alert('No minified HTML to copy');\r\n      return;\r\n    }\r\n    \r\n    htmlOutput.select();\r\n    document.execCommand('copy');\r\n    \r\n    \/\/ Visual feedback\r\n    const originalText = copyHtmlBtn.textContent;\r\n    copyHtmlBtn.textContent = '\u2713 Copied!';\r\n    setTimeout(() => {\r\n      copyHtmlBtn.textContent = originalText;\r\n    }, 2000);\r\n  }\r\n\r\n  \/\/ Download HTML\r\n  function downloadHtml() {\r\n    if (!htmlOutput.value) {\r\n      alert('No minified HTML to download');\r\n      return;\r\n    }\r\n    \r\n    const blob = new Blob([htmlOutput.value], { type: 'text\/html' });\r\n    const url = URL.createObjectURL(blob);\r\n    const a = document.createElement('a');\r\n    a.href = url;\r\n    a.download = `minified-${new Date().toISOString().slice(0, 10)}.html`;\r\n    document.body.appendChild(a);\r\n    a.click();\r\n    document.body.removeChild(a);\r\n    URL.revokeObjectURL(url);\r\n  }\r\n\r\n  \/\/ Show diff modal\r\n  function showDiffModal() {\r\n    diffModal.style.display = 'block';\r\n  }\r\n\r\n  \/\/ Hide diff modal\r\n  function hideDiffModal() {\r\n    diffModal.style.display = 'none';\r\n  }\r\n\r\n  \/\/ Close modal when clicking outside\r\n  function outsideModalClick(e) {\r\n    if (e.target === diffModal) {\r\n      hideDiffModal();\r\n    }\r\n  }\r\n\r\n  \/\/ Reset all fields\r\n  function resetAll() {\r\n    htmlInput.value = '';\r\n    htmlOutput.value = '';\r\n    fileUpload.value = '';\r\n    fileName.textContent = 'No file selected';\r\n    originalSizeEl.textContent = '0 bytes';\r\n    minifiedSizeEl.textContent = '0 bytes';\r\n    reductionPercentEl.textContent = '0%';\r\n    reductionPercentEl.style.color = '#666';\r\n    fetchStatus.textContent = '';\r\n    \r\n    \/\/ Reset checkboxes to defaults\r\n    collapseWhitespace.checked = true;\r\n    removeComments.checked = true;\r\n    removeAttributeQuotes.checked = true;\r\n    removeEmptyAttributes.checked = true;\r\n    removeRedundantAttributes.checked = true;\r\n    removeOptionalTags.checked = false;\r\n    removeScriptType.checked = false;\r\n    removeStyleType.checked = false;\r\n    removeLinkType.checked = false;\r\n  }\r\n\r\n  \/\/ Initialize\r\n  updateStats();\r\n});\r\n<\/script>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2728 Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\ude80 <strong>Improved Website Speed<\/strong> \u2013 Minify HTML to reduce file size and improve load times<\/li>\n\n\n\n<li>\u2699\ufe0f <strong>Automatic Compression<\/strong> \u2013 Removes unnecessary spaces, comments, and characters<\/li>\n\n\n\n<li>\ud83d\udd04 <strong>Instant Minification<\/strong> \u2013 Get your minified HTML code right away with no delays<\/li>\n\n\n\n<li>\ud83d\udeab <strong>No Sign-Up or Download<\/strong> \u2013 Use the tool for free without any registration required<\/li>\n\n\n\n<li>\ud83d\udd12 <strong>Private &amp; Secure<\/strong> \u2013 Your HTML code is not stored or shared<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\ude80 How It Works<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Paste your HTML code<\/strong> \u2013 Copy and paste your HTML into the input box<\/li>\n\n\n\n<li><strong>Click \u201cMinify\u201d<\/strong> \u2013 Our tool automatically minifies your HTML code<\/li>\n\n\n\n<li><strong>Copy the minified HTML<\/strong> \u2013 Get the compressed HTML code ready for use in your project<\/li>\n\n\n\n<li><strong>Deploy the optimized code<\/strong> \u2013 Reduce file size for faster page load and smoother user experience<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\uddd1\u200d\ud83d\udcbb Who Uses This Tool?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Web Developers<\/strong> \u2013 Minify HTML files to improve website speed and efficiency<\/li>\n\n\n\n<li><strong>Webmasters<\/strong> \u2013 Optimize HTML code for faster page load times and reduced bandwidth usage<\/li>\n\n\n\n<li><strong>Frontend Developers<\/strong> \u2013 Compress HTML code to improve web application performance<\/li>\n\n\n\n<li><strong>SEO Professionals<\/strong> \u2013 Boost SEO rankings by improving page speed and load times<\/li>\n\n\n\n<li><strong>Content Creators<\/strong> \u2013 Streamline HTML for web projects to improve overall project performance<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udca1 Why Minify Your HTML?<\/h2>\n\n\n\n<p>Minifying your HTML removes unnecessary spaces, line breaks, and comments, reducing the overall file size. Smaller HTML files improve page load speeds, reduce bandwidth usage, and enhance the user experience, especially for mobile users. This also benefits search engine optimization (SEO), as page load speed is a key factor in Google rankings. Faster-loading websites tend to rank better and provide a better experience for users, especially on mobile devices.<\/p>\n\n\n\n<p><strong>Example of Minified HTML:<\/strong><br>Original:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopyEdit<code>&lt;!-- This is a sample HTML code --&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Page Title&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Welcome to My Website&lt;\/h1&gt;\n    &lt;p&gt;This is a paragraph.&lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Minified:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopyEdit<code>&lt;html&gt;&lt;head&gt;&lt;title&gt;Page Title&lt;\/title&gt;&lt;\/head&gt;&lt;body&gt;&lt;h1&gt;Welcome to My Website&lt;\/h1&gt;&lt;p&gt;This is a paragraph.&lt;\/p&gt;&lt;\/body&gt;&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 Minify Your HTML Instantly \u2013 Try It Now!<\/h2>\n\n\n\n<p>Optimize your website\u2019s performance by minifying your HTML code instantly with our easy-to-use HTML Minifier tool.<\/p>\n\n\n\n<p>\ud83d\udc49 <strong>[Minify HTML Now]<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>\u26a1 Free HTML Minifier \u2013 Minify and Compress Your HTML Code Instantly Our free HTML Minifier tool allows you to compress and minify your HTML code by removing unnecessary spaces, comments, and characters. Minified HTML files reduce the size of your web pages, leading to faster load times and improved overall website performance. Perfect for [&hellip;]<\/p>\n<\/p><div class=\"more-link\"><a href=\"https:\/\/ingenio.vip\/zh\/tools-pages\/html-minifier\/\" class=\"btn btn-small btn--dark btn-hover-shadow\"><span class=\"text\">Continue Reading<\/span><i class=\"seoicon-right-arrow\"><\/i><\/a><\/div>","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","meta":{"_acf_changed":false,"googlesitekit_rrm_CAowrpbbCw:productID":"","footnotes":""},"tools-categories":[],"class_list":["post-4211","tools-pages","type-tools-pages","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages"}],"about":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/types\/tools-pages"}],"author":[{"embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4211\/revisions"}],"predecessor-version":[{"id":4212,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4211\/revisions\/4212"}],"wp:attachment":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/media?parent=4211"}],"wp:term":[{"taxonomy":"tools-categories","embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-categories?post=4211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}