¿Cómo minimizar los archivos JavaScript, CSS y HTML en WordPress?

¿Le gustaría reducir los archivos JavaScript, CSS y HTML en el sitio web de WordPress? La minería de código puede reducir el tamaño del archivo hasta en un 40%. Y en algunos casos, incluso el 50%. La reducción del tamaño del archivo afecta la velocidad de carga del sitio, y su sitio de WordPress recibe un pequeño aumento de velocidad. En este artículo, le diré cómo reducir los archivos JavaScript, CSS y HTML en WordPress.
¿Qué es la minificación?
La importancia de la minimización
Minificación del código en la prueba de velocidad
Formas de reducir JavaScript, CSS y HTML
¿Qué es la minificación? La minimización significa eliminar las partes innecesarias de los archivos JavaScript, CSS y HTML para ser más compactos. El desarrollador escribe el código de computadora y las personas. Tienen que hacer que el código sea legible.
Hay interrupciones de línea, espacios blancos, comentarios, caracteres adicionales, etc., en código para comprenderlo. Pero el navegador no necesita todos los elementos innecesarios del código para ejecutarlo. La minificación significa eliminar todo el espacio en blanco y caracteres adicionales del código. Ahora, el hombre puede no entender el código, pero para las computadoras, es lo mismo que antes. Sin embargo, el tamaño del archivo se ha reducido debido a la eliminación de todas las partes adicionales que no son necesarias. Significa una carga más rápida del sitio. Minimización de JavaScript minimizando a JavaScript toallas todos los comentarios de JavaScript (//) y el espacio en blanco en el código.
Un código de JavaScript limpio escrito por un programador muestra lo siguiente: Let Wrapper Const Sleep = (MS) => New Promise (resolve => setTimeOut (MS)) Async Función Writingall (StringTarer, Container) {wrapper = document.Queryselector (‘[[[[[[[[[ ‘+Container+’] ‘) const StringsContainer = document.getElementsByClassName (stringTartarget) while (wrapper) {for (i = 0; i <stringcontainer.length; i ++) {const string = stringsContainer [i].) Inv a Sleep ((espera (espera el sueño ( 1000) esperar borrado () esperar el sueño (1000)};}};Async Función Write (Text) {LET index = 0 while (index New Promise (t => setTimeOut (t, e)); async función wringall (e, t) {wrapper = document.querySector (“+t+”] “); const n = document .GetElementsByClassName (e); for (; wrapper;) para (i = 0; i <n.length; i ++) {const e = n [i]., Espera borrado (), espera el sueño (1e3)}} ASYNC Función Escribir (e) {Let t = 0; for (; t Div {min-height: 20px; Texto-transformación: uppercase; Espaciado de letras: 1px; Pantalla: Flex; Alinine-Ritams: Flex-End; Font-Weight: Bold; Color naranja; &: After {content: “”; Ancho: 10px; Altura: 4px; Bloqueo de pantalla; Fondo: negro; Color naranja; Botón de margen: 4px; Margen-izquierda: 2px; Duración de animación: 350 ms; Nombre de animación: Fade; Dirección de animación: alternativa; Animación -iteración -conteo: infinito; }}} @Keyframes Fade {de {opacidad: 1; } a {opacidad: 0; }} Después de la minería, acorta.
.wrapper {relleno: 10px; margen: 0 automóvil; ancho: 500px; text-align: centro; absoluto; arriba: 50%; izquierda: 50%; transformación (-50%,-50%); visualización: ninguno} h2 {font-size: 50px; margin: 0; color:#3a3a3a; text-align: izquierda} a {opacidad: 0} html minificación html elimina espacio adicional, formato, interrupciones ordinarias y contenido similar. Un código HTML se ve así:
ui & ux diseñador WebDesigner Frontend Developer

Soy John Doe

Después del minimento, muestra el mismo código HTML:
ui & ux diseñador WebDesigner front and Development

I ‘M John Doe

Tomé el código de este proyecto CodePen para explicar el mini. La importancia de minimizar como puede ver, la minimización del código elimina mucho espacio de los archivos. El tamaño se reduce y la página se vuelve más ligera que antes. Esto mejora la velocidad de carga del sitio. Aunque muchos expertos dicen que esto ha marcado una pequeña diferencia en la velocidad, esta diferencia es insignificante.
Pero si puedes marcar la diferencia, vale la pena hacerlo. Y es muy simple hacerlo y no hay riesgo involucrado. La minería de código en la prueba de velocidad debe ejecutar la prueba de velocidad GTMetrix para verificar si sugiere o no el código mini. Para probar, tomo el sitio web HarperCollins India.
Gtmetrix ofrece este resultado con respecto al minihavocript. Después de ver, hay muchos scripts que podemos reducir el tamaño del archivo minimizándolos. Pruebe la velocidad de su sitio y verifique para obtener el problema de minimización del código. Formas de reducir JavaScript, CSS y HTML Hay dos formas simples de reducir JavaScript, CSS y HTML en WordPress.
Método manual


Usando complemento

El método manual manual no significa que eliminará todos los personajes del código solo. Muchas herramientas lo ayudarán a reducir los archivos de código. Pero debe reemplazar manualmente los archivos de código con los archivos de código minimizados. Paso 1: Encuentre el código completo que requiere minimización. Esto se puede hacer mediante la prueba de velocidad GTMetrix. Hicimos el texto antes y podemos ver como resultado, le brinda la lista de todos los archivos. Paso 2: Descargue la versión optimizada. Haga clic en la “versión optimizada”. Este es el código minimizado que le ofrece GTMTRIX. Paso 3: Cargar archivos
Ahora cargue los archivos JavaScript, CSS y HTML descargados en WordPress. Debe reemplazar los archivos con el código fuente con la versión reducida. El cliente FTP no puede hacer esto o puede reemplazar los archivos con CPanel. Alternativamente: no tiene que descargar la “versión optimizada” ofrecida por GTMetrix. Descargue los archivos de código de su sitio de WordPress, luego reduzca las herramientas en línea. Herramientas para reducir JavaScript
Minifier de JavaScript
Compilador de cierre de Google
Uglify.js
Herramientas para reducir CSS
Minificador CSS
desarrollo de códigos
CleanCSS
Csstidy
CSS minifica por onlinedomintools
Minificador de depuración CSS
Herramientas para reducir HTML
Reducir el compresor HTML
Fijador de texto
Minimización html
Use un complemento de complemento Minify de WordPress La instalación de un complemento Minify es mucho más cómodo porque la herramienta reducirá automáticamente los archivos. No tiene que descargar y cargar archivos manualmente. Muchos complementos de calidad pueden hacer esta tarea. Incluso los complementos de caché populares tienen esta función. Pero aquí están los mejores complementos de WordPress Minify: optimizar automáticamente
AutoPtimize es uno de los complementos de WordPress más populares. Este complemento fácil le brinda la opción de seleccionar el código que desea optimizar. Puede reducir HTML, CSS y JavaScript. También puede funcionar con CDN para reducir el tamaño del archivo con el complemento y servirlos a través de CDN. WP Super Minify
WP Super Minify hace lo que dice. Los complementos combinan y reducen los archivos JavaScript, CSS y HTML en unos pocos clics. WP Super Minify tiene más de 10,000 instalaciones activas y funciona bien. No hay muchas características en este complemento, porque su única tarea es minimizar el código. Minimización rápida de la velocidad