Velocidad de mi tienda WordPress Woocommerce  

Hola Juan Carlos,

Realizando el análisis con Pingdom veo que tienes una calificación buena, con un grado de rendimiento del 80/100, la carga de la web es de 1,55sg. y con un tamaño de 1,5MB (voe que tienes imágenes que se podrían optimizar un poco más, como Contenido solo visible a usuarios registrados) lo que sería beneficioso para la carga.

Para habilitar la compresión GZIP puedes revisar el artículo de nuestro blog:

https://www.webempresa.com/blog/habilitar-compresion-gzip-en-wordpress.html

Luego, para habilitar compresión puedes hacerlo por .htaccess, te recomiendo revisar:

http://juanluismora.es/servidores-web/comprimir-con-httacess.html

Como siempre, ten la precaución de hacer copia del fichero .htaccess previo a aplicar los cambios.

Respecto a unir código de varios CSS y Java en uno sólo, personalmente no te lo recomiendo porque luego podría complicar el mantenimiento de dichos CSS; ten en cuenta que si se realizan actualizaciones de los plugins o el tema que estés usando, se pueden perder los cambios.

Un saludo.

Hola Lorena,

¡MUCHAS GRACIAS!

Vaya, algunas imágenes ya las optimice, pero no quería quitarle mucha más calidad. De todas formas lo reviso a ver si las puedo pasar a PNG y optimizo para que se reduzca más el peso.

Voy a mirar bien lo de la compresión. A ver si hay algo que no hice bien.

Lo del tema de los CSS y javas es porque en todas las herramientas de analisis de velocidad me dicen que tengo demasiados y que seria bueno reducirlos.

Voy a ver qué más puedo hacer.

Cualquier consejillo sobre la web es bienvenida 🙂

Saludos

Hola de nuevo Lorena,

La imagen de fondo de la web no la puedo optimizar más.
Utilizo https://tinypng.com/
y el máximo que me deja es el que aparece. 143 Kb.

¿Con qué otro programa online conseguiría optimizarla un poco más?

Hola Juan Carlos
Adjunto tienes la imagen optimizada, la baje a un peso de 98kb que para la dimensión que tiene esta bastante bien.

Existen paginas online en las que puedes optimizar las imágenes:
Image Optimizer: Funciona de forma sencilla. Lo único que tienes que hacer es subir la foto que quieres optimizar, darle al botón optimizar y a continuación descargar el archivo. Antes de descargar el archivo puedes ver el ahorro que has logrado gracias a este optimizador.

Smush.it:Es un servicio gratuito que ofrece Yahoo para desarrolladores web. Sirve para eliminar Bytes innecesarios de aquellas imágenes que queramos optimizar. Si usas WordPress, existe un Plugin con el mismo nombre con el que podrás optimizar todas las imágenes de tu web de golpe.

Personalmente prefiero utilizar alguna herramienta como Photoshop o Illustrator, siempre me dan mejores resultados.

Un saludo

Buenas Pepe,

¡Muchas gracias!

Yo la reduje a 74,4 kb con la herramienta online:
http://www.webresizer.com/resizer/

He estado comparando y sí es cierto que se pixela un poco, pero tampoco es algo que quede muy mal.
Míralo en la web a ver qué te parece.

Vamos a seguir con el tema de la mejora de velocidad de carga.

Ahora en las herramientas de análisis (GTmetrix, pagespeed, pingdom), me indican varios puntos de mejora:

• Reducir el tiempo de respuesta del servidor: Esto no sé si puedo tocar yo algo.
• Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página. ¿Aquí aconsejáis que se lleve todo lo que hay en Header al Footer?
• Especificar caché de navegador: Tengo el plugin supercache, pero no sé si se refiere a eso.

Muchas gracias por vuestra ayuda, seguro que en nada la página vuela 🙂

Hola Juan Carlos.
Yo la reduje a 74,4 kb
Muy buena, yo no la conocía y me parece bastante interesante, lo bueno de este foro es que todos conocemos alguna herramienta que puede ser útil y la damos a conocer 😉

