Cosas que he aprendido al montar el blog (V) Optimizar wordpress
Siempre me ha dado por fijarme en las herramientas de desarrollador del navegador, pero nunca lo había usado para cosas prácticas más allá de modificar límites de tiempo de acceso a contenido de webs que no es comprobado por el servidor, o desactivar filtros que molestan o limitan el acceso a cierta web.
Tanto en firefox como en chrome tenemos las herramientas pulsando f12,
y en mi caso usando chrome, en la pestaña «network» podemos grabar el tiempo de carga de cada elemento de la web si la recargamos tras pulsar la pestaña.
»De ahí pude ver que mi «theme» consumía mucho al descargar fuentes, e incluso mandaba errores de fuentes que no encontraba en un servidor externo.
Así que gracias a eso pude desactivar todas las fuentes externas.
»Otra cosa que encontré que me consumía tiempo de carga eran unos scripts de emojis (twemoji.js,wp-emoji.js…) que cargaba, que al cambiarles el nombre para forzar a que no los ejecutase vi como se reducía el tiempo de carga, así que por no buscar en el código y ahorrar tiempo busqué y vi que existen varias extensiones que desactivan estos scripts.
Éste es el plugin en cuestión:
»También los plugins que hice tardaban más de lo normal en cargar, por eso le añadí a posteriori el cachear la imagen en el plugin de widget de la nasa, y la opción de cachear todo el contenido al plugin de githubin, o la opción como atributo de desactivar las imágenes para el plugin de github embebido.
Realmente vuelvo a hacer hincapié en esto, ya que es lo que más tiempo de carga llega a consumir: un script nuestro o plugin externo que esté ejecutando mucho código en el servidor en cada petición.
Por eso es importante:
1-Cachear el contenido menos esencial, que suele ser el contenido externo.
2-No sobrecargar de scripts php el servidor para tareas que puede hacer el cliente programándolas en javascript para que se ejecuten directamente en el navegador.
3-No sobrecargar la web de plugins, que viene a ser lo mismo que el punto 2 ya que es más código php añadido que se ejecuta en el servidor.
4-Reducir las resoluciones, el color, o la calidad de las imágenes o cambiar su formato.
Las imágenes toman también su tiempo de carga, y el hecho de reducir de 64000 colores de una imagen a 32000 la imagen pasa a ocupar la mitad que antes y el resultado es inapreciable.
El formato también es importante, por ejemplo, el formato de imagen webp nos puede ahorrar más de un 50% de tamaño de imagen.
Podemos o bien usar software de imágenes como photoshop o paint shop pro, o bien podemos usar la línea de comandos con el programa mogrify de la suit gratuita «imagemagick«
Ejemplos para mogrify:
mogrify.exe -resize 800×600 imagen.png
mogrify.exe -quality 70 imagen2.jpg
mogrify.exe -format webp imagen3.png
5-Verificar que no hay errores de javascript o de ficheros inexistentes usando la consola del programador del navegador.
Para chrome pulsando f12 en la pestaña de «console» podemos ver si hay errores javascript, y en «network» si hay ficheros que no encontró al cargar la web.
»Como adición dejo un link de un tutorial para reducir el tiempo de carga de wordpress:
