Hola
Estoy teniendo inconvenientes con la performance de un sitio web desarrollado en Wordpress. El mayor problema es el código JS pesado que según Pingdom ocupa más de la mitad del espacio. Este código es utilizado por el iframe de Youtube para cargar los videos. Es una web en la cual es necesario cargar estos videos por su nicho de mercado. Ni bien terminé el desarrollo traté de incorporar plugins del estilo Lazy Load for videos pero lo que sucede es que todos estos plugins me rompieron el diseño al intentar poner la thumbnail en vez del iframe. Probé con 4 de estos plugins con igual resultado. Con algunos el peso bajó de 5mb a 2mb, pero como ya mencioné la estructura de la web colapsó. Si tienen alguna sugerencia que no sea la obvia de cambiar la template, porque me llevo un tiempo producirla, será muy bienvenida.
Por otro lado me gustaría me recomienden maneras de optimizar las sugerencias de Pingdom para ver si puedo mejorar el tiempo de carga en algo. Con Pingdom, desde USA, donde se encuentran los servidores que alojan este sitio web, tarda de 3.5 a 5 segundos en cargar. Desde Argentina, donde recibe la mayor parte de peticiones, tarda de 6 a 7 segundos. Hoy el tiempo de carga óptimo estándar es de 1 a 2 segundos, por lo que siendo una página que recibirá tráfico de pago, es mucho. Dejando solo la primera slide (un video y una foto) baja el peso a la mitad y carga un 30% más rápido aunque la puntuación de Pingdom sigue siendo la misma, 68. Traté de integrar plugins como Total Cache o Autoptimize, pero entraban en conflicto con Varnish, y hacían que se visualice mal el sitio web. Agradecería me recomienden plugins que no rompan la web, y que mejoren los siguientes issues:
1. Make fewer HTTP requests.
2. Compress components with gzip.
3. Use cookie-free domains.
4. Add Expires headers.
5. Reduce DNS lookups.
Muchas gracias por la ayuda y su tiempo.
Saludos.
URL del sitio: Contenido solo visible a usuarios registrados
Hola Flavio,
Con respecto a tu primera consulta, te sugiero utilizar un plugin el cual muestre una imagen en miniatura del video, por ejemplo https://wordpress.org/plugins/embed-video-thumbnail/
Te sugiero soluciones esta primer consulta para luego resolver las otras.
Saludos.
Hola jhon
Como te mencioné, este plugin que no lo habia testeado genera el mismo efecto que los que ya había probado como Lazy Load for videos. La miniatura de video se corre y los dos textos que están en la cabecera y pie de esta miniatura, desaparecen para correrse para arriba y abajo. Ergo, lo tuve que desinstalar.
Igual gracias por tu idea.
Hola jhon
La template que personalice usa dos columnas, puede que esto este creando el conflicto que hace que la thumbnail no se acople bien a la miniatura de video de Youtube.
Gracias.
Hola Favio.
Disculpame pero no veo lo que nos comentas, esto es lo que yo veo:
No entiendo a qué te refieres con que te rompe la web, si puedes adjuntar una captura para que podamos ver a qué te refieres, sería de utilidad para poder ofrecerte una solución.
Adjunta la captura y deja uno de los videos con ese problema para que podamos revisarlo.
Un saludo
Hola Pepe
Gracias por tu respuesta. Pasa que cuando hago el test y se rompe la estructura de la web/la ubicación de los contenidos, lo borro el plugin, porque la web recibe tráfico pago y no la puedo dejar así. Necesitan igual captura de pantalla o se entiende lo que estoy explicando?
Gracias otra vez.
Saludos!
Hola,
¿Cuales son los plugins que tienes instalados en tu web?
Es probable que si tienes muchos plugins de optimización, generen conflictos entre ellos.
Lo recomendable es tener uno solo que abarque lo mejor posible.
Hola Jhonny
Vos decis que no envuelve bien la miniatura por algún plugin que tengo instalado? Me parece que tiene mas que ver con el diseño de dos columnas que tienen la web. No tengo muchos. Te pego la lista.
All-in-One WP Migration
Contact Form 7
Duplicar página
Envato Market
LayerSlider WP
optimizador.io
Permalink Manager Lite
Pricing Table by Supsystic
Qode Instagram Widget
Qode Twitter Feed
Slider Revolution
Slider Revolution
SSL Insecure Content Fixer
InnoDB
WE-Varnish-Cache
WhatsApp Chat
WP Chatbot
WP Remove Query Strings From Static Resources
WP YouTube Lyte
WP-Optimize
WPBakery Page Builder
Gracias y saludos!
Hola Favio.
Para poder darte una solución necesitamos reproducir el problema aunque sea solo un momento.
Cada web/extensión es distinta y utiliza su propia programación y no podemos darte una solución sin poder reproducir el problema.
Un saludo
Hola Pepe
Te sirve que grabe un pequeño video. Lo haría un momento en una hora conveniente.
Gracias.
Saludos.
Hola Flavio,
Antes de probar con las miniaturas prueba deshabilitando algunos plugins, hasta dar con aquel (los) que esté(n) afectando el performance de tu sitio. Por ejemplo, deshabilita el Varnish Caché (checa la guía en https://guias.webempresa.com/preguntas-frecuentes/desactivar-magic-cache-varnish-desde-la-administracion-web/ ), el revolution Slider, etc.
Saludos.
Hola Jhon
No se si has lanzado el test en Pingdom, pero claramente el peso lo genera el código JS del iframe de Youtube.
Gracias y saludos.
Hola Flavio,
Prueba deshabilitando el Varnish cache, como se indica en la web que te compartí en mi anterior respuesta y prueba instalando un plugin liviano de caché como WP Super Cache.
Si el plugin de cache te funciona bien entonces puedes probar utilizando alguno de los plugins de videos que mencionaste al inicio y probar si es que te rompen aún la estructura de la web.
Saludos.
Hola
Ya habia hecho con antelación todo lo que me sugieren en la última respuesta.
Por ello cambié el diseño y ahora utilizo una lightbox del tema para reproducir los videos y el peso total bajo de 4MB a 2MB.
De todas formas la carga total sigue siendo muy lenta, de 4 a 5 segundos para cargar 2MB. Les comparto resultados de Pingdom usando un servidor de USA, al lado de los servidores de WE: https://www.editordevideos.com.ar/ - https://tools.pingdom.com/#5ab0b4fa17c00000
Me podrían ayudar a optimizar los siguientes incidentes a mejorar:
F0 Make fewer HTTP requests
F0 Compress components with gzip
F0 Use cookie-free domains
F34 Add Expires headers
Sería bueno también que 2MB carguen al menos en 2 segundos. Estoy viendo de utilizar el plugin lazy load.
Saludos y gracias.
Hola Flavio.
Compress components with gzip
Añade lo siguiente al archivo .htaccess que encontrarás en la raíz de la carpeta de la instalación:
# Comprimir HTML, CSS, JavaScript, Text, XML y fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Eliminar browser bugs (necesario en caso de navegadores realmente antiguos) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent
Add Expires headers
.- Añade lo siguiente al mismo archivo:
## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
## EXPIRES CACHING ##
Use cookie-free domains
utilizas algun CDN para los estaticos ( Imagenes, estilos, etc.. ?
En principio ese aviso suele venir cuando se utiliza algún CDN y no suele tener importancia, suele ser un falso positivo.
Tienes información en este enlace:
-> https://www.keycdn.com/support/how-to-use-cookie-free-domains
Make fewer HTTP requests
Para esto hay que tomar algunas medidas como utilizar optimizadores de imágenes.
Y algún plugin para la carga imagenes " Lazy Loading "
-> https://cl.wordpress.org/plugins/lazy-load-optimizer/
La carga lenta de una web depende de muchos aspectos, cantidad de imágenes, estilos, programación inadecuada de la propia plantilla, compresión de imágenes, etc..
Un saludo