mejora la velocidad de carga de tu sitio web

Mejora la Velocidad de Carga de tu Página Web WordPress

Factores que influyen en la velocidad de carga

Si quieres que tu página web cargue como un cohete espacial, te recomiendo leer este artículo, en el que explico la importancia de la velocidad de carga, así como los pasos que debes tomar para optimizar la velocidad de tu página web o tienda online, el cual es uno de los factores que dependen en el posicionamiento, ya que Google tiene en cuenta la velocidad de carga a la hora de posicionar las webs, con lo que premia a las más rápidas.

La velocidad de carga de tu página web puede deberse a varios factores como las imágenes, videos, audios, etc que tengas alojados en tu servidor. También depende de la velocidad de tu servidor y tu hosting.

Hosting o Alojamiento

Cuando vayas a crear una página web, blog o tienda online recomiendo no alojarse en servidores compartidos por otros usuarios, ya que carga más lento. Yo siempre recomiendo alojar tu sitio web en un hosting privado con tecnología de discos SSD de alta velocidad e IP en España. Esta opción de hosting privado sale un poco más cara, si no quieres gastar tanto dinero, te recomiendo los VPS o servidor virtual privado (VPS, del inglés virtual private server), que es un método de partir un servidor físico en varios servidores de tal forma que todo funcione como si se estuviera ejecutando en una única máquina. Esto quiere decir que podemos poner todos los servidores dentro de una sola máquina que es capaz de distribuir los recursos de manera equitativa, consiguiendo un óptimo aprovechamiento de los recursos, lo que confluye en un mejor precio.

Las imágenes

Las imágenes desempeñan un papel fundamental en tu tienda online ya que es lo que va a ver el cliente para decidirse a comprar el producto. Por eso, si tienes un ecommerce con muchas imágenes a una resolución muy alta puede ralentizar la velocidad de carga y hacer que el cliente se vaya, lo que genera una tasa de rebote elevada o lo que es peor, que Google nos penalice por tardar en cargar. También hay que tener en cuenta que la mayoría de visitas a tu tienda online se van a producir a través de dispositivos móviles con redes 4G o 3G que tienen una velocidad mucho menor que la wifi de tu casa.

Por ello, recomiendo subir imágenes pequeñas, (máximo 300kb). He visto a clientes que han subido imágenes de 3 megas, 7 megas e incluso 17 megas. Con Photoshop las podemos reducir, también tenemos diversas aplicaciones online que te hacen el trabajo, la que yo recomiendo es comprimir JPG para JPG y comprimir PNG para PNG. Pero no nos tenemos que preocupar, siempre y cuando una imagen sea para publicarla en internet y no para imprimirla podemos publicarla en una calidad media que se va a seguir viendo bien.

¿En qué formato debemos subir las imágenes?

JPG: Es el formato universal para las imágenes, ya que es el que mejor las comprime sin perder tonalidad, brillos, ni colores originlaes. Con Photoshop las puedes reducir y aumentar.

PNG: Ideal para logotipos transparentes, ya que permite conservar las transparecias. Cuando hacemos una imagen transparente con la varita mágica en Photoshop siempre tenemos que guardar la imagen en png. Tampoco pierde mucha calidad en compresión. Recomendaría esta opción sólo para imágenes transparentes.

GIF: Este es un formato para imágenes animadas. Este formato no comprime bien ya que las animaciones contienen varios fotogramas. Esta opción solo la debemos emplear para formatos animados.

Plugins para mejorar la velocidad de carga de tu WordPress

Ewww Image Optimizer: ¡Mi favorito! Con este plugin podrás reducir el tamaño de todas las imágenes de una pasada. Los puedes pasar cuantas veces quieras. Pero cuidado, estamos ante un plugin que consume muchos recursos y mucha RAM, por lo que recomiendo hacer copia de seguridad antes de usarlo. Te recuerdo que es mi Hosting con Discos SSD de alta velocidad e IP en España tienes copias de seguridad diarias.

WP Smush: Con este plugin de WordPress puedes comprimir las imágenes que ya tienes subidas y también comprimir automáticamente las imágenes que subas a partir de ese momento.

W3 Total Caché: El código de WordPress se puede comprimir para que los servidores tarden menos en leerlo y, por tanto, cargue más rápido tu web. Este plugin te permite comprimir el código HTML, CSS y Javascript.

WP Optimize: Lo que hace este plugin es limpiar la base de datos y eliminar revisiones y comentarios que no necesitas. Al tener una base datos más limpia cargará más rápido tu página.

Medir la velocidad de carga

Google Speed Insights

Una vez tenemos creado nuestro sitio web, lo primero que tenemos que hacer es verificar la velocidad de carga, yo recomiendo dos aplicaciones principales, la primera la de Google PageSpeed Insights y la segunda Pingdom Pingdom website speed test.

En el caso de Google PageSpeed Insights introducimos nuestra dirección en la barra de análisis y clickamos en analizar. Al rato encontraremos nuestra puntuación tanto para móviles como para pc.

Nos saldrán los elementos que debemos corregir:

Especificar caché del navegador

Con esto se refiere a que debemos indicar una fecha de caducidad o una edad máxima en las cabeceras de los diferentes recursos, indicamos al navegador (Chrome, Firefox, Explorer) que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red. Esto sirve para ahorrarle tiempo de carga al visitante que ya ha entrado antes en tu página web cada vez que entra de nuevo, ya que almacena en caché del navegador los recursos estáticos.

Para mejorar este aspecto debemos introducir el siguiente código en el archivo de texto htaccess.