Reducir el tiempo de respuesta del servidor:
Usas algún sistema de cache para tu sitio web ? Si no tienes cache activada cada vez que alguien consulta tu sitio web el servidor procesa todas las consultas, si tuvieras cache activada entonces esto no se realiza ya que leería directamente de la cache, otra cosa que debes Verifica es si estas cargando elementos desde otros servidores ya que si estos servidores son lentos esto también influirá en el monitoreo.
Puedes revisar esta entrada del blog:
https://www.webempresa.com/blog/item/1389-como-conseguir-que-tu-wordpress-sea-ultrarrapido.html

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.

WordPress por defecto carga en el header todos los recursos javascript y la mayor parte de los desarrolladores y diseñadores web también coloca allí los links a sus recursos, aunque lo más recomendable es hacerlo en el footer, es algo que nos ayudará a reducir el tiempo de carga de nuestro sitio web. Para ello wordpress dispone de extensiones que realizan ese trabajo.
https://wordpress.org/plugins/footer-javascript/

Otra posibilidad de hacerlo sin instalar ningún plugin consiste en editar el archivo "funtions.php" y añadir este código.

function footer_enqueue_scripts() {
   remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
    add_action('wp_footer', 'wp_print_scripts', 5);
    add_action('wp_footer', 'wp_enqueue_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');

Especificar caché de navegador

Este es un tema importante, al especificar el tiempo de expiración de los archivos, los usuarios que navegan por el sitio web no tendrán que volver a cargar todo el contenido del sitio, como por ejemplo los archivos de diseño CSS o logotipo de la página ya los tienen almacenados ya en la “caché” de su navegador.

Añade este código al archivo ".htaccess"

## ESPECIFICAR LA CACHÉ DEL NAVEGADOR ##
ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access plus 1 month"
## ESPECIFICAR LA CACHÉ DEL NAVEGADOR ##

Colocando el código en el archivo “.htaccess” y actualizando la web, ya tendremos definido el tiempo de expiración de las imágenes y de todos los archivos, en este caso para un mes, pero siempre puedes personalizar el tiempo de expiración que desees como por ejemplo: 10 days, 1 day, 1 week, 1 month o 1 year.

Si utilizas algún plugin de cache para Wordpress recuerda borra la cache del mismo para ver correctamente los cambios.

Antes de realizar un cambio en un archivo, recuerda realizar una copia del mismo por si hubiera algún problema, solo con un copia y pega en el block de notas seria suficiente para poder volver al estado anterior.

Un saludo

¡Gracias por la respuesta Pepe!

Reducir el tiempo de respuesta del servidor:
Sí, tengo supercache. La tenía desactivaba ya que estaba haciendo unos cambios. La he vuelto a activar.
Me miro el enlace que me has pasado.

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.

Hecho, pero noto dos efectos raros en la web.
Uno, que me ha cambiado los colores de algunos botones (el del carrito) y los cartelitos del "Rebajado", de naranja a azul. Creo que era porque por defecto venían en azul en la plantilla.

El otro efecto raro es que al pasar de página a página carga todo pero como sin estilos para al instante coger el estilo. Eso será por leerlo ahora el navegador más tarde. La pega es que tarda un poco y es molesto, ¿no crees?
¿Se podría hacer algo para que esa hoja de estilos sí cargue en el header?

Añadido el código en funtions y htaccess.
Por cierto, qué hace o qué es "image/x-icon", ya que me ha parecido raro que a este apartado se le ponga 1 año de expiración.

De nuevo, muchas gracias por tus respuestas.

Hola,

Ciertas compresiones suelen causar efectos secundarios por lo que es recomendable en caso de causar problemas revertir los cambios, puedes revisar el siguiente articulo de blog que te puede ser de utilidad: https://www.webempresa.com/blog/codigos-utiles-htaccess-para-wordpress.html

Desde htaccess se puede dar prioridad para que cargue un archivo CSS y que así la página cargue bien con sus estilos correspondientes.

Si se puede hacer, cómo sería?

Hola,

Si tiene código personalizado puedes darle prioridad sobre los ficheros css personalizados: https://www.webempresa.com/blog/agregar-archivo-css-personalizado-para-plantillas-gantry.html

¡Muchas gracias!