Optimización del código del sitio JS y CSS en línea: una guía detallada

Escucha este artículo

Optimización de código JS y CSS del sitio web, es uno de los aspectos más significativos de la optimización técnica del sitio web. La razón de esto es la liberación de más recursos del sitio, debido a la reducción de las llamadas a la base de datos y la mejora de la legibilidad de la estructura del código en sí.

Como regla general, la optimización del código JavaScript y CSS aumenta significativamente la velocidad de respuesta del sitio. Por lo tanto, el sitio funciona más rápido y carga la parte del servidor con menos seriedad.

El contenido del artículo:

• Código JS y CSS: ¿qué es?
• Optimización del código JS y CSS: ¿por qué necesita optimizar scripts y estilos?
• Módulo Gzip para Apache, Nginx y Node.js
• Optimizar Javascript con Minificación
• Optimización de CSS para el uso de fuentes web
• Uso de la opción de descarga de fuentes adecuada
• Optimización de código en línea
• Minimice JS y CSS con complementos de CMS Wordpress

Código de sitio JS y CSS: ¿qué es?

JavaScript y CSS son lenguajes de programación comunes, cada uno de los cuales aporta cierta funcionalidad al sitio. Gracias al uso de los principales lenguajes de programación web HTML, JS, CSS, se logra una interacción ideal del usuario con el sitio.

JavaScript es un lenguaje de programación común. Le permite crear varios scripts. La mayoría de estos scripts se ejecutan en el navegador del usuario. JavaScript mejora la interacción del usuario con el sitio. Obtener un determinado conjunto de información utilizando miniaplicaciones (scripts) en el sitio. La visualización y salida de los scripts JS se produce conectando estos últimos en el código HTML de la página. Casi todos los sitios usan JS (JavaScript) en su composición.

CSS - se refiere a uno de los principales lenguajes de programación del sitio. CSS (archivo de estilo): contiene información sobre la apariencia de casi cualquier elemento del sitio. Desde el color y la ubicación hasta la notoria animación de un elemento de página en particular.

Optimización del código JS y CSS: ¿por qué es necesario?

JS y CSS: por sí mismos, tienen un código pesado bastante grande que tiene muchos elementos superfluos. Es difícil para un navegador leer un gran lienzo de códigos en una fracción de segundo. Por lo tanto, la carga de la página y de todo el sitio en su conjunto se ralentiza. La optimización de estos archivos tiene como objetivo reducir el tamaño del código, eliminando todo lo superfluo. Esto aplica a:

• Caracteres no utilizados y adicionales;
• espacios;
• Líneas de código incompletas y no funcionales.

El proceso en sí es similar a comprimir un archivo normal. El peso y el tamaño de este último se vuelve mucho más pequeño. Pero, sin embargo, el código se vuelve completamente ilegible para los humanos. Pero los robots de búsqueda y los navegadores eluden perfectamente y comprenden toda la estructura del archivo. El tiempo dedicado a la ronda se reduce varias veces. Gracias a esta compresión, la velocidad de descarga aumenta y la respuesta general mejora.

Módulo Gzip para Apache, Nginx y Node.js

Gzip es una tecnología increíble que se creó en un momento en que Internet no era tan rápido como lo es hoy. Los archivadores eran una tecnología popular (desde entonces, su popularidad ha disminuido debido a que las unidades flash USB pueden proporcionar hasta 1 TB de almacenamiento).

La idea era usar archivadores para el tráfico web en Internet (similar a la creación de archivos de sitios web), por lo que gzip fue diseñado para comprimir archivos en servidores web al comprimir archivos estáticos (de texto) a 99% de su tamaño original. Debido a que JavaScript es un archivo de texto, gzip se puede usar para comprimir archivos JavaScript y reducir el tiempo de carga de la página.

Optimizar Javascript con Minificación

La optimización es un tipo especial de minificación de JavaScript. Dichos minimizadores no solo eliminan espacios innecesarios, comas, comentarios, etc., sino que también ayudan a evitar el "código muerto":

• Compilador de cierre de Google
• UglifyJS
• Minificador de Microsoft AJAX

Optimización de CSS para el uso de fuentes web

Google Fonts y creadores de fuentes similares han revolucionado las fuentes web, pero unas pocas líneas de código de fuente pueden consumir cientos de kilobytes de ancho de banda.

1. Descargue solo las fuentes que necesita: elimine las fuentes no utilizadas y verifique si se necesitan fuentes nuevas.
2. Descargue solo los pesos y estilos que necesite: la mayoría de los fabricantes de fuentes pueden restringir las descargas a ciertos conjuntos de caracteres (por ejemplo, solo latinos), pesos (grosor) y cursiva (inclinación). Los navegadores pueden representar automáticamente los estilos que faltan, aunque los resultados pueden ser deficientes.
3. Limite la cantidad de caracteres que necesita: las fuentes que se usan con poca frecuencia se pueden limitar a ciertos caracteres. Por ejemplo, el título "Tutorial de CSS" en Open Sans se puede definir agregando el parámetro & text= a la cadena de consulta de Google Fonts: fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
4. Considere las fuentes variables: las fuentes variables definen una amplia variedad de estilos, grosores y cursivas mediante la interpolación de vectores. El archivo de fuente es un poco más grande, pero solo necesita uno, no varios. La fuente recursiva demuestra la flexibilidad de las fuentes variables.
5. Descargue fuentes de su servidor local. Las fuentes de alojamiento propio son más eficientes. Se requieren menos búsquedas de DNS y puede limitar la carga de WOFF2, compatible con todos los navegadores modernos. Los navegadores más antiguos (IE) pueden volver a la fuente del sistema operativo.
6. Considere las fuentes del sistema operativo: esta fuente web de 500K puede verse genial, pero ¿alguien se dará cuenta si cambia al dominio público Helvetica, Arial, Georgia o Verdana? Las fuentes seguras para el sistema operativo o la web son una manera fácil de mejorar la productividad.

Uso de la opción de descarga de fuentes adecuada

Las fuentes web pueden tardar unos segundos en cargarse y procesarse. Necesitas:

1. Mostrar un destello de texto sin estilo (FOUT): La primera fuente alternativa disponible se usa primero, pero se reemplaza cuando la fuente web está lista.
2. Mostrar flash de texto invisible (FOIT): El texto no se muestra hasta que la fuente web está lista. Este es el proceso predeterminado en los navegadores modernos, que normalmente esperan tres segundos antes de volver a una fuente alternativa.
   Ninguno es perfecto.

La propiedad CSS font-display y la configuración Google Font & display= pueden elegir una alternativa:

• auto: Comportamiento predeterminado del navegador (generalmente FOIT).
• bloque: Efectivamente FOIT. El texto es invisible hasta por tres segundos. No hay sustitución de fuentes, pero el texto puede aparecer después de un tiempo.
• swap: Efectivamente FOUT. El primer recurso alternativo se utiliza hasta que la fuente web esté disponible. El texto es inmediatamente legible, pero el efecto de reemplazo de fuente puede ser molesto. El Coincidencia de estilo de fuente se puede utilizar para definir un respaldo de tamaño similar.
• fallback: un compromiso entre FOIT y FOUT. El texto es invisible durante un breve período de tiempo (generalmente 100 ms), luego se utiliza el primer respaldo hasta que la fuente web esté disponible.
• opcional: similar al respaldo, excepto que no hay sustitución de fuentes. La fuente web solo se utilizará si está disponible durante el período inicial. Lo más probable es que la vista de la primera página muestre la fuente alternativa, mientras que las vistas de página posteriores utilizarán la fuente web descargada y almacenada en caché.

El uso de intercambio, copia de seguridad u opcional puede proporcionar un aumento notable del rendimiento.

Optimización de código JS y CSS en línea

En Internet, hay una cantidad bastante grande de servicios en línea. Que en un par de minutos, pueden hacer todo el trabajo de rutina de comprimir JavaScript y archivos de estilo. Todos ellos tienen sus propios algoritmos para trabajar con código. En el contexto de tal diversidad, se pueden distinguir dos servicios más significativos. Su umbral de compresión efectivo es mucho más alto que el de las herramientas en línea similares de la competencia. Echemos un vistazo más de cerca a estas dos herramientas web:

cssresizer.com
Eficiencia de compresión del 84% en comparación con competidores cercanos. La validez del código se conserva, incluso con una compresión significativa. De esta manera puede obtener un gran código optimizado. Trabajar con esta herramienta es intuitivo y existen varios métodos de compresión:

• Máximo;
• rápido;
• Descompresión;

Puedes comprimir por:

• URL - dirección;
• Subir archivo;
• Entrada directa de código;

Refresh-sf.com

Otra interfaz web igualmente poderosa para minimizar JavaScript, CSS y HTML. La herramienta utiliza UglifyJS 2, Clean-CSS y HTML Minifier para funcionar. La eficiencia de compresión en este caso alcanza 85%, sin violaciones visibles de la validez del código. La compresión se puede realizar ingresando directamente el código en la ventana de herramientas.

Minimice JS y CSS con complementos de CMS Wordpress

Como todos sabemos, tiene una importante distribución en todo el mundo. Según los datos de 2018, este cms ocupa una posición de liderazgo. Considere un par de complementos de optimización populares específicamente para WordPress:

Complemento de optimización automática

Complemento de optimización de HTML, JS y CSS. Es uno de los complementos más populares para acelerar sitios en CMS Wordpress. Tiene una interfaz de configuración simple y funcional. El proceso de compresión ocurre sobre la marcha.

• Optimización (HTML, JS, CSS) y configuración de CDN.
• Eliminación de emojis, fuentes de Google, cadenas de consulta de recursos estáticos.
• Posibilidad de optimizar imágenes.

Complemento Webcraftic Clearfy

No es tan antiguo como el complemento anterior. Pero también tiene demanda y es popular entre competidores similares. Webcraftic Clearfy: tiene una interfaz de configuración bastante compleja. Consiste en una combinación combinada de complementos, para obtener el mejor resultado.

Las páginas de configuración se dividen en secciones de menú. Por lo tanto, es posible optimizar partes específicas del sitio, por ejemplo, HTML. ¿Qué puede hacer este complemento?

• Optimización (imágenes, JS, CSS, HTML y scripts);
• Transliteración cirílica y eliminación de duplicados. Trabajando con atributos alt y creando robots.txt adecuados. Trabajar con encabezados de servidor y sus respuestas.
• Eliminación de widgets de WordPress no reclamados.
• Ocultar la versión de WordPress y eliminar las variables de consulta de las consultas estáticas. Ocultar el inicio de sesión del autor y la página de inicio de sesión del administrador.
• Eliminación o limpieza global de comentarios. Guarda el control en los comentarios.
• Configuración del pulso de WordPress y el panel de administración superior.
• Control sobre los componentes del complemento.

En conclusión, se puede sacar una cierta conclusión. Basado en lo anterior, comprimir js y css no es algo tan difícil. Gracias a estas acciones, la velocidad de respuesta de tu proyecto aumentará significativamente.

Leyendo este artículo:

• Optimización del rendimiento de la página web
• Optimización de CSS para la velocidad del sitio: 9 formas

Gracias por leer: AYUDANTE DE SEO | NICOLA.TOP