Modificado por última vez en Jueves, 03 Julio 2014 23:28
(0 votos)

Cómo acelerar tu sitio web WordPress

WordPress, optimización

Doce arreglos rápidos que mejorarán drásticamente el tiempo de carga de tu sitio web

Hace unos meses realicé un experimento para ver lo rápido que podía hacer uno de mis sitios web en menos de dos horas de trabajo. Después de la instalación de un puñado de plugins de WordPress y corregir algunos simples errores, había mejorado la velocidad de carga de la página web desde 1,61 segundos a 583 milésimas de segundo. Eso es una mejora del 70,39%, sin haber hecho ningún cambio visual a la página web.

De acuerdo con un estudio de Akamai de 2009, el 47% de los visitantes esperan que una página se cargue en menos de 2 segundos y el 57% de los visitantes abandonarán una página que tarde más de 3 segundos en cargar. Varios estudios de caso han confirmado que el tiempo de carga afecta a las ventas.

En 2006, Amazon informó de que un aumento de 100 milisegundos en la velocidad de la página se traduce en un 1% de aumento en los ingresos. Sólo unos pocos años después, Google anunció en su blog que su algoritmo toma en cuenta la velocidad de la página para el ranking de sitios web.

WordPress - performance

A continuación se presentan doce arreglos rápidos que mejorarán drásticamente el tiempo de carga de tu sitio web, incluyendo:

"¢ Identificar qué plugins están ralentizando tu sitio web
"¢ Comprimir automáticamente las páginas Web, imágenes, JavaScript y CSS
"¢ Mantenimiento de la base de datos (limpiar) de tu sitio web
"¢ Configurar el almacenamiento en caché del navegador de la manera correcta

Sentar las bases

Cuando tu casa se está hundiendo en el suelo, no limpias las ventanas - fijas las bases. Lo mismo ocurre con un sitio web. Si está alojado en un servidor lento o tiene un tema inflado, no ayudarán las soluciones rápidas. Tendrás que fijar los cimientos.

Por lo tanto, vamos a empezar por convertirlo en una buena base y cómo configurar nosotros mismos un sitio web que funcione a la velocidad del rayo.

Elegir un buen alojamiento

La empresa de alojamiento web y el paquete de hosting tienen un gran impacto en la velocidad de un sitio web, entre muchas otras cosas importantes relacionadas con el rendimiento. Yo solía estar atraído por el encanto de un hosting gratuito o barato, pero con la sabiduría de la retrospectiva he aprendido que en este área no se debe escatimar.

Para poner esto en perspectiva, dos de mis clientes tienen sitios web similares pero muy diferentes proveedores de hosting. Uno utiliza WPEngine (una excelente empresa de alojamiento), y el otro hospeda su página web en un servidor compartido barato.

El tiempo de respuesta de DNS (es decir, el tiempo que tarda el navegador en conectarse al servidor de hosting) del cliente mediante WPEngine es 7 milisegundos. El cliente que utiliza el alojamiento compartido barato tiene un tiempo de respuesta de DNS de 250 milisegundos.

Si quieres que tu página web se ejecute rápidamente, comienza con una buena empresa y paquetes de alojamiento.

Elije un buen tema

Por desgracia, no todos los temas de WordPress son creados de la misma forma. Mientras que algunos son extremadamente rápidos y bien codificados, otros están hinchados con cientos de campanas y silbatos bajo la pretensión de que son "versátiles y personalizables".

Hace unos años, Julian Fernandes de Synthesis publicó un interesante caso de estudio en el que actualizó su tema de WordPress por defecto al marco Génesis, y luego monitoreo la velocidad de la página. Se dio cuenta de que con sólo cambiar el tema al Génesis, el tiempo de carga mejoró de 630 a 172 milisegundos.

Cuando elijas un tema, comprueba la velocidad de la página de demostración del tema, utilizando una herramienta como Pingdom, para ver lo rápido que se ejecuta sin añadir nada al mismo. Esto debe darte una idea de lo bien codificado que está.

Utiliza una Content Delivery Network

Recientemente he comenzado a utilizar una red de entrega de contenido (CDN) para uno de mis sitios web y noté una reducción del 55% en el uso de ancho de banda y una gran mejora en la velocidad de carga de la página.

Un CDN hospeda los archivos a través de una enorme red de servidores en todo el mundo. Si un usuario de Argentina visita tu sitio web, entonces descargaría los archivos desde el servidor geográficamente más cerca de él. Debido a que el ancho de banda se extiende por muchos servidores diferentes, se reduce la carga en cualquier servidor único.

La creación de un CDN puede tomar un par de horas, pero por lo general es una de las maneras más rápidas para mejorar drásticamente la velocidad de carga de la página.

12 soluciones rápidas para acelerar WordPress

Ahora que nuestra base es sólida, podemos comenzar a afinar nuestro sitio web.

Una buena manera de comenzar la aceleración de un sitio web es mirar lo que se puede quitar. Más a menudo que no, un sitio web es lento, no por lo que le falta, sino por lo que ya tiene.

1. Identificar plugins que afectan el rendimiento

P3 es uno de mis plugins de diagnóstico preferidos, ya que muestra el impacto de los otros plugins en el tiempo de carga de la página. Esto hace que sea fácil detectar cualquier plugin que está ralentizando el sitio web.

Plugin P3 WordPress

Un culpable común son los plugins sociales para compartir, la mayoría de los cuales engruesan la carga de la página y pueden ser fácilmente reemplazados con la incorporación de botones sociales en el código fuente del tema.

Una vez que eres consciente de qué plugins están ralentizando tu sitio web, puedes tomar una decisión informada sobre si se debes mantenerlos, reemplazarlos o eliminarlos por completo.

2. Comprime tu página web

Al comprimir un archivo en tu computadora como un archivo ZIP el tamaño total del archivo se reduce, por lo que es más fácil y más rápido enviarlo a alguien. Gzip funciona exactamente de la misma manera, pero con tus archivos de página Web.

Una vez instalado, Gzip comprime automáticamente los archivos de tu sitio web como archivos ZIP, ahorrando ancho de banda y acelerando los tiempos de carga de la página. Cuando un usuario visita tu sitio web, su navegador automáticamente descomprimirá los archivos y mostrará su contenido. Este método de transmisión de contenido desde el servidor al navegador es mucho más eficiente y ahorra una gran cantidad de tiempo.

gzip

No hay prácticamente ningún inconveniente en instalar Gzip, y el aumento de la velocidad puede ser muy dramático. Como podemos ver en la imagen anterior, MusicLawContracts.com pasa de 68 KB a sólo 13 KB con Gzip instalado.

Mientras que algunos plugins agregarán Gzip a tu sitio web con el clic de un botón, la instalación de forma manual es realmente muy simple. Abre el archivo .htaccess (que se encuentra en el directorio raíz de tu servidor) y agrega al mismo el siguiente código:

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

Una vez que hayas añadido este fragmento de código en el .htaccess, prueba si Gzip está trabajando en tu sitio web mediante la aplicación Check Gzip Compression. Si por alguna razón el código anterior no funciona, prueba uno de los otros métodos que Patrick Sexton describe en su artículo "Enable Gzip".

3. Comprimir imágenes

Las imágenes ocupan la mayor parte del ancho de banda en la mayoría de sitios web. WP Smush.it es otro gran plugin que comprime automáticamente las imágenes a medida que las carga en la biblioteca multimedia. Toda compresión es "sin pérdidas", lo que significa que no notarás ninguna diferencia en la calidad de las imágenes.

Una cosa buena acerca de WP Smush.it es que funciona con carácter retroactivo. Si hay miles de imágenes guardadas en la biblioteca de medios, puedes ejecutar todas ellas a través del plugin, comprimiéndolas a un tamaño más manejable.

4. Aprovecha el almacenamiento en caché del navegador

El almacenamiento en caché del navegador es un tema delicado. Están disponibles un puñado de grandes extensiones de caché, pero si se configuran de forma incorrecta podrían causar más daño que bien.

Expires headers dicen al navegador si desea solicitar un archivo en particular desde el servidor o desde la caché del navegador. Por supuesto, esto sólo funciona si el usuario ya tiene una versión de la página Web almacenada en su caché; así, la técnica acelerará el sitio web sólo para los que ya han visitado tu sitio web.

Expires headers acelera un sitio web de dos maneras. En primer lugar, reduce la necesidad de que los visitantes vuelvan a descargar dos veces los mismos archivos desde el servidor. En segundo lugar, reduce el número de peticiones HTTP realizadas.

Para hacer esto con un plugin, te recomiendo usar WP Super Cache. Sin embargo, a raíz de la guía de instalación, se recomienda fuertemente que te asegures que lo has configurado correctamente. Como alternativa, puedes agregar Expires headers añadiendo el siguiente código a tu archivo .htaccess .

#
# associate .js with "text/javascript" type (if not present in mime.conf)
#
AddType text/javascript .js #
# configure mod_expires
#
# URL: http://httpd.apache.org/docs/2.2/mod/mod_expires.html
# ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 2692000 seconds"
ExpiresByType image/jpeg "access plus 2692000 seconds"
ExpiresByType image/png "access plus 2692000 seconds"
ExpiresByType image/gif "access plus 2692000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2692000 seconds"
ExpiresByType text/css "access plus 2692000 seconds"
ExpiresByType text/javascript "access plus 2692000 seconds"
ExpiresByType application/x-javascript "access plus 2692000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds" #
# configure mod_headers
#
# URL: http://httpd.apache.org/docs/2.2/mod/mod_headers.html
#
Header set Cache-Control "max-age=2692000, public"
Header set Cache-Control "max-age=600, private, must-revalidate"
Header unset ETag
Header unset Last-Modified

5. Limpia la base de datos

Soy un gran fan de la frecuencia con que WordPress auto salva todo, pero la desventaja es que tu base de datos se llena con bastante rapidez de miles de revisiones posteriores, trackbacks, pingbacks, comentarios no aprobados y elementos de la papelera.

La solución a esto es un fantástico plugin llamado WP-Optimize que rutinariamente desecha la basura de tu base de datos, hace un mantenimiento de la base de datos eficiente y deja solamente de lo que necesita ser guardado. Por supuesto, al hacer cualquier cosa a tu base de datos, en primer lugar siempre una copia de seguridad.

6. Minify archivos CSS y JavaScript

Si has instalado más de un puñado de plugins, lo más probable es que tus enlaces web tengan entre 10 y 20 hojas de estilos y archivos de JavaScript individuales en cada página. Esto no es lo ideal. Poner todo el JavaScript en un archivo JavaScript y todo el CSS en un solo archivo CSS es mucho más eficiente.

Aquí es donde entra en juego la minificación. Plugins como Better WordPress Minify combinarán todas tus hojas de estilos y archivos de JavaScript en uno solo, reduciendo el número de peticiones que tiene que hacer el navegador.

Prefiero Better WordPress Minify  porque es menos agresivo que algunos de los otros plugins que hacen lo mismo (algunas de los cuales causan problemas, como describe Hristo Pandjarov).

7. Desactivar Pingbacks y Trackbacks

Pingbacks y trackbacks son métodos utilizados por WordPress para alertar a otros blogs que enlazan con tus post. Aunque a veces es interesante, puede ser una sangría de velocidad de la página y generalmente es mejor apagarlos. Puedes desactivarlos en la pestaña "Discusión" en "Configuración".

8. Especifica dimensiones de la imagen y el conjunto de caracteres

Antes que un navegador puede mostrar la página Web a un visitante, tiene que averiguar cómo diseñar el contenido alrededor de las imágenes. Sin saber el tamaño de estas imágenes, el navegador tiene que averiguarlo, haciendo que trabaje más y le toma más tiempo.

Especificando las dimensiones de la imagen el navegador las guarda y no tiene que ir a través de este paso, lo que acelera las cosas.

Por la misma razón, es útil la especificación de un conjunto de caracteres en los encabezados de respuesta HTTP, por lo que el navegador no tiene que pasar más tiempo trabajando. Basta con añadir el conjunto de caracteres a la sección head de tu sitio web.

9. Mueve CSS arriba y JavaScript al final

Se recomienda ampliamente enlazar las hojas de estilo tan cerca como sea posible de la parte superior de la página porque los navegadores no representan una página antes de renderizar el archivo CSS. JavaScript, por otra parte, debe estar lo más cerca como sea posible de la parte inferior del pie de página ya que evita que los navegadores lo analicen hasta que se haya cargado completamente la página.

En la mayoría de los casos, esta simple solución mejorará la velocidad de carga de la página forzando a descargar los archivos en el orden óptimo. Pero puede causar problemas en los sitios web que se basan en gran medida en JavaScript y que requieren los archivos JavaScript para cargar antes de que el usuario vea algo de la página.

10. Utiliza Sprites CSS

Un sprite es esencialmente un archivo de imagen de gran tamaño que contiene todas las imágenes individuales una junto a la otra. Usando CSS, se puede ocultar todo en la imagen, excepto para la sección que se necesita, mediante la especificación de un conjunto de coordenadas.

Sprites CSS acelerara un sitio web porque la carga de una imagen grande es mucho más rápida que cargar una gran cantidad de imágenes pequeñas.

spriteme

La solución más sencilla es SpriteMe, una herramienta que convierte tus imágenes en un sprite CSS.

Recuerda que Safari no carga sprites grandes, así que utiliza la calculadora de William Malone para identificar si tu sprite es demasiado grande.

11. Habilitar Keep Alive

HTTP Keep Alive se refiere al mensaje que se envía entre el equipo del cliente y el servidor Web pidiendo permiso para descargar un archivo. Habilitar Keep Alive permite que la máquina del cliente pueda descargar varios archivos sin tener que pedir permiso en repetidas ocasiones, con el consiguiente ahorro de ancho de banda.

Para habilitar Keep Alive, copia y pega el código de abajo en tu archivo .htaccess .

Header set Connection keep-alive

12. Reemplaza PHP con HTML estático donde se pueda

PHP es ideal para hacer una página web eficiente, reduciendo la necesidad de introducir la misma información varias veces. Sin embargo, la información de llamada a través de PHP utiliza los recursos del servidor y debe ser reemplazado con HTML estático en el que no guarda ningún momento.

Conclusión

En los próximos 12 meses se espera que el uso de Internet móvil aventaje al uso en el escritorio. Este cambio hacia los dispositivos móviles habilitados para Internet significa que tener un sitio web rápido nunca ha sido tan importante como lo es ahora. Los usuarios esperan que los sitios web carguen rápido, y los desarrolladores que no cumplan perderán en última instancia por los desarrolladores que invierten para presentar una gran experiencia.


Comentarios (3)

This comment was minimized by the moderator on the site

Anna, muchas gracias por tu aportación. Un saludo

This comment was minimized by the moderator on the site

I was reading this page of yours. I got your advice on the Gzip tool. The tool you're sharing is nice, but sometimes it doesn't work (maybe too many simultaneous users slow it down?), and it was really annoying.

I've googled a bit and started...

I was reading this page of yours. I got your advice on the Gzip tool. The tool you're sharing is nice, but sometimes it doesn't work (maybe too many simultaneous users slow it down?), and it was really annoying.

I've googled a bit and started using the tool below and it works perfectly! Plus, I love the simple and clear design. So I thought, why not share it with you, since you got me started with this anyhow.

Here it is: https://www.websiteplanet.com/webtools/gzip-compression/

I'm sure your other users will enjoy as much as I did if you decide to share it with them

All the best,
Anna

Leer más
This comment was minimized by the moderator on the site

Muy buen articulo, gracias por las recomendaciones, las probare en mi web

No hay comentarios escritos aquí

Deja tus comentarios

  1. Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana de FeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento