Veamos el proceso paso a paso para mejorar el rendimiento y la velocidad de un sitio. A continuaci\u00f3n se muestra la captura de pantalla de la puntuaci\u00f3n de mi sitio web en Google Page Insight.<\/p>\n
\u00bfAlguna vez not\u00f3 el mensaje Render bloqueando JavaScript y CSS en el contenido de la mitad superior de la p\u00e1gina? Si no ha incluido CSS y JS de forma est\u00e1ndar<\/a>, puede ralentizar su sitio. Como regla general, CSS debe incluirse en un encabezado y JS debe incluirlo en un pie de p\u00e1gina. Debe cuidar de que su sitio web siga esta pr\u00e1ctica est\u00e1ndar.<\/p>\n Las im\u00e1genes juegan un papel importante en la mejora de la experiencia del usuario. Las im\u00e1genes llamativas mantienen a los usuarios interesados \u200b\u200ben el contenido. Pero el uso de im\u00e1genes pesadas casi mata la velocidad de su sitio web. Por ejemplo, ha subido una imagen con un tama\u00f1o de 2 MB en el sitio, luego, mientras carga la p\u00e1gina, estos 2 MB toman un tiempo adicional para cargar la imagen antes de presentar su p\u00e1gina a la audiencia.<\/p>\n Aqu\u00ed viene el concepto de optimizar im\u00e1genes<\/strong> antes de su uso. Hay varios complementos disponibles que realizan esta tarea de comprimir im\u00e1genes de su biblioteca de medios. Algunos complementos populares son<\/p>\n Todos estos complementos funcionan bien. Recomendar\u00eda usar el complemento TinyPNG. Estoy usando este complemento para mi sitio web y estoy bastante contento con \u00e9l.<\/p>\n En algunos casos, necesitamos mostrar im\u00e1genes fuera de la biblioteca de medios. Creamos un directorio personalizado y cargamos im\u00e1genes en \u00e9l, luego usamos estas im\u00e1genes en el sitio web. He escrito art\u00edculos sobre Optimizar imagen al<\/a> cargar<\/a> y Comprimir im\u00e1genes de TinyPNG<\/a>. Consulte estos art\u00edculos si no est\u00e1 utilizando la biblioteca multimedia para im\u00e1genes.<\/p>\n Consejo: recorta las im\u00e1genes del tama\u00f1o que quieras mostrar. Digamos que tiene un contenedor de tama\u00f1o 300 * 250. En ese caso, debe recortar la imagen seg\u00fan el tama\u00f1o del contenedor. No utilice la imagen de mayor tama\u00f1o en un recipiente peque\u00f1o. Esto tambi\u00e9n afecta el rendimiento del sitio.<\/p>\n Lazy Load Images<\/strong> ayuda a acelerar su sitio web. Con el complemento de carga diferida<\/a>, sus im\u00e1genes no se cargan hasta que el usuario se desplaza hacia ellas. Ayuda a reducir el tama\u00f1o de su p\u00e1gina en el momento de la carga.<\/p>\n Si desea implementar im\u00e1genes de carga diferida sin utilizar un complemento, lea nuestro art\u00edculo sobre Mejora del rendimiento del sitio web<\/a> mediante im\u00e1genes de carga diferida .<\/p>\n En la medida en que el tama\u00f1o de su base de datos sea peque\u00f1o, su servidor responde r\u00e1pidamente a la solicitud de la base de datos proveniente del sitio web. Una vez que su base de datos comienza a aumentar, su servidor tarda m\u00e1s en responder.<\/p>\n En WordPress, a medida que pasa el tiempo, varios datos hu\u00e9rfanos se almacenan en su base de datos. Por ejemplo, cuando actualiza una publicaci\u00f3n o una p\u00e1gina, cada vez que WordPress almacena la revisi\u00f3n en la base de datos. Preferir\u00eda mantener solo las \u00faltimas 3 revisiones que son suficientes. Para mantener las revisiones hasta 3 veces, debe colocar el siguiente c\u00f3digo en su archivo wp-config.php.<\/p>\n El c\u00f3digo anterior limita el n\u00famero de revisiones. Hay algunas otras tablas que tambi\u00e9n deber\u00edan optimizarse. Recomiendo utilizar los complementos WP-DBManager<\/a> o WP-Sweep<\/a> para optimizar su base de datos.<\/p>\n Gracias a los ingenieros que introdujeron el concepto de cach\u00e9 del navegador. Cuando un usuario visita su sitio web, el navegador del usuario almacena su p\u00e1gina en la ubicaci\u00f3n de almacenamiento temporal del navegador. Cuando el usuario visita el sitio web la pr\u00f3xima vez, el navegador presenta la p\u00e1gina a los usuarios desde la \u00faltima cach\u00e9 almacenada en lugar de cargar la p\u00e1gina completa nuevamente. Esto reduce el uso de ancho de banda tanto en el lado del usuario como en el del servidor. El uso de la cach\u00e9 de su sitio web acelera dr\u00e1sticamente el sitio web de WordPress. Algunos de los complementos de cach\u00e9 m\u00e1s populares son los siguientes.<\/p>\n Cuando aproveche el almacenamiento en cach\u00e9 del navegador, los archivos de su p\u00e1gina web se almacenar\u00e1n en el cach\u00e9 del navegador. Sus p\u00e1ginas se cargar\u00e1n mucho m\u00e1s r\u00e1pido para los visitantes habituales. Agregue el siguiente c\u00f3digo en el archivo htaccess de su sitio y le permitir\u00e1 el almacenamiento en cach\u00e9 del navegador.<\/p>\n Nota: En WordPress, algunos complementos utilizan recursos externos. No podemos establecer encabezados de caducidad en estos recursos externos. Una forma es almacenar estos archivos externos en su servidor y luego incluirlos en su sitio web.<\/p>\n Espero que comprenda c\u00f3mo acelerar el sitio web de WordPress. Si me perd\u00ed algo o si est\u00e1 utilizando otras t\u00e9cnicas, por favor comparta los comentarios a continuaci\u00f3n.<\/p>\n![\"6](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20834-60822fd29f5de.png\")
<\/a><\/p>\nPaso 1- Incluya CSS y JS de forma est\u00e1ndar<\/h3>\n
Paso 2- Optimiza las im\u00e1genes antes de usarlas<\/h3>\n
\n
Paso 3- Im\u00e1genes de carga diferida<\/h3>\n
Paso 4- Optimizar la base de datos<\/h3>\n
define('WP_POST_REVISIONS', 3);<\/code><\/pre>\nPaso 5- Uso de la cach\u00e9<\/h3>\n
\n
Paso 6: Aproveche el almacenamiento en cach\u00e9 del navegador<\/h3>\n
<IfModule mod_expires.c>\nExpiresActive On\nExpiresByType image\/jpg \"access plus 1 year\"\nExpiresByType image\/jpeg \"access plus 1 year\"\nExpiresByType image\/gif \"access plus 1 year\"\nExpiresByType image\/png \"access plus 1 year\"\nExpiresByType text\/css \"access plus 1 month\"\nExpiresByType application\/pdf \"access plus 1 month\"\nExpiresByType text\/x-javascript \"access plus 1 month\"\nExpiresByType application\/x-shockwave-flash \"access plus 1 month\"\nExpiresByType image\/x-icon \"access plus 1 year\"\nExpiresDefault \"access plus 2 days\"\n<\/IfModule><\/code><\/pre>\n