A continuación 10 formas fundamentales para acelerar tu página si no eres un experto:
1. Usa un plugin de WordPress para cachear tu página
Si usas WordPress para publicar tu contenido, lo tienes bastante fácil. Hay un montón de plugins de calidad que se encargan de casi todos los puntos importantes para acelerar una página.
La función básica de estos plugins es almacenar las distintas partes de una página y servirla como un archivo estático. De esta forma, por ejemplo, no realizamos peticiones a la base de datos cada vez que se carga un artículo.
Tu servidor almacenará parte de esta información “estática”, y el navegador del usuario otra, por ejemplo algunas imágenes o partes de CSS, de tal forma que cuando el usuario vuelva, ya tiene cargadas partes importantes de la página.
La mayoría de estos plugins se pueden usar y empiezan a mejorar el rendimiento simplemente con activarlos, pero un cacheo completo depende de decenas de factores, y tener tantas opciones puede ser un poco abrumador para los principiantes, sobre todo si todavía no están familiarizados con los conceptos.
Tres buenos ejemplos son W3 Total Cache, con todas las opciones que quieras, WP Super Cache, el que estoy usando ahora mismo en esta página, WP Fastest Cache o Hyper Cache, ambos fáciles de configurar.
2. Usa un CDN (Content Delivery Network)
Un CDN es una red de servidores que se encargan de servir el contenido de tu página desde los servidores más cercanos a cada usuario. Por ejemplo, un CDN que tenga servidores en Norteamérica, Europa y Asia, servirá más rápido tu contenido a los usuarios de cada continente.
Algunos de los CDN más conocidos son CloudFlare, Amazon CloudFront o Google Cloud CDN. También hay múltiples opciones a la hora de establecer un CDN.
El CDN, además de acelerar la carga de páginas, reduce la carga de tu servidor y aumenta la seguridad.
3. Optimiza las imágenes
Hay una gran diferencia de rendimiento entre cargar imágenes optimizadas y sin optimizar. Generalmente se trata de cambiar el formato de las imágenes a otros con un uso más optimizado de la compresión y de eliminar meta datos no necesarios.
Muchos webmasters no se preocupan de esto porque creen que las imágenes, generalmente sacadas de internet, ya están optimizadas. Esto es un gran error. Primero, porque no todas están optimizadas, y segundo, porque generalmente siempre pueden optimizarse más.
Hay numerosas herramientas de calidad para optimizar distintos formatos de imágenes: jpegtran, optipng, gifsicle, sin olvidar el formato de Google webp, aunque de momento solo funciona para los navegadores Chrome, Android, y Opera.
4. Minifica y combina los archivos CSS y JS
Minificar es como comprimir el código eliminando espacios y elementos innecesarios como comentarios y elementos repetidos.
Combinar significa juntar todos los distintos archivos en uno solo para que solo se produzca una petición en lugar de múltiples.
Es riesgo con combinar todos los archivos es el que resultado sea un archivo muy grande que tarde mucho en cargarse, lo que ralentiza la carga de la página y muchos otros parámetros de la velocidad.
Lo ideal es buscar un equilibrio entre lo que la página necesita inmediatamente para empezar a mostrar contenido y el resto de elementos que pueden retardarse mediante la carga asíncrona.
5. Carga asíncrona de recursos
En general, una página necesita muy pocos de sus recursos totales para empezar a ser útil para el usuario.
Por ejemplo, si tu página es un artículo, necesitará solo una pequeña parte de CSS, las fuentes, el logo y pocos elementos más para que el usuario pueda empezar a leer. Si la página tiene formularios de contacto, comentarios, javascript para animaciones o funcionalidades y más cosas, se pueden cargar una vez que ya se ha mostrado el texto formateado al usuario.
La idea es cargar primero lo absolutamente necesario para un uso correcto de la página y después cargar el resto. Esto se suele hacer con la carga asíncrona de recursos como el CSS, las fuentes, a menudo desde los servidores de Google, y el javascript.
Las imágenes se pueden cargar con el lazyload vía ajax como comentamos en el siguiente punto.
6. Uso de AJAX para las partes dinámicas
El uso de AJAX permite cargar partes de una página solo cuando se vaya a usar, a diferencia de la carga asimétrica de recursos donde siempre se cargan.
Un ejemplo común son los comentarios de una página. La página solo carga el contenido, y si el usuario quiere comentar se empiezan a cargar los recursos necesarios tras un click.
Otro uso habitual el la carga de imágenes. Si en una página tienes 20 imágenes, no tiene sentido empezar a cargar todas a la vez. Quizá solo sea necesario cargar las que se vean en el primer pantallazo, y después ir cargando el resto a medida que el usuario va haciendo scroll por la página y empiezan a ser visibles.
El script de los botonoes sociales son otro ejemplo de carga con ajax.
El uso de ajax puede llegar a ser muy complejo en función de que página tengas, pero se puede aprovechar para cosas sencillas como las mencionadas.
7. Leverage Browser Caching
Esto se refiere al caché de tu navegador. Es la forma que tiene una página para decirle a tu navegador que cachee recursos estáticos como imágenes , css, js para que no tengan que descargarse con cada carga o visita.
De esta forma, se carga todo en el navegador en la primera impresión de una página, y estos recursos ya están cargados mientras navegas por el sitio o para futuras visitas.
Este punto es realmente importante y debe solucionarse por completo, ya que la diferencia entre tener el caché del navegador y no tenerlo es grande.
8. Habilitar Gzip (compresión)
La compresión Gzip se encarga de comprimir las páginas que luego se descomprimen en el navegador. Esto ahorra en tamaño y velocidad de carga.
Se puede habilitar la compresión Gzip en una web de forma similar al Leverage Browser Caching, con unas líneas en el
.htaccess, asumiendo que está habilitado en el servidor.9. Limitar la carga de recursos externos
Existen herramientas online como GTmetrix que hacen un despiece de todo lo que se carga en una web, lo que tarda en descargarse o si bloquea la carga de más recusrsos, etc.
Actualmente es un problema la cantidad de recursos externos que se acumulan incluso en webs pequeñas al añadir plugins o funcionalidades externas (third party). Esto no solo hace más pesada una página, sino que involucra a multitud de servidores. Esto puede aumentar exponencialmente el tiempo de carga de una página.
¿Solución? Piensa bien si merece la pena cargar un recurso por su relación entre lo que ofrece al usuario y lo que tasa a la página.
Esto es especialmente relevante a las redes de publicidad. Limita los anuncios en tu web. Ten en cuenta que una anuncio suele cargar página enteras en iframes, a menudo con grandes cantidades de js, que no están ni siquiera optimizados.
Tampoco conviene obsesionarse con un resultado perfecto. Simplemente valora bien qué es imprescindible y qué no.
10. Google AMP
Google AMP (Accelerated Mobile Pages) es el framework de Google para crear versiones móviles mucho más rápidas. Básicamente es una versión reducida de tu página precargada desde los servidores de Google.
Si usas WordPress, es tan sencillo como descargar y activar un plugin. Si quieres personalizar la apariencia puedes hacerlo siguiendo los manuales AMP o a través de las opciones del propio plugin.
No hay comentarios:
Publicar un comentario