Cómo minimizar HTML, CSS y JavaScript con el complemento de optimización automática

Google y otros motores de búsqueda le dan valor a su sitio web si se carga tan rápido. Debido a que ninguno de los espectadores tiene muchos pacientes para esperar mucho tiempo para ver su contenido y solo tiene 1,5 segundos para captar su atención. Si su sitio tarda demasiado en abrirse, generalmente pierde a sus espectadores. Por lo tanto, esto es esencial para acelerar su sitio web. Hay varias formas de optimizar su sitio. Pero una de las partes más importantes es Minificar HTML, CSS y JavaScript.


Si alguna vez hiciste una prueba de velocidad en Google PageSpeed o GTmetrix, probablemente veas esa opción.

Cada sitio web carga con muchos archivos que contienen HTML, CSS y JavaScript. Y la mayoría de los archivos incluyen mucho espacio, comentarios, delimitadores de bloque, etc. Por lo tanto, se necesita mucho tiempo adicional para cargar correctamente.

Esto también depende de la calidad del tema. Por ejemplo, una calidad de tema premium siempre es mejor que un tema gratuito. Los temas premium están bien codificados y creados por desarrolladores altamente calificados. Pero todos los temas no son iguales y tienen diferentes tipos de funciones. Entonces por Minificando esos archivos HTML, CSS y JavaScript, puede aumentar estratégicamente la velocidad de su sitio y hacer felices a sus visitantes.

¿Qué es Minify y por qué es beneficioso??

Minificación es un lenguaje de programación que elimina todos los caracteres innecesarios del código fuente sin cambiar su funcionalidad. Estos caracteres innecesarios generalmente contienen “caracteres de espacio en blanco, nuevos caracteres de línea, comentarios, y delimitadores de bloque “. 

Antes Minify y After Minify

Se utilizan para agregar legibilidad al código, pero no es necesario que se ejecute. De esta forma, reduce la cantidad de código que debe transferirse a través de la web y ahorra ancho de banda. Entonces por minimizando HTML, CSS y JavaScript, puedes eliminar fácilmente esos caracteres innecesarios de tu sitio y significativamente incrementar la velocidad de tu sitio. 

Cómo minimizar HTML, CSS y JavaScript

Hay dos formas de minimizar HTML, CSS & JavaScript Puedes hacerlo editando el código de tu tema o puedes usar un complemento de WordPress, llamado Optimización automática. En este artículo, le mostraremos los dos procesos sobre Cómo minimizar HTML, CSS y JavaScript.

Para conocer el archivo HTML, CSS o JavaScript exacto que está causando el problema, debe verificarlo en cualquier herramienta de prueba de velocidad del sitio como Herramienta Google PageSpeed o GTmetrix. Porque no todos sus archivos contienen este tipo de caracteres innecesarios.

Después de verificar el resultado de su sitio, lo obtendrá. Aquí hay una imagen debajo de mi sitio que considera arreglando CSS y JavaScript.

Minss CSS, JavaScript

Difiere en la calidad de su tema. Por lo tanto, no hay nada de qué preocuparse si ves que ambos dicen Minify y es mejor obtener un tema Premium.

Existen algunas herramientas en línea mediante las cuales puede Minificar código HTML, CSS y JavaScript.. 

Antes de realizar cualquier cambio, haga una copia de seguridad de ese archivo.

# 1 Código Minify:

Herramienta Minify Code

Código Minify es una herramienta de minería todo en uno. Puede minimizar sus códigos JavaScript, CSS y HTML. Todo lo que necesita para copiar el código HTML o CSS o JavaScript y pegarlo aquí. Luego haga clic en Minify Opción. Esta herramienta minimiza automáticamente su código. Después de eso, copie el código Minified en ese archivo.

También puede minimizar su código CSS y JavaScript como código HTML con esa herramienta.

# 2 Willpeavy:

Willpeavy

Willpeavy es otra gran herramienta para Minify HTML códigos Esta herramienta funciona de la misma manera que el código minify. Minimiza HTML y cualquier CSS o JS incluido en su marcado. Para usar esta herramienta, solo necesita copiar su código aquí y hacer clic en Minificar.

Minify usando el complemento de optimización automática

Optimización automática

Si no está familiarizado con dicha codificación, es mejor usar un complemento y recomendado para principiantes. Así que aquí viene el Complemento de optimización automática para WordPress los usuarios.

La optimización automática concatena todos los scripts y códigos de estilo y los hace más pequeños que se cargan tan rápido. Se minimiza todo el HTML, CSS & Código Javascript en sí mismo y hacer que su página sea realmente ligera. Con Minification, este complemento agrega encabezados caducados y mueve estilos al encabezado de página y puede mover scripts al pie de página.

Optimización automática de la configuración recomendada

Puedes hacer todo fácilmente desde la configuración del complemento. Después de activar este complemento, vaya a Configuraciones> Optimización automática.  Haga clic en el botón “Mostrar configuración avanzada”.

En el HTML sección, marque “Optimizar código HTML” y “Mantener comentarios HTML” para un rendimiento más rápido.

Opciones de optimización automática de HTML

En el JavaScript sección, habilite “Optimizar código JavaScript”. También puede habilitar “Forzar JavaScript en” para cargar JS temprano y reducir la posibilidad de errores de JS. En caso de que su JS rompa los scripts, entonces puede habilitar “Agregar envoltura try-catch”.
Opciones de JavaScript de optimización automática

En CSS sección, habilite “Optimizar código CSS”, “Agregue también CSS en línea”. También puede habilitar “Inline and Defer CSS” si ha minimizado CSS. Pruebe esta herramienta para minimizar su CSS y pegarlo en el cuadro.

Opciones de optimización automática de CSS

Entra tu CDN URL en el campo “CDN Base URL”. Por ejemplo, “//cdn.example.com/”.

Y por último, habilite “Guardar script agregado / css como archivo estático”. Pero asegúrese de que su servidor web pueda manejar adecuadamente la compresión y la caducidad.

Opciones de optimización automática de CDN

Después de minimizar su código, no olvide verificar la velocidad de su sitio nuevamente. Luego compárelo con los resultados pasados. Si su sitio tiene algún problema o no se muestra correctamente, puede intentar borrar el Cache

Conclusión

Minificar HTML, CSS y JS es beneficioso para su sitio Elimina los caracteres innecesarios de su código y los hace más pequeños que son amigables para el navegador. De esta manera, puede mejorar la velocidad de carga de su sitio.

Si este tutorial ayuda a Minificar HTML, CSS y JavaScript, comparta este artículo en Facebook, Gorjeo, Google+.

Artículos relacionados,

  • Cómo aprovechar el almacenamiento en caché del navegador en WordPress
  • Cómo optimizar la base de datos de WordPress usando WP-Sweep
  • 7 Mejor optimizador de imagen para WordPress 2017
  • Cómo habilitar fácilmente la compresión Gzip en WordPress para una carga más rápida
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map