</IfModule>

# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault “access plus 1 month”

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest “access plus 0 seconds”

# Your document html
ExpiresByType text/html “access plus 0 seconds”

# Data
ExpiresByType text/xml “access plus 0 seconds”
ExpiresByType application/xml “access plus 0 seconds”
ExpiresByType application/json “access plus 0 seconds”

# Feed
ExpiresByType application/rss+xml “access plus 1 hour”
ExpiresByType application/atom+xml “access plus 1 hour”

# Favicon (cannot be renamed)
ExpiresByType image/x-icon “access plus 1 week”

# Media: images, video, audio
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType video/ogg “access plus 1 month”
ExpiresByType audio/ogg “access plus 1 month”
ExpiresByType video/mp4 “access plus 1 month”
ExpiresByType video/webm “access plus 1 month”

# HTC files (css3pie)
ExpiresByType text/x-component “access plus 1 month”

# Webfonts
ExpiresByType application/x-font-ttf “access plus 1 month”
ExpiresByType font/opentype “access plus 1 month”
ExpiresByType application/x-font-woff “access plus 1 month”
ExpiresByType application/x-font-woff2 “access plus 1 month”
ExpiresByType image/svg+xml “access plus 1 month”
ExpiresByType application/vnd.ms-fontobject “access plus 1 month”

# CSS and JavaScript
ExpiresByType text/css “access plus 1 year”
ExpiresByType application/javascript “access plus 1 year”

</IfModule>

De cara a eliminar el problema de caché de Google Analytics debemos instalar el plugin Complete Analytics Optimization Suite (CAOS) e introducir nuestro código de seguimiento y activar únicamente la casilla Footer, las demás tal como vienen, desactivadas.

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior

Con esto se refiere a que el código JavaScript carga antes que el HTML, por lo que hasta que no se ha cargado el JavaScript no se carga el HTML lo que reduce el tiempo de carga. Para solucionar esto debemos hacer que se cargue primero el HTML y luego el JavaScript; no consiste el elimnar el JavaScript, sino en hacer que cargue después del html o bien insertar porciones críticas de dichos recursos directamente en el HTML. Para hacer esto necesitamos altos conocimientos de programación; este es un error que mucha gente comete y que necesitamos invertir unos durillos para solucionarlo.

Optimizar imágenes

si clickamos en mostrar como corregirlo aparecerán todas las imágenes que puedes optimizar y su porcentaje.

si clickamos en mostrar como corregirlo aparecerán todas las imágenes que puedes optimizar y su porcentaje.

Reducir el tiempo de respuesta del servidor

HOSTING: Este problema puede deberse a varios factores, uno de ellos es el Hosting; como he dicho en otros artículos nuestro hosting siempre debe ser con discos SSD e IP en España, para que este problema no aparezca.

PHP: También puede deberse a nuestra version de PHP; PHP 7 es la versión más rápida de PHP, por lo que debemos intentar tener nuestro sitio web en esta versión. Como punto negativo para el tema de WordPress es que es posible que algún plugin no sea compatible con PHP 7. Lo que debemos hacer el poner la versión 7 y ver si da fallos, si vemos que da fallos podemos, o bien cambiar de plugins, o bien bajar a una versión inferior.

BASE DE DATOS: En lo relacionado a la base de datos, es recomendable pasar las tablas a Mylsam (la más rápida) y añadir estas dos líneas en la carpeta wp-config.php para que nuestra base de datos no acumule demasiadas revisiones de posts o páginas cuando las estamos editando.

define(‘WP_POST_REVISIONS’, false);
define(‘WP_POST_REVISIONS’, 2);

Pingdom

En el caso de Pingdom se trata de una herramienta para medir y analizar los tiempos de carga web y al igual que PageSpeed lo único que tenemos que hacer es incluir la url de nuestra página web para obtener los resultados. Nos indicará nuestra nota de rendimiento, el tamaño de la página y el tamaño por el tipo de código o contenido. Estos son los parámetros de Pingdom de los distintos tiempos de carga:

  • Carga rápida, en menos de 2 segundos
  • Carga normal, entre 2 y 4 segundos
  • Carga lenta, más de 5 segundo

velocidad de carga sitio web

En esta imagen podemos ver que partes son las que tienen el porcentaje más alto de carga. Vemos que el Java Script y CSS es lo que más ocupa en este caso.

velocidad de carga página web

Tiempo de respuesta del servidor

Me gustaría comentar un factor muy importante que es el tiempo de respuesta del servidor, un factor clave para la velocidad de carga y para el SEO. En el caso de Pingdom lo podemos averiguar por la métrica wait, en este caso 727 milisegundos, una cifra bastante aceptable. Mientras no supere los 1,5 segundos no tenemos de que preocuparnos.

medir velocidad de carga página web

Google Analytics

A través de Google Analytics también podemos verificar la velocidad de carga de un sitio. Si accedemos a nuestra cuenta de Google Analytics en Comportamiento > Velocidad del sitio ,podemos encontrarnos parámetros como tiempo medio de carga de la página, tiempo medio de redireccionamiento, tiempo medio de búsqueda de dominio, tiempo medio de conexión de servidor, tiempo medio de respuesta de servidor y tiempo medio de descarga de la página.

En el mismo subapartado Visión general, en la parte de abajo, podemos ver el informe del Tiempo medio de carga de la página en segundos por cada Navegador, cada País o cada Página de nuestra web. 

¿Necesitas una página web o una tienda online? 

Leave a comment