En la primera parte de esta serie, revisamos el cacheado y la optimización de bases de datos. En esta segunda parte, hablaremos sobre compresión, minificado y uso de un CDN.
¡A por ello!
Compresión y minificado de recursos
Son simples matemáticas: 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 aceptados 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 (extraido de HTML5 Boilerplate):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<IfModule mod_deflate.c> # Force compression for mangled headers. # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html <IfModule mod_setenvif.c> <IfModule mod_headers.c> 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 </IfModule> </IfModule> # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # Mark certain resources as been compressed in order to: # # 1) prevent Apache from recompressing them # 2) ensure that they are served with the correct # `Content-Encoding` HTTP response header <IfModule mod_mime.c> AddEncoding gzip svgz </IfModule> # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # Compress all output labeled with one of the following media types. # IMPORTANT: For Apache versions below 2.3.7 you don't need to enable # `mod_filter` and can remove the `<IfModule mod_filter.c>` & `</IfModule>` # lines as `AddOutputFilterByType` is still in the core directives. <IfModule mod_filter.c> 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" </IfModule> </IfModule> |
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.
Lo que te queda por leer:
- Método 2: Minificar y combinar archivos CSS y JS
- ¿Porqué Usar un CDN en un sitio web?
- Plugins de CDN para WordPress
Deja una respuesta