En este tutorial te daremos algunos consejos sobre cómo mejorar la velocidad de tu sitio de WordPress. Tener un sitio rápido es esencial si deseas proporcionar a tus visitantes una buena experiencia de usuario, y, al mismo tiempo, rankear mejor en los motores de búsqueda como Google y Bing, pues tienen en cuenta la velocidad de carga de las páginas a la hora de ordenar los resultados.
Habilitar el almacenamiento en caché dinámico
Añadir un caché (tómalo como una “precarga” de datos) para el contenido dinámico tiene un efecto significativo en la velocidad de tu sitio de Wordpress. Aquí puedes encontrar una comparativa entre 6 plugins de almacenamiento en caché para usuarios de la app de WordPress.
Habilitar la compresión gZIP
Para reducir el tamaño de los datos que se transfieren entre el servidor donde alojas tu sitio, y sus visitantes, puedes habilitar la compresión gZIP tanto para imágenes, archivos CSS (“hojas de estilo”) y JavaScript (lenguaje de programación). Al activar la compresión, el servidor web comprimirá los datos que se transfieren (algo así como cuando se crea un archivo ZIP o RAR) de modo que aterricen a todo móvil o desktop de la manera más pequeña posible (y más rápida). Terminada la transferencia, el navegador que se esté empleando descomprimirá el contenido antes de poder procesarlo, pero dada la capacidad actual de procesamiento de datos que poseen tanto ordenadores como teléfonos móviles o tabletas, esto sucede en milisegundos; es decir, muchísimo más rápido de lo que llevaría transferir los datos sin comprimir.
Así es como podemos reducir significativamente el tamaño de la información que se está transfiriendo (a veces hasta a un 10% o menos del archivo original). La forma más fácil de habilitar la compresión gZIP para tus imágenes, archivos CSS y JS es agregar estas líneas a tu archivo .htaccess en la carpeta raíz de la instalación de tu WordPress:
## ENABLE GZIP COMPRESSION ##
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
## ENABLE GZIP COMPRESSION ##
Nota: antes de realizar cambios en .htaccess, siempre guarda una copia de seguridad en alguna parte de tu ordenador.
Utiliza un CDN
Las redes de distribución de contenido (CDN) son enlaces entre servidores que guardan copias del contenido estático de tu sitio (imágenes, librerías) en todos sus nodos de ubicación. Entonces, un individuo en Madrid accederá a tu sitio via un servidor ubicado en España (quizás en Madrid mismo), mientras que un Argentino accederá a tu contenido con el servidor más próximo a su región. Entonces, los datos se envían desde el servidor más cercano al usuario, en lugar de desde el centro de datos principal de tu proveedor de hosting.
Para obtener más información al respecto, consulta nuestros planes de Cloudflare CDN.
Optimiza tus imágenes
Las imágenes son parte esencial en la estética de todo sitio web, pero es más importante aún tenerlas optimizadas. En la mayoría de los casos, en los sitios con varias imágenes son las imágenes mismas lo que más ralentizan la carga de datos, sobre todo porque una imagen no optimizada puede pesar arriba de los 100kb, o muchísimo más.
Las imágenes se miden por su tamaño y por su peso. El tamaño refiere a sus dimensiones en píxeles (ejemplo, 500px de ancho por 200px de alto), mientras que el peso es meramente cuánto ocupa el archivo en kilobytes.
Utiliza imágenes con el tamaño y peso adecuado. Esto implica, entre otras cosas, no subir imágenes grandes (por ejemplo, fotos con 1000 píxeles de ancho) dejando que Wordpress realice un escalado para presentarlas en tamaños más pequeños. Asegúrate de que tus fotos e imágenes nunca tengan un tamaño real más grande del que se muestra en pantalla (recuerda, Wordpress puede mostrar una imagen gigante en un sector pequeño de la pantalla, reduciendo su presentación virtual con un sencillo comando de HTML; para comprobar esto, basta cargar un sitio con una computadora de escritorio, posicionarte con el puntero del mouse sobre la imagen, hacer clic derecho y escoger “ver imagen”. Si cuando veas la imagen sola, la misma aparece más grande en relación a la que estabas viendo antes, entonces esa imagen tiene un tamaño inadecuado para su visualización real).
Y ahora hablemos del peso en kb: una opción para reducir notablemente el peso de las imágenes que cargas a tu librería de medios, y de manera automática, es instalando el plugin Smush.
Smushing comprime las imágenes para que pesen menos, alterando poco o nada su calidad, pero, además, quitará de tus JPGs (y demás formatos de mapas de bit) ciertos datos ocultos aunque presentes: la fecha de creación de la imagen, la cámara utilizada para la foto, las coordenadas de gps, el ángulo de una lente y demás son ejemplos de mucha información que oculta un sencillo bitmap y que ni siquiera sabíamos que existía.
Si es posible, utiliza Sprites para tus temas, y no, no nos referimos al refresco. El uso de sprites es una técnica CSS que utiliza una sola imagen para mostrar varios elementos de diseño en las páginas. De esta manera, en lugar de cargar docenas de imágenes pequeñas (haciendo solicitudes al servidor para cada una de ellas), las imágenes se abrirán con una sola petición. Sprites es una buena etiqueta al momento de escoger tu tema, así que tenlo en cuenta al momento de buscar o comprar themes.
Comprime tus archivos JavaScript y CSS
Comprimir los archivos CSS y JavaScript (método minify, en la jerga) significa que todos los datos innecesarios de ellos, como espacios dobles, líneas vacías, comentarios ocultos en el código y demás se eliminarán de los archivos reduciendo mucho su tamaño. Hay muchas herramientas en línea que puedes utilizar de forma gratuita para activar el método “minify” que comprime los archivos. Si ya estás utilizando el complemento W3 Total Cache, tienes una opción para minificar automáticamente los archivos CSS y JS de tu tema. Aquí puedes encontrar una guía sobre Instalación y Configuración de W3 Total Cache que te explicará este proceso paso a paso.
Aprovecha el almacenamiento en caché del navegador
Aprovechar el almacenamiento en caché del navegador significa que puedes especificar durante cuánto tiempo los navegadores web de tus visitantes almacenarán en sus propios caché las imágenes, CSS, JS y archivos flash de tu sitio. Esto es útil para la visita recurrente, y en términos prácticos significa que un navegador web no volverá a descargar cierta información del servidor cuando ya pre-existe en su disco duro. Especificar el tiempo del caché, o manipularlo a tu favor, es una excelente manera de estipular y/o alargar la cantidad de días que un navegador cualquiera conservará estos archivos. Si no lo haces, los navegadores borran las imágenes en un tiempo por defecto, pero si tú sabes que cierto contenido de tu sitio no cambia en meses (ejemplo, la imagen de portada de una nota), entonces es útil que operes sobre el tiempo del caché, para extenderlo lo más posible.
Puedes agregar estas líneas al archivo .htaccess para habilitar esta técnica de manipulación.
## LEVERAGE BROWSER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
</IfModule>
## LEVERAGE BROWSER CACHING ##
Optimiza tu base de datos de WordPress
Es una buena práctica optimizar tu base de datos de WordPress de vez en cuando. Puedes pensar en esto como el hecho de ejecutar un desfragmentador de disco en tu disco duro local (y si no sabes lo que es eso, no te preocupes). Existen muchas maneras alternativas de optimizar tu base de datos. Si la empresa de hosting que contratas te permite emplear el administrador cPanel, entonces ya cuentas con una herramienta muy fácil para lograrlo: PHPmyAdmin (y ahora vamos a explicarte el paso a paso de cómo hacerlo con esta herramienta). Pero si no dispones de cPanel con tu plan de hosting, puedes instalar plugins para lograrlo, y un buen ejemplo es Adminer, un plugin muy fácil de emplear con instrucciones en pantalla.
Optimizando mi base de datos wordpress con PHPmyAdmin
Entra a tu dirección de cPanel (probablemente tusitio.com/cpanel ó cpanel.tusitio.com). Una vez dentro, busca el ícono de PHPmyAdmin.
Una vez dentro de la interfaz de phpMyAdmin, selecciona la base de datos que has creado con tu instalación de Wordpress. En este caso, “infoloco_infoDB” se colocó como nombre alegórico.
Verás una lista con todas las tablas. Desplázate al final de las mismas para encontrar las opciones “seleccionar todo” y “optimizar la tabla”. Mira la captura de pantalla para orientarte.
En el instante en que hagas clic sobre “optimizar la tabla”, automáticamente el proceso comenzará. No te asustes: dependiendo del tamaño de tu web, puede tardar entre segundos y unos minutos.
Cuando el proceso termine, verás el mensaje “Su consulta se ejecutó con éxito”. ¡Y eso es todo!
Ya dispones de mucha información y herramientas para comenzar a optimizar el contenido de tu sitio, ganar velocidad y trepar posiciones en los resultados de búsqueda. ¡Manos a la obra!
Deja un comentario