Uno de los puntos de discusión más populares en la comunidad de WordPress es cómo acelerar WordPress y la optimización de las páginas web. No creo que exista un blog sobre WordPress sin un artículo «X Consejos Para Mejorar la Velocidad de WordPress». No me malinterpretes, esto es algo bueno. Pero necesitamos mejores artículos sobre este tema en lugar de publicar miles de revisiones sobre plugins para conseguirlo.
Este podría parecer otro tutorial con «trucos para aumentar la velocidad de WordPress», pero en esta serie de tres partes, vamos a revisar cada aspecto que interviene en la optimización y la mejora de la velocidad de carga de tu sitio web WordPress.
Vamos a empezar con el más popular y probablemente lo más sencillo: el almacenamiento en caché.
La caché en WordPress
Creo que podemos afirmar con tranquilidad que este es el tema más popular cuando se debate sobre la velocidad de carga de WordPress. Desde luego, esto se debe a la popularidad y la facilidad de uso de los plugins de caché que existen para WordPress, pero también es una de las técnicas fundamentales para reducir el tiempo de carga de la base de datos y acelerar los sitios web creados con WordPress.
Volveremos a hablar sobre los plugins para la caché, pero echemos un vistazo a los dos tipos de caché: la caché del servidor y el almacenamiento en caché del lado del cliente.
Almacenamiento en caché del lado del cliente
La caché del lado del cliente es un tipo de almacenamiento en caché que realizan los navegadores de tus usuarios. Eso significa que cuando lleguen visitas a tu sitio web, sus navegadores almacenarán los datos de ciertas partes de tus páginas. Aunque los navegadores cachean algunos datos automáticamente (como el almacenamiento en caché de archivos JavaScript y CSS), podemos realizar algunos ajustes a través de los archivos .htaccess.
Cuando hablo de realizar ajustes en .htaccess, me estoy refiriendo a añadir la directiva «Expires» header en él. Quizás has escuchado el término «aprovechar el almacenamiento en caché del navegador» ya que es ampliamente utilizado en tutoriales sobre «optimización de sitios web», y es un criterio de alta prioridad en el servicio de Google PageSpeed.
Por suerte, no tenemos que bregar con estos headers nosotros mismos, hay un montón de código listo para coger «prestado» por Internet. A mi me gusta el que consta en el estándar HTML5 Boilerplate, en donde los headers están divididos en categorías según los tipos de archivos:
|
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 63 |
# ------------------------------------------------------------------------------ # | Expires headers | # ------------------------------------------------------------------------------ # Serve resources with far-future expires headers. # IMPORTANT: If you don't control versioning with filename-based cache # busting, consider lowering the cache times to something like one week. <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/vnd.geo+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon (cannot be renamed!) and cursor images ExpiresByType image/x-icon "access plus 1 week" # HTML components (HTCs) ExpiresByType text/x-component "access plus 1 month" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" # Manifest files ExpiresByType application/manifest+json "access plus 1 year" ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Media ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Web feeds ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # Web fonts ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/font-woff2 "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" </IfModule> |
Coloca estas líneas de código en el archivo .htaccess y ¡ya lo tienes!
Lo que te queda por leer:
-
-
Almacenamiento en caché del lado del servidor
-
Plugins de caché para WordPress
-
-
Optimización de la base de datos en WordPress
-
En la 2 Parte
Deja una respuesta