Domine la velocidad de su sitio web con estas herramientas gratuitas

Publicado July 10th, 2019 en Aplicaciones web en General. Etiquetado: optimización, velocidad de sitio web.

¡La velocidad importa! Al menos en lo que respecta a obtener la información correcta en el momento adecuado. Al navegar por Internet, uno de los aspectos más notables de un sitio web es su velocidad de carga. Después de escribir una URL o hacer clic en un enlace, todos esperan ser enviados a su sitio web deseado en menos de un segundo, o si no, en un máximo de 2 segundos. Y cualquier sitio web que requiera más que eso para servir información comienza a poner en los nervios de un usuario. Resultado final: el usuario cambia a otro sitio web que sirve los datos que está buscando más rápido. Después de todo, en este mundo ocupado nadie tiene tiempo para esperar a que las páginas web terminen de cargarse.

La necesidad de obtener información práctica en el menor tiempo posible ha dado lugar a un requisito de diseño de sitios web bastante adecuado: si no es lo suficientemente rápido, no es lo suficientemente bueno. Pero este mantra es a menudo difícil de cumplir, especialmente para sitios web que tienen mucho contenido dinámico en sus páginas de inicio. Los diseñadores y desarrolladores en el campo siguen luchando con las estrategias para llevar el tiempo necesario para cargar los sitios web lo más bajo posible para que sus clientes potenciales no desaparezcan sin siquiera revisar su contenido.

Un gran saludo a todos ustedes que están haciendo esto todos los días. Entendemos el tipo de presión que debe cumplir para hacer que su sitio web sea tan rico en contenido, atractivo, único y ligero como sea posible, al tiempo que garantiza que se abra en menos de un segundo cada vez.
Pero también reconocemos que los usuarios de Internet en general no son muy pacientes; doblemente así cuando están navegando a través de sus móviles. Por lo tanto, como diseñador, debe asegurarse de que su sitio web sea lo más ágil posible para que su tráfico orgánico no sea redirigido a otro sitio web debido al retraso en la carga. Y, para ayudarlo con este pequeño problema, hemos compilado una lista de formas sencillas que puede utilizar para mejorar la velocidad de carga de su sitio web. Eche un vistazo y pruebe lo que quiera. Estaríamos encantados de saber cómo funcionaron para usted.

¿Por qué una respuesta rápida es una necesidad absoluta para los sitios web?

Independientemente de cuán novedoso sea su producto o qué tan confiables sean sus servicios, si no puede mostrar sus cosas al mundo en un par de segundos, lo más probable es que termine con la pérdida de negocios entrantes. En cualquier momento, hay más de una compañía que ofrece la misma línea de productos y servicios (en otras palabras, siempre tiene competencia). Si no se asegura de que su producto sea el que el cliente ve primero cuando compra, bueno, ¡prácticamente está logrando que sus competidores crezcan!

Echemos un vistazo rápido a las estadísticas principales que demuestran nuestro punto:

Según un estudio realizado por Amazon¹, por cada 100 ms de mejoras de tiempo de carga en las páginas, los ingresos aumentaron en al menos un 1%
Los informes¹ afirman que Shopzilla comenzó a generar un 12% más de ingresos simplemente reduciendo el tiempo de carga de su página de 6 segundos a 1,2 segundos. Además, ayudó a aumentar el tráfico de su página en un 25%
En el lado negativo, una ralentización experimental¹ de 2 segundos de los resultados de las consultas de búsqueda de Bing dio como resultado una disminución del 4.3% en los ingresos por usuario

Basta con decir que un sitio web que tarda demasiado en cargarse está obligado a sufrir una reducción en la tasa de conversión y la pérdida de nuevos clientes. Este hecho se reafirma mediante el resultado de una encuesta¹ que dice que para el 39% de los usuarios de Internet cotidianos, el rendimiento es más importante que la funcionalidad de un sitio.

Impacto en el tráfico orgánico

La velocidad de carga de la página es un factor importante para determinar el ranking de Google de su sitio web. Hace un tiempo, Google comenzó a considerar la velocidad de la página al evaluar sitios web; como resultado, un sitio web que es demasiado lento para cargar no se considera tan útil. Por lo tanto, incluso si el contenido de su sitio web es excelente, no aparecerá en las primeras páginas de resultados de búsqueda si la carga demora demasiado.

Ahora que sabe el por qué, estamos seguros de que desea saber cómo.

Trucos y herramientas para ayudarlo a acelerar el tiempo de carga de su sitio web

Hay una gran cantidad de artículos que pueden ayudarlo con consejos para mejorar la velocidad de carga de su sitio web. En este documento le brindamos acceso a las herramientas reales que pueden ayudarlo a aplicar los trucos que ha leído para generar un cambio real. Cada sugerencia se acompaña con los nombres de las herramientas que puede usar para experimentar realmente el efecto de esa sugerencia.

Mida la velocidad de carga actual de su sitio web

Primero, necesita saber su punto de partida (es decir, qué tan malo es). Averigüe la velocidad de carga actual de su sitio web con cualquiera de estas herramientas:

Google Page Speed Insights y su módulo Mobile Website Speed Test – El sitio de prueba de velocidad para páginas en línea proporciona una gran información sobre lo que debe hacer para mejorar el rendimiento de su sitio. Estas herramientas lo ayudan a detectar los puntos críticos exactos que desempeñan el papel de cuellos de botella en la velocidad de carga de su sitio web. Al ejecutar la prueba, su sitio web obtendrá una puntuación de 0-100. Si está por encima de 90, está en buena forma. De lo contrario, podría ser bueno escuchar las sugerencias de Google sobre por qué su página se está cargando lentamente y cómo puede mejorarla.
WebPageTest.org – Una de las herramientas de prueba de carga de páginas más versátiles en las que puede probar su sitio web desde múltiples ubicaciones en todo el mundo, utilizando navegadores reales. Por defecto, realiza 3 ejecuciones y luego muestra los tiempos de carga, el gráfico detallado, los detalles de las solicitudes y, por supuesto, las sugerencias de optimización. También tiene su propio esquema de calificación (6 grados de F a A). Incluso puede capturar un video de su sitio web cargando.
GTmetrix – Ofrece un excelente análisis de los sitios web al dar calificaciones tanto en Velocidad de la Página como en Lentitud. Además de medir la velocidad, esta herramienta también le brinda información sobre por qué la velocidad de su página es lenta.

Una vez que haya averiguado si la velocidad de su página es lenta, use uno o más de los métodos mencionados a continuación para aumentar la velocidad. Además, durante todo el proceso, asegúrese de verificar el impacto que cada modificación tiene en la velocidad de su sitio web repitiendo este paso.

Optimizar imagenes

Es obvio que el componente más pesado de una página son sus imágenes. Las imágenes de gran tamaño son el principal contribuyente a los sitios web de carga lenta. Pero eso no significa que no deba usarlas para mejorar su texto. Solo necesita comprimirlas con las herramientas adecuadas para garantizar que reduzcan su tamaño y se carguen mucho más rápido. Puede reducir el tamaño de los archivos bmp sin pérdidas utilizando:

TinyPNG (funciona también con JPG)
Optimizilla
Compressor

Y mientras lo hace, también puede optimizar GIF animados e imágenes vectoriales SVG utilizando herramientas específicas para ese tipo de imágenes. Una gran herramienta para optimizar imágenes GIF es ezGIF y SVG Optimizer by Peter Collingridge que funciona muy bien para imágenes SVG.

Consejo Adicional: Si bien la compresión es una gran idea, probablemente debería seguir evaluando la necesidad real de todas esas imágenes de alta resolución en su sitio web.

Optimizar el código del sitio

Además de reducir el tamaño de las imágenes, también puede reducir el tamaño total de su código. Conocido como “optimización de código”, este mecanismo reduce la carga que se envía al navegador eliminando caracteres innecesarios como espacios, tabulaciones, final de línea, etc. Puede minimizar cualquier tipo de código que se envíe al navegador: HTML, CSS, o JavaScript. Además, puede aplicar técnicas inteligentes como mover recursos web, como fuentes, archivos CSS y JavaScript a la parte inferior de la página para facilitar la carga de texto antes que otros componentes web; de esa manera, si por casualidad sus imágenes o videos tardan unos segundos en cargarse, al menos el usuario puede leer su contenido y participar. Puede optimizar el código del sitio web manualmente o usar una herramienta como Refresh-SF o Minify Code para este propósito.

Usar caché

El almacenamiento en caché de navegación se aplica principalmente a sitios web con una conexión de base de datos como comercios electrónicos o las plataformas de administración de contenido, pero se puede usar para todos los sitios web en general. La idea detrás del concepto es establecer una fecha de caducidad, o un límite de edad máxima, en los encabezados HTTP para recursos estáticos como imágenes, CSS, JavaScript, archivos PDF, etc. El almacenamiento en caché básicamente guarda “instantáneas” de sus páginas web y las entrega como HTML estático, que es la forma más rápida de acceder a los datos en la web. Por lo tanto, al habilitar el almacenamiento en caché, los navegadores cargan automáticamente los recursos estáticos previamente descargados de los discos locales en lugar de hacerlo a través de la red, evitando así las solicitudes directas de datos a la base de datos, lo que a su vez contribuye a un tiempo de carga más rápido para su sitio web. Compruebe si su sitio web utiliza el almacenamiento en caché con Browser Caching Checker. Para habilitar el almacenamiento en caché en su sitio web, puede realizar cambios directos en el código a través de scripts o usar un complemento como W3 Total Cache para WordPress o WP Super Cache.

