{"id":4372,"date":"2017-04-19T02:00:58","date_gmt":"2017-04-19T02:00:58","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriales\/?p=4372"},"modified":"2025-01-29T09:32:33","modified_gmt":"2025-01-29T08:32:33","slug":"minificar-html","status":"publish","type":"post","link":"\/ar\/tutoriales\/minificar-html","title":{"rendered":"C\u00f3mo minificar HTML, CSS o JavaScript en WordPress"},"content":{"rendered":"<p>&iquest;No ser&iacute;a fant&aacute;stico si tu sitio tuviera un mejor rendimiento, aunque fuera un poco m&aacute;s r&aacute;pido? Para marcar la diferencia, debes aprender sobre c&oacute;mo minificar HTML u otros archivos en WordPress.<\/p><p>En este art&iacute;culo, explicaremos c&oacute;mo minimizar los archivos CSS, HTML y <a href=\"\/ar\/tutoriales\/quitar-el-javascript-que-bloquea-la-visualizacion-de-contenid-wordpress\">JavaScript<\/a> en WordPress para garantizar el mejor rendimiento posible.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-ES.pdf\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/blog.hostinger.io\/com-ar-tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/eBook-Speed-Up-your-website-ES-1024x283.png\" alt=\"\" class=\"wp-image-25983\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/eBook-Speed-Up-your-website-ES.png 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/eBook-Speed-Up-your-website-ES-300x83.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/eBook-Speed-Up-your-website-ES-150x41.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/eBook-Speed-Up-your-website-ES-768x212.png 768w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/eBook-Speed-Up-your-website-ES-1536x425.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-por-que-es-importante-minificar-tus-archivos\">&iquest;Por qu&eacute; es importante minificar tus archivos?<\/h2><p>Si alguna vez has visto un archivo HTML, CSS o JavaScript, es probable que hayas notado que hay muchos espacios en blanco o saltos de l&iacute;nea. Estos caracteres hacen que el c&oacute;digo sea m&aacute;s f&aacute;cil de leer, pero los archivos que los contienen ser&aacute;n m&aacute;s grandes y m&aacute;s lentos de cargar.<\/p><p>Por eso la minificaci&oacute;n de WordPress es crucial para quienes tienen un sitio. El proceso elimina los espacios en blanco, l&iacute;neas y caracteres innecesarios del c&oacute;digo y da como resultado datos m&aacute;s compactos.<\/p><p>Aunque muchos expertos sostienen que la minificaci&oacute;n no supone una gran diferencia, nosotros la recomendamos altamente. Hay que exprimir cada pedazo de optimizaci&oacute;n que se pueda conseguir para mejorar la experiencia del usuario. Despu&eacute;s de todo, incluso una fracci&oacute;n de segundo importa.<\/p><h2 class=\"wp-block-heading\" id=\"h-dos-formas-simples-de-minificar-archivos\">Dos formas simples de minificar archivos<\/h2><p>Puedes minificar tus recursos de WordPress manualmente o utilizar un plugin. Sigue leyendo para saber qu&eacute; es lo que m&aacute;s te conviene.<\/p><h3 class=\"wp-block-heading\" id=\"h-minificar-archivos-manualmente\">Minificar archivos manualmente<\/h3><p>Cuando decimos &ldquo;manualmente&rdquo;, no significa que tengas que eliminar los caracteres innecesarios por ti mismo. Hay muchas herramientas &uacute;tiles que pueden acelerar el proceso. Sin embargo, es necesario que subas los archivos minificados a tu sitio despu&eacute;s, as&iacute; que ten esto en cuenta al seguir esta gu&iacute;a.<\/p><ol class=\"wp-block-list\">\n<li>Localiza los archivos que quieres minificar utilizando <strong><a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noopener\">GTMetrix<\/a><\/strong>. Introduce la URL de tu sitio web y la herramienta te mostrar&aacute; los archivos que puedes optimizar.<br><img decoding=\"async\" class=\"aligncenter wp-image-13304 size-full\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/gtmetrix-minify-tab.jpg\" alt=\"Pesta&ntilde;as de minificar en GTmetrix\" width=\"1150\" height=\"753\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/gtmetrix-minify-tab.jpg 1150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/gtmetrix-minify-tab-300x196.jpg 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/gtmetrix-minify-tab-1024x670.jpg 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/gtmetrix-minify-tab-150x98.jpg 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/gtmetrix-minify-tab-768x503.jpg 768w\" sizes=\"(max-width: 1150px) 100vw, 1150px\" \/><\/li>\n\n\n\n<li>Haz clic en <strong>See Optimized Version<\/strong> para descargar las versiones minificadas.<\/li>\n\n\n\n<li>Usa un <strong>cliente FTP<\/strong> para sobrescribir los archivos originales en el directorio de tu sitio con las versiones minificadas. Tambi&eacute;n puedes utilizar el <strong>administrador de archivos del hPanel<\/strong>.<\/li>\n<\/ol><p>Como alternativa, puedes utilizar <a href=\"http:\/\/minifycode.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Minify Code<\/strong><\/a>, una herramienta de minificaci&oacute;n de WordPress para minificar HTML, CSS y JavaScript por separado:<\/p><ol class=\"wp-block-list\">\n<li>Descarga los archivos que quieres minificar de tu sitio web. Guarda una copia como respaldo.<\/li>\n\n\n\n<li>Copia el contenido del archivo y p&eacute;galo en la herramienta de minificaci&oacute;n adecuada.<br><img decoding=\"async\" class=\"aligncenter wp-image-13305 size-full\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/minify-code-1320x616-1.jpg\" alt=\"Ejemplo de Minify Code\" width=\"1320\" height=\"616\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/minify-code-1320x616-1.jpg 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/minify-code-1320x616-1-300x140.jpg 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/minify-code-1320x616-1-150x70.jpg 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/minify-code-1320x616-1-768x358.jpg 768w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/li>\n\n\n\n<li>Una vez hecho esto, pega el c&oacute;digo en el archivo descargado y s&uacute;belo al directorio de tu sitio web.<\/li>\n<\/ol><p>Si quieres evitar lidiar con el c&oacute;digo, revisa el segundo m&eacute;todo a continuaci&oacute;n.<\/p><h3 class=\"wp-block-heading\" id=\"h-utilizar-un-plugin-de-minificacion-de-wordpress\">Utilizar un plugin de minificaci&oacute;n de WordPress<\/h3><p>Utilizar un plugin de minificaci&oacute;n de WordPress es mucho m&aacute;s f&aacute;cil, ya que la herramienta minificar&aacute; tus archivos autom&aacute;ticamente. Aqu&iacute; est&aacute;n nuestras mejores opciones para hacerlo, seleccionadas en base a sus caracter&iacute;sticas y facilidad de uso:<\/p><ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/es.wordpress.org\/plugins\/fast-velocity-minify\/\" target=\"_blank\" rel=\"noopener\"><strong>Fast Velocity Minify<\/strong><\/a> minifica tus archivos JavaScript y CSS utilizando PHP Minify. Incluso puedes pedir al desarrollador que configure opciones de optimizaci&oacute;n personalizadas para el plugin.<br><img decoding=\"async\" class=\"aligncenter wp-image-13308 size-full\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/fast-velocity-minify.jpg\" alt=\"Fast Velocity Minify, plugin de WordPress para minificar\" width=\"1171\" height=\"377\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/fast-velocity-minify.jpg 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/fast-velocity-minify-300x97.jpg 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/fast-velocity-minify-150x48.jpg 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/fast-velocity-minify-768x247.jpg 768w\" sizes=\"(max-width: 1171px) 100vw, 1171px\" \/><\/li>\n\n\n\n<li><a href=\"https:\/\/es.wordpress.org\/plugins\/bwp-minify\/\" target=\"_blank\" rel=\"noopener\"><strong>Better WordPress Minify<\/strong><\/a> se asegura de que las minificaciones no afecten a tu tema ni a otros plugins. Adem&aacute;s, el plugin tambi&eacute;n proporciona muchas caracter&iacute;sticas convenientes, como la integraci&oacute;n de <a href=\"\/ar\/tutoriales\/que-es-cdn\/\"><strong>CDN<\/strong><\/a> y la compatibilidad multisitio.<br><img decoding=\"async\" class=\"aligncenter wp-image-13309 size-full\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/better-wordpress-minify.png\" alt=\"Better WordPress Minify\" width=\"1432\" height=\"291\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/better-wordpress-minify.png 1432w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/better-wordpress-minify-300x61.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/better-wordpress-minify-1024x208.png 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/better-wordpress-minify-150x30.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/better-wordpress-minify-768x156.png 768w\" sizes=\"(max-width: 1432px) 100vw, 1432px\" \/><\/li>\n\n\n\n<li><a href=\"https:\/\/es.wordpress.org\/plugins\/wp-super-minify\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Super Minify<\/strong><\/a> es un plugin de minificaci&oacute;n de WordPress que puede minificar, combinar y almacenar en cach&eacute; los archivos de tu sitio. Adem&aacute;s, es una de las herramientas m&aacute;s sencillas y ligeras disponibles.<\/li>\n<\/ul><p>Sea cual sea el plugin que elijas, todo lo que tienes que hacer es elegir los archivos que quieres minificar y la herramienta trabajar&aacute; en segundo plano.<\/p><p>Sin embargo, dado que esos plugins ofrecen otras caracter&iacute;sticas, ser&iacute;a estupendo que los probaras todos para ver cu&aacute;l te aporta m&aacute;s valor.<\/p><h2 class=\"wp-block-heading\" id=\"h-comprobar-los-cambios-tras-la-minificacion\">Comprobar los cambios tras la minificaci&oacute;n<\/h2><p>Aseg&uacute;rate de comprobar que has optimizado tu sitio al m&aacute;ximo utilizando GTMetrix. La herramienta puntuar&aacute; el tama&ntilde;o de tus archivos y mostrar&aacute; los problemas no resueltos.<\/p><p>Por ejemplo, nuestra prueba muestra que obtuvimos una puntuaci&oacute;n de 99 para el CSS, con dos archivos que podr&iacute;an mejorarse m&aacute;s:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"177\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/css-minify.jpg\" alt=\"Antes de minificar CSS\" class=\"wp-image-13310\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/css-minify.jpg 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/css-minify-300x52.jpg 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/css-minify-150x26.jpg 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/css-minify-768x133.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Una vez solucionados esos problemas, obtuvimos una puntuaci&oacute;n perfecta de 100:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"121\" src=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/perfect-css-score.jpg\" alt=\"Obtuvimos la puntuaci&oacute;n perfecta tras minificar CSS\" class=\"wp-image-13311\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/perfect-css-score.jpg 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/perfect-css-score-300x35.jpg 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/perfect-css-score-150x18.jpg 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2017\/04\/perfect-css-score-768x90.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><figure class=\"wp-block-image size-large\"><a href=\"\/ar\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/com-ar-tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2023\/02\/ES-Web-hosting_in-text-banner-1536x450.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>Minificar archivos HTML, CSS o JavaScript en WordPress es una optimizaci&oacute;n pr&aacute;ctica que puede mejorar el rendimiento de tu sitio web. Y lo mejor es que cualquiera puede hacerlo sin problemas.<\/p><p>Echemos un vistazo una vez m&aacute;s a c&oacute;mo minificar archivos de WordPress:<\/p><ul class=\"wp-block-list\">\n<li><strong>Minimiza los archivos manualmente:<\/strong> usa <a href=\"http:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noopener\">GTMetrix<\/a> para descargar los archivos optimizados o acorta el contenido usando <a href=\"http:\/\/minifycode.com\/\" target=\"_blank\" rel=\"noopener\">Minify Code<\/a>. Luego, reemplaza los archivos en el directorio de tu sitio web por los nuevos.<\/li>\n\n\n\n<li><strong>Utiliza un plugin para minificar de WordPress<\/strong>: instala uno de los plugins que recomendamos y ajusta las configuraciones seg&uacute;n tus preferencias. La herramienta se encargar&aacute; del resto.<\/li>\n<\/ul><p>Una vez hayas terminado, aseg&uacute;rate de obtener una puntuaci&oacute;n perfecta en GTMetrix.<\/p><p>Haznos saber en la secci&oacute;n de comentarios si tienes alg&uacute;n problema.<\/p><p><span style=\"font-weight: 400\"><\/span><\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Lecturas sugeridas<\/h4>\n                    <p><br>\n<a href=\"\/ar\/tutoriales\/optimizar-wordpress\/\">La mejor gu&iacute;a para optimizar WordPress<\/a><br>\n<a href=\"\/ar\/tutoriales\/compresion-gzip\">Mejora del rendimiento del sitio web: compresi&oacute;n Gzip<\/a><br>\n<a href=\"\/ar\/tutoriales\/extension-keep-alive\">Mejora del rendimiento del sitio web: habilitar Keep Alive<\/a><br>\n<a href=\"\/ar\/tutoriales\/quitar-el-javascript-que-bloquea-la-visualizacion-de-contenid-wordpress\">&iquest;C&oacute;mo reparar o Quitar el javascript que bloquea la visualizaci&oacute;n de contenido en WordPress?<\/a><br>\n<span style=\"font-weight: 400\"><\/p>\n                <\/div>\n<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&iquest;No ser&iacute;a fant&aacute;stico si tu sitio tuviera un mejor rendimiento, aunque fuera un poco m&aacute;s r&aacute;pido? Para marcar la diferencia, debes aprender sobre c&oacute;mo minificar HTML u otros archivos en WordPress. En este art&iacute;culo, explicaremos c&oacute;mo minimizar los archivos CSS, HTML y JavaScript en WordPress para garantizar el mejor rendimiento posible. &iquest;Por qu&eacute; es importante [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ar\/tutoriales\/minificar-html\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":85,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"C\u00f3mo Minificar HTML, CSS o JavaScript en WordPress %page%","rank_math_description":"En este art\u00edculo te explicamos c\u00f3mo minificar archivos HTML, CSS o JavaScript en WordPress para acelerar tu sitio.","rank_math_focus_keyword":"minificar html","footnotes":""},"categories":[5701],"tags":[14170],"class_list":["post-4372","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web","tag-minificar-html"],"hreflangs":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/4372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/comments?post=4372"}],"version-history":[{"count":17,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/4372\/revisions"}],"predecessor-version":[{"id":34055,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/4372\/revisions\/34055"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/media?parent=4372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/categories?post=4372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/tags?post=4372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}