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!
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:
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 # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # 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' 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 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.
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.
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).
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.
Hay más de unos pocos complementos que proporcionan la sincronización de sus activos con diferentes CDN, pero nombraré solo algunos:
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.!