Consejo Adicional: En bastantes casos, un proveedor de alojamiento no tan bueno puede afectar la velocidad de la página para sitios web con bases de datos. Por lo tanto, antes de dedicar tiempo a la optimización del almacenamiento en caché, sería una buena idea pensar en elegir un mejor proveedor de alojamiento.

Generar Sprites CSS

Otra gran manera de aliviar algo de carga de su sitio web es usar Sprites CSS. Esta técnica esencialmente combina varias imágenes pequeñas (íconos, botones, etc.) en un solo archivo llamado “Sprite” y los muestra a la vez. Al combinar imágenes más pequeñas en una única más grande y al solicitar esa única imagen grande, está reduciendo efectivamente la cantidad de solicitudes HTTP que el navegador debe realizar y, por lo tanto, contribuye a un sitio web de carga más rápido. Puede generar fácilmente dichos archivos combinados y obtener el código CSS al mismo tiempo con CSS Sprites Tool o CSS Sprites Generator.

Comprobar la compresión GZIP

GZIP es un formato de archivo y un algoritmo utilizado para la compresión y descompresión de archivos. Es ampliamente conocido ya que ahorra 50 a 80% de ancho de banda, lo que aumenta significativamente la velocidad de carga del sitio web y, por lo tanto, es recomendado por herramientas de velocidad de páginas como Google Page Speed. De hecho, si la compresión GZIP está desactivada para su sitio web, estas herramientas de prueba de velocidad le indicarán eso y le sugerirán que lo encienda. Con Check GZIP Compression puede verificar muy rápidamente si la compresión está presente y ver cuánta transferencia se disminuye gracias a ella.

Utilice una red de entrega de contenido (CDN)

Si bien Internet es una gran “conexión” invisible de redes distribuidas en todo el mundo para las que no deberían importar las distancias, la realidad es que mientras más lejos estén los visitantes de su sitio web del servidor que devuelve la información, más lento será su sitio web. Esto se debe a que los datos deben pasar por más “nodos de Internet” para llegar a esos visitantes. Es por eso que se pensó por primera vez en las redes de distribución de contenido. Un CDN es una red de servidores de alto rendimiento que replica los activos estáticos de su sitio web y los brinda a los visitantes desde el servidor más cercano. En pocas palabras, un CDN incluye servidores proxy ubicados en todo el mundo. Cuando los visitantes vean su sitio web, se les mostrará el contenido del mega servidor más geográficamente más cercano a su ubicación. Esta acción de “clonación y retransmisión” da como resultado un servicio mucho más rápido y es esta capacidad de las redes CDN es una de las formas más efectivas de aumentar la velocidad de su sitio web. Puede verificar qué proveedores de CDN son mejores para su sitio web con CDN Finder.

Editar el archivo .htaccess para acelerar las cosas

Este es un verdadero consejo de ganador. Una gran parte de la configuración del servidor requerida para acelerar un sitio web se realiza mediante la edición de su archivo .htaccess. De hecho, la edición de este archivo es la forma principal de implementar la compresión GZIP y el almacenamiento en caché de sitios web. No encontramos un generador de archivos .htaccess en línea enfocado en códigos para mejorar la velocidad. En su lugar, recopilamos algunos de los mejores fragmentos de código que aparecen repetidamente en muchos blogs y los combinamos en una especie² de lista para usted:

<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary Header append Vary User-Agent env=!dont-vary php_flag zlib.output_compression on </IfModule> <Files *.php> SetOutputFilter DEFLATE </Files> <IfModule mod_headers.c> Header unset ETag Header unset Last-Modified </IfModule> <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/cgi-php5 AddOutputFilterByType DEFLATE application/cgi-php53 AddOutputFilterByType DEFLATE application/cgi-php54 BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.(?:pdf|doc)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.(?:avi|mov|mp3|mp4|rm)$ no-gzip dont-vary Header append Vary User-Agent env=!dont-vary </IfModule> <ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include \.(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> <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 1 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 216000 seconds" ExpiresByType application/x-javascript "access plus 216000 seconds" </ifModule> FileETag None

Simplemente copie y pegue esto al comienzo de su archivo .htaccess y verifique los resultados.

Concluyendo

Esperamos que los trucos y herramientas enumerados anteriormente le ayuden a hacer que su sitio web sea significativamente más rápido. Es una gran sensación cuando se está acercando a un resultado de velocidad 100/100 de Google. Pero no olvide que su sitio web es una entidad en viva que cambia, por lo que su velocidad de carga también puede cambiar. Controlar los tiempos de carga es un movimiento inteligente. Le permite atraer a los usuarios de una forma más orgánica y evita que Google baje de lugar su sitio.

¹ Fuente de datos estadísticos: https://www.fldtrace.com/why-a-fast-loading-website-is-good-for-your-business
² Archivo .htaccess basado en magento-htaccess