Pasos sencillos para acelerar su sitio web pesado de imágenes
Publicado: 2019-09-20El propietario del sitio puede eventualmente querer aumentar su velocidad de descarga. Esto aumenta la clasificación de los resultados de búsqueda; además, es más agradable para los visitantes del sitio trabajar con él al obtener una respuesta más rápida a sus acciones.
En busca de una solución rápida y sencilla, los propietarios de sitios instalan una gran cantidad de complementos, que a su vez consumen recursos y solo ralentizan su trabajo. No tenemos nada en contra de los complementos de optimización, pero deben usarse al punto y con conocimiento de los principios de su trabajo.
Además, los propietarios de sitios que nunca han experimentado la administración a menudo no entienden bien la optimización. En su entendimiento, la optimización es la aceleración del guión a toda costa. La tarea de optimización es producir la velocidad óptima del sitio al precio óptimo de los recursos. Por lo tanto, no puede haber instrucciones universales para todos los sitios.
Hacer que su sitio web sea rápido es una tarea urgente para cualquier propietario de recursos o webmaster. Después de todo, la velocidad de carga de la página es uno de los factores más críticos para el éxito de un recurso web, junto con un contenido de alta calidad y un diseño gráfico hermoso.
La carga lenta aumenta la probabilidad de perder usuarios en ocasiones. Especialmente cuando los visitantes provienen de dispositivos móviles. Las recomendaciones simples para acelerar la carga del sitio, que incluso un usuario sin experiencia puede implementar en la práctica, ayudarán a minimizar la probabilidad de pérdida de tráfico.
1. Optimizar HTML-Code y CSS-, JS-Files
La optimización de la descarga es imposible sin preocuparse por la "limpieza" del código transmitido al navegador del usuario al ingresar al sitio. Una gran cantidad de caracteres en el código fuente afecta significativamente la velocidad de carga, por lo que su brevedad es un factor crítico de éxito.
Elimine caracteres innecesarios, elementos de marcado y etiquetas de código fuente. La automatización del proceso ayudará a agregar una pequeña inserción al principio y al final del código HTML del sitio.
Este método de almacenamiento en búfer de contenido HTML es bastante útil, pero puede crear una carga adicional en la memoria de acceso aleatorio.
Agrupe el mismo tipo de archivos CSS y archivos JS. Las aplicaciones PHP gratuitas como JCH Optimize, Cloudflare o Minify, que se copian en un directorio separado y pasan por todos los archivos del sitio, ayudarán a combinar los elementos.
2. Eliminar solicitudes HTTP adicionales
La carga de elementos de página (javascript, imágenes, CSS y archivos flash) ocupa la mayor parte de los recursos del sistema al cargar un sitio. Las solicitudes HTTP para dichos elementos ralentizan notablemente el sitio.
Para evitar solicitudes "extra", debe reducir la cantidad de componentes de la página. Esto supondrá una disminución proporcional de las llamadas al servidor y acelerará la carga del sitio.
Esto se puede hacer de varias maneras:
- Combine múltiples imágenes en un solo archivo gráfico (sprite CSS);
- Use imágenes en línea (inline-pictures) en la hoja de estilo de la página;
- Múltiples archivos CSS o scripts en una página se fusionan en un solo archivo;
- Minimice la cantidad de escenarios y complementos.
3. Organice JavaScript y CSS en el orden correcto
Se recomienda colocar los archivos CSS en la parte superior del código de la página y el JavaScript en la parte inferior. Después de esta optimización, primero se cargará el contenido estático y luego solo los gráficos dinámicos.
Los elementos flash o las animaciones que requieren más recursos para descargarse no se “desengancharán” y estropearán la impresión del sitio desde los primeros segundos. Esto garantizará una descarga fluida del contenido y aumentará el atractivo estético del recurso.
4. Reducir el Número de Scripts Externos
Los scripts externos son fragmentos de código (textos) a los que se accede a través de un enlace externo. Los enlaces crean solicitudes adicionales a muchos servidores diferentes, lo que finalmente ralentiza el sitio. Para evitar esto, se recomienda utilizar principalmente scripts locales embebidos en la estructura del código fuente de la página.
Por supuesto, centrarse en los scripts locales creará ciertas limitaciones en la apariencia y funcionalidad del sitio. Pero la ventaja de la velocidad de descarga resultante vale estos "sacrificios".
5. Habilitar descarga
Esta funcionalidad de PHP le permite no esperar hasta que el servidor del usuario cargue la información del recurso, sino generarla en partes. Mientras los datos se transmiten al navegador, la ventana abierta no permanecerá vacía sino que se llenará sin problemas con elementos cargables del sitio. Dicha aceleración es especialmente necesaria para recursos web con una interfaz compleja y alto tráfico.
Es mejor colocar la función de descarga al principio del código fuente de la página, inmediatamente después del encabezado. Desde el encabezado, el contenido HTML se abrirá más rápido y también puede habilitar la carga paralela de elementos CSS y JavaScript.
6. Guarda las páginas en caché
El almacenamiento en caché guarda cierta información de las páginas del sitio (flash, gráficos, JavaScript y CSS) en el navegador del usuario. En la próxima ejecución, estos archivos se descargan instantáneamente desde el navegador, lo que le da al sitio una velocidad adicional.
Puede habilitar el almacenamiento en caché agregando un encabezado de vencimiento al código HTML. Los sitios de WordPress se almacenan en caché fácilmente mediante la instalación de complementos con funcionalidad gratuita o parcialmente gratuita, como W3 Total Cache, Cache Enabler o Zen Cach.
Para sitios nuevos, es mejor usar el almacenamiento en caché solo después de que esté completamente listo para el lanzamiento. Si habilita la función durante el desarrollo, es posible que los cambios posteriores no se muestren correctamente en el sitio.
7. Usa un CDN
Red de entrega de contenido: una cadena de servidores dispersos en centros de datos de todo el mundo para aumentar la velocidad a la que se transfiere el contenido a los visitantes. Cuanto más cerca geográficamente está el visitante de los servidores CDN, más rápido se transmiten los paquetes de datos del sitio.
El uso de CDN es especialmente importante para contenidos y portales de alta carga, cuyo público principal está muy alejado de los servidores físicos. Este servicio minimiza el tiempo de espera para las descargas de sitios en el extranjero, lo que contribuye a aumentar su clasificación en los resultados de búsqueda locales. Después de todo, el contenido se descarga desde el servidor de almacenamiento más cercano al usuario en su país.
8. Optimizar gráficos y video
Debe seleccionar los gráficos y el formato de video correctos, ya que el formato de archivo afecta directamente la velocidad a la que se presenta la información a los visitantes.
Formatos recomendados para diferentes contenidos web:
- SVG: para logotipos vectoriales y elementos de interfaz simples;
- PNG: para esquemas y logotipos no vectoriales;
- JPG – para fotos e imágenes;
- MPEG4: para vídeo y animación.
También para video y animación, está disponible un formato WEBM relativamente nuevo. En la mayoría de los casos, proporciona un tamaño de video más pequeño con la misma calidad. Sin embargo, el formulario tiene soporte de navegador limitado (por ejemplo, no hay soporte en el navegador macOS / iOS Safari). Por lo tanto, se recomienda utilizar un archivo WEBM como fuente de video prioritaria e instalar MPEG4 como fuente alternativa. También puede usar el único MPEG4 si compartir es inaceptable o inconveniente.
Por separado, notamos que el formato vectorial (SVG) permite escalar sin pérdida de calidad gráfica.
Etapas de optimización de imágenes.
Muchos CMS populares, como WordPress o Joomla, tienen complementos integrados para optimizar las imágenes del original. Pero este método crea una carga adicional y puede ralentizar el sitio. Cada vez que se carga la página, el navegador primero accede al código fuente y solo luego cambia el tamaño de la imagen sobre la marcha.
Para evitar la pérdida de velocidad al cargar imágenes, ayudarán los editores gráficos integrados en el sistema operativo, como Preview (Mac) o Microsoft Paint (Windows), así como los servicios en línea con una funcionalidad similar. Trabajar con ellos requerirá habilidades mínimas para trabajar con gráficos.
Incluso después de optimizar el tamaño de la imagen, su "peso" suele estar lejos de ser óptimo. Servicios convenientes y gratuitos como ImageResize o TinyPNG ayudan a reducir el tamaño sin pérdida de calidad de imagen. La mayoría de los procesos aquí están automatizados. El usuario solo necesita cargar archivos y descargarlos ya comprimidos al tamaño de imagen óptimo.
9. Aplicar compresión de archivos Gzip
Gzip es un método simple de comprimir archivos del sitio para ahorrar recursos del canal y acelerar la carga. Con Gzip, los archivos se comprimen en un archivo que el navegador puede descargar más rápido y luego descomprimir y mostrar el contenido.
Habilitar el uso de Gzip es bastante simple: solo necesita agregar algunas líneas de código al archivo .htaccess. Por ejemplo, al usar el servidor web Apache, el módulo mod_gzip está disponible para webmasters, para poder activar Gzip, en este caso necesita agregar dicho código a .htaccess
La compresión de archivos Gzip se realiza para reducir la cantidad de solicitudes al servidor desde un navegador. Puesto, esta tecnología reduce el peso inicial de los archivos al 70% para acelerar la descarga.
Agregue el siguiente fragmento de código al archivo de configuración del servidor web ".htaccess".
En el servidor Apache
# BEGIN GZIP COMPRESSION <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule> # END GZIP COMPRESSION
En el servidor Nginx
gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_disable "MSIE [1-6].(?!.*SV1)"; gzip_vary on;
10. Cambiar alojamiento
El método más básico para acelerar las descargas es cambiar de proveedor de hosting. El ahorro en la asignación de recursos a menudo conduce a un deterioro significativo en la calidad de los servicios, lo que socava todos los intentos de acelerar el sitio en la vid.
Si las manipulaciones con el contenido, el código y los complementos no dan resultados, es hora de pensar en elegir un "hogar" más decente para el sitio. En un alojamiento de calidad con alta disponibilidad y soporte técnico atento, el recurso de Internet recibirá un poderoso impulso para aumentar la velocidad del trabajo. Y esto será apreciado por una audiencia agradecida.
La cosa mas importante es…
Es necesario esforzarse por acceder al sitio durante no más de 2-3 segundos. No importa si el sitio se abre durante 2 o incluso 3 segundos, pero si hay más, entonces esta es una razón para pensar en acelerar la carga del sitio.
También debe comprender que hay dos parámetros para la velocidad de carga de la página.
El primero es la velocidad a la que se muestra el contenido (en este punto, la página ya está abierta y se muestra al usuario, mientras que el indicador de página transparente aún se muestra hasta que todos los archivos estáticos y los scripts asincrónicos están conectados).
Además, el segundo es la velocidad de formación real de la página, cuando se conectó todo lo que había que conectar. Debe concentrarse en el primer parámetro, es decir, no deben transcurrir más de tres segundos antes de que se muestre el diseño del sitio.
Conclusión
No puede ignorar una cifra como la velocidad de carga del sitio. Fue él quien, desde los primeros segundos, crea un ambiente confortable para los visitantes. Cuanto más rápido obtenga el usuario el contenido deseado, mayor será la probabilidad de que se forme una imagen positiva del recurso y se genere lealtad hacia él.