Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Acelera WordPress: Uso de CDNs, Compresión, y Minificación para Acelerar WordPress

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Speeding Up WordPress.
Speed Up WordPress: Caching and Database Optimization
Speeding Up WordPress: Image Optimization

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En la primera parte de estas series, revisamos el cacheado y la optimización de bases de datos. En esta segunda parte, hablaremos sobre compresión, minificación y el uso de un CDN.

¡A por ello!

Compresión y Minificación de Recursos

Es simplemente matemática: Si el peso de tu página es de 1MB, un visitante con una conexión de 10Mbit, la podrá cargar en 800 milisegundos. Luego, si puedes reducir el tamaño de tu página, digamos, 600KB, al usuario le costará la mitad de tiempo cargarla.

Por suerte, existen muchas formas de comprimir y minificar la salida del CSS, JS y HTML de tus páginas. Veámos como:

Método 1: Habilitar la Compresión HTTP

Los formatos de compresión HTTP como gzip y deflate son empleados por casi todas las plataformas de servidores (incluyendo Apache y Microsoft IIS) y son aceptadas prácticamente por casi todos los navegadores, de modo que la compresión HTTP funcionará casi seguro en cualquier dispositivo y servidor. (Es posible que tu servidor la tenga habilitada por defecto. Para comprobarlo, busca "test de compresión http", pulsa uno de los resultados, y escribe la dirección de tu web.)

Así que, ¿cómo habilitamos la compresión HTTP? Existen varias formas de conseguirlo, pero creo que estas dos pueden servir para todos:

1. Habilitar la compresión vía .htaccess: Si tu servidor no habilitó la compresión HTTP de forma predeterminada, la puedes habilitar pegando el siguiente código en tu archivo .htaccess (recogido de HTML5 Boilerplate):

2. Habilita la compresión HTTP mediante plugins: Si no sabes como editar tu archivo .htaccess (o simplemente no quieres), puedes habilitar la compresión HTTP con dos de los plugins más populares: WP Super Cache y W3 Total Cache. Ambos ofrecen la posibilidad de habilitar la compresión HTTP a través de sus páginas de ajustes.

Método 2: Minificar y Combinar archivos CSS y JS

Minificar recursos es casi tan importante como comprimirlos. En PHP, los espacios en blanco no son realmente importantes ya que se analizan y compilan; pero los espacios en blanco en los archivos HTML, CSS y JS aumentan el tamaño de los mismos, lo que significa que los usuarios descargarán archivos mayores. Para evitarlo, puedes eliminar todos los caracteres innecesarios en tus archivos HTML, CSS y JS.

Además para minificarlos, también puedes combinar varios archivos CSS y JS en un sólo archivo CSS y JS. Con esto reducirás en número de búsquedas de DNS y los navegadores no descargarán cada archivo CSS y JS por separado.

Minificar y combinar tus recursos manualmente es considerado una mala practica y puede ser inviable en algunos casos. Afortunadamente, no obstante, es muy fácil conseguirlo de forma automática con plugins. Si estás usando W3 Total Cache, puedes habilitar la minificación y combinar tus archivos CSS y JavaScript a través de la página de Ajustes del plugin. Si no estás usando, puedes instalar un plugin por separado – mi favorito es Autoptimize. Autoptimize hace el trabajo a la perfección y tiene algunas opciones útiles que puedes emplear. Yo lo estoy usando junto con WP Super Cache y estoy muy satisfecho con los resultados.

Usar un CDN con WordPress

Si tu blog tiene un aspecto más visual que la media, si tus páginas están repletas de imágenes, e incluso si eres un blogger habitual y deseas que tus imágenes se carguen más rápidamente, puedes (y deberías) usar una red de suministro de contenidos (generalmente llamados CDNs). 

¿Porqué Usar un CDN en una Web?

La lógica tras las redes de entrega de contenido es servir el contenido más eficazmente empleando servidores avanzados y competitivos distribuidos alrededor del mundo. Estos servidores pueden contener todo tu contenido susceptible de ser descargado (como imágenes, archivos CSS y similares) y en el momento que un usuario visita tu página, el servidor avanzado más cercano al visitante será el que sirva los archivos. Con el bajo precio del ancho de banda (incluso gratis en ocasiones) y servidores increíblemente rápidos, el suministro de tu contenido será más rápido que nunca.

Plugins de CDN para WordPress

Hay bastantes plugins por ahí para proporcionarte la sincronía de tus recursos con diferentes CDNs, pero sólo nombraré unos pocos:

  • Photon de Jetpack: Siendo uno de los plugins más populares del repositorio de plugins, Jetpack proporciona numerosas prestaciones en forma de "addons". (Concíbelo como un plugin que suministra muchos plugins.) Uno de ellos se denomina "Photon", un sencillo y gratuito servicio de CDN para tu web. Photon tomará tus imágenes y las imágenes destacadas de tus entradas y páginas, las subirá a los servidores de WP.com, y cambiará las URLs de tus imágenes por las nuevas pertenecientes al CDN. Sólo filtrará tus entradas para cambiar las URLs (lo que significa que no editará tus entradas), de modo que puedes desactivarlo si no te convence, pero probablemente te encante – es una de las mejores opciones gratuitas para muchas webs.
  • CloudFlare: CloudFlare es más bien un servidor proxy que tiene un CDN y funciona como un firewall que protege tu web contra ataques maliciosos. Y desde el momento en que usas sus zonas DNS, las URLs de las imágenes permanecerán sin cambios pero serán cacheadas en los servidores de CloudFlare. Pero sé cuidadoso – la instalación de CloudFlare es un poco engañosa. Visita el artículo de WPBeginner para más información sobre la instalación de CloudFlare y el uso de sus funcionalidades como CDN.
  • W3 Total Cache: No lo denominaron "W3 Total Cache" en vano. Después de todo, este plugin de cache extremadamente popular incluye la posibilidad de integrar el CDN de tu elección a tu web. Una de las compañías más populares de CDN, MaxCDN, tiene un exhaustivo tutorial sobre la instalación del mismo a través de los ajustes de W3 Total Cache.

Final de la Parte 2

En esta segunda parte de la serie, explicamos la compresión y minificado de recursos, y el uso de CDN en Wordpress. En el siguiente (y último) artículo, veremos la importancia de la optimización de imágenes, y acabaremos con algunas reflexiones sobre el uso de Wordpress con sentido común.

¿Qué opinas sobre la aceleración de WordPress? Comparte tus opiniones en la sección de comentarios. Y si te gustó el artículo, no olvides compartirlo.

¡Te veo en el capítulo siguiente!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.