Acelere WordPress usando CDNs, compresión y minificación

En la primera parte de esta serie, revisamos el almacenamiento en caché y la optimización de la base de datos. En esta segunda parte, hablaremos sobre la compresión, la minificación y el uso de un CDN..

Vamos a empezar!

Compresión y Minificación de Activos.

Es simple: si el tamaño de su página es de 1 MB, un visitante con una conexión de 10 Mbit puede cargarla en 800 milisegundos. Por lo tanto, si puede reducir el tamaño de su página a, digamos, 600 KB, el visitante solo tardará medio segundo en cargarla..

Afortunadamente, hay muchas maneras de comprimir y minimizar la salida de CSS, JS y HTML de sus páginas. Veamos cómo:

Método 1: habilitar la compresión HTTP

Los formatos de compresión HTTP como gzip y deflate son utilizados por casi todas las plataformas de servidor (incluidos Apache y Microsoft IIS) y son aceptados por prácticamente todos los navegadores, por lo que la compresión HTTP es más probable que se ejecute en todos los dispositivos y servidores. (Su servidor podría incluso habilitarlo de manera predeterminada. Para verificarlo, busque "comprobación de compresión http", haga clic en uno de los resultados y escriba la dirección de su sitio web).

Entonces, ¿cómo habilitamos la compresión HTTP? Hay varias formas de hacerlo, pero creo que estas dos pueden ayudar a todos:

1. Habilitar la compresión a través de .htaccess: Si su servidor no habilitó la compresión HTTP de forma predeterminada, puede habilitarlo pegando el siguiente código en su .htaccess Archivo (tomado de HTML5 Boilerplate):

 # Fuerza de compresión para cabeceras destrozadas. # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html   SetEnvIfNoCase ^ (Accept-EncodXng | X-cept-Encoding | X 15 | ~ 15 | - 15) $ ^ ((gzip | deflate) \ s *,? \ S *) + | [X ~ -] 4,13 $ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip, deflate" env = HAVE_Accept-Encoding   # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # Marca ciertos recursos como comprimidos para: # # 1) evita que Apache vuelva a comprimirlos # 2) asegura que reciban el encabezado de respuesta HTTP correcto # 'Codificación de contenido'  AddEncoding gzip svgz  # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # Compresión de todos los resultados etiquetados con uno de los siguientes tipos de medios . # IMPORTANTE: para las versiones de Apache debajo de 2.3.7 no necesita habilitar # 'mod_filter' y puede eliminar el ''&''# líneas como' AddOutputFilterByType 'todavía está en las directivas principales.  AddOutputFilterByType DEFLATE "application / atom + xml" \ "application / javascript" \ "application / json" \ "application / ld + json" \ "application / manifest + json" \ "application / rss + xml" \ "application / vnd .geo + json "\" application / vnd.ms-fontobject "\" application / x-font-ttf "\" application / x-web-app-manifest + json "\" application / xhtml + xml "\" application / xml "\" font / opentype "\" image / svg + xml "\" image / x-icon "\" text / cache-manifest "\" text / css "\" text / html "\" text / plain "\" text / vtt "\" text / x-component "\" text / xml "   

2. Habilitar la compresión HTTP con plugins: Si no sabes editar tu .htaccess (o simplemente no quiere hacerlo), puede habilitar la compresión HTTP utilizando los dos populares complementos de almacenamiento en caché: 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 configuración.

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

Reducir los activos es casi tan importante como comprimirlos. En los archivos PHP, el espacio en blanco no es realmente importante, ya que se analizan y compilan; pero los espacios en blanco en HTML, CSS y JS aumentan el tamaño del archivo, lo que significa que los visitantes descargarán archivos más grandes. Para evitar esto, puede eliminar todos los caracteres innecesarios en sus archivos HTML, CSS y JS.

Además de minimizarlos, también puede combinar varios archivos CSS y JS en un archivo CSS y JS. Hacer esto reducirá la cantidad de búsquedas de DNS y los navegadores no descargarán cada archivo CSS y JS por separado.

Reducir y combinar sus activos. a mano Se considera una mala práctica y podría ser imposible en algunos casos. Por suerte, sin embargo, es muy fácil de conseguir automáticamente con los complementos. Si está utilizando el complemento W3 Total Cache, puede habilitar la reducción y la combinación de sus archivos CSS y JavaScript a través de la página de configuración del complemento. Si no lo está utilizando, puede instalar un complemento por separado; mi favorito es Autoptimizar. Autoptimize hace el trabajo perfectamente y tiene algunas opciones muy útiles que puede administrar. Estoy usando este con WP Super Cache y estoy muy contento con los resultados.

Usando un CDN en WordPress

Si tu blog es más visual más que el promedio, si sus páginas están llenas de imágenes, o incluso si es un blogger habitual y desea que sus imágenes se carguen más rápido, puede (y debe) usar redes de distribución de contenido (a las que comúnmente se hace referencia como CDN).

Por qué usar un CDN para un sitio web?

La lógica detrás de las redes de entrega de contenido es servir contenido de manera más eficiente mediante el uso de "servidores de borde" en todo el mundo. Estos servidores pueden contener su contenido descargable (como imágenes, archivos CSS y similares) y cuando un usuario visita su página, el servidor perimetral más cercano al visitante sirve los archivos. Con precios bajos en ancho de banda (incluso gratis, a veces) y servidores increíblemente rápidos, la entrega de su contenido será más rápida que nunca.

Complementos CDN para WordPress

Hay más de unos pocos complementos que proporcionan la sincronización de sus activos con diferentes CDN, pero nombraré solo algunos:

  • Fotón de Jetpack: Siendo uno de los complementos de WordPress más populares en el repositorio de complementos, Jetpack proporciona una serie de características como "complementos". (Piense en ello como un complemento que sirve muchos complementos). Uno de los complementos se llama "Photon", un servicio CDN simple y gratuito para su sitio web. Photon tomará sus imágenes e imágenes destacadas en sus publicaciones y páginas, las cargará en los servidores de WP.com y cambiará las URL de sus imágenes con las nuevas URL de la CDN. Será solo filtrar Tus publicaciones para cambiar las URL (lo que significa que no editará tus publicaciones), por lo que puedes desactivarlo fácilmente si no te gusta, pero probablemente te gustará. mucho-Es una de las mejores opciones gratuitas para la mayoría de los sitios web de WordPress..
  • CloudFlare: CloudFlare es más como un servidor proxy que tiene un CDN y actúa como un servidor de seguridad para proteger su sitio web contra ataques maliciosos. Y ya que utiliza sus zonas DNS, las URL de las imágenes se mantendrán iguales pero se almacenarán en caché en los servidores de CloudFlare. Pero ten cuidado, instalar CloudFlare es un poco complicado. Consulte el artículo de WPBeginner para obtener más información sobre la instalación de CloudFlare y el uso de sus funciones CDN..
  • W3 Total Caché: No lo llamaron "W3 Total Cache" por nada. Después de todo, este extremadamente popular complemento de almacenamiento en caché incluye la función de integrar un CDN de su elección en su sitio web. Una de las marcas populares de CDN, MaxCDN, tiene un tutorial completo sobre cómo instalar su CDN dentro de la configuración de W3 Total Cache.

Fin de la Parte 2

En esta segunda parte de la serie, pasamos por la compresión y la minimización de activos, y usando un CDN en WordPress. En el siguiente (y último) artículo, veremos la importancia de la optimización de la imagen, y nos detendremos con algunas ideas sobre el uso de WordPress con sentido común.

¿Qué piensas acerca de acelerar WordPress? Comparte tus pensamientos a continuación en la sección de comentarios. Y si te ha gustado el artículo, no olvides compartirlo..

Nos vemos en la siguiente parte.!