 Ahora vamos a hablar con Guillermo, de algo, Guillermo Tamorero, de algo muy interesante, que es el tema de todo lo que le sobra, antes os lo decía, a WordPress, aunque sea veniendo por defecto, porque hay algunas funcionalidades que quizás vosotros no vais a utilizar para nada. Imaginémonos el tema de los emojis en una web corporativa seria, que pinta ahí, aunque no lo uséis, ya sabéis, los emojis lo que hacen es, si pones un punto y coma paréntesis, lo sustituye por un icono, un emoji, ¿no? Claro, un banco no va a poner quizás las caritas, pero tampoco lo va a usar, entonces hay varias cosas que sobran. Y atención, porque hoy vamos a hacer también aquí algunas fuertes indirectas, me ha confesado Roberto, que creo que os van a gustar mucho para ver sin tocar nada y destrozar vuestra web, ¿cómo ver si podéis quitarlo o no sin romper nada? O sea, que con todos vosotros, Roberto Tamorera, venga. Guillermo Tamorero. Buen día, buenos días. Bueno, muchas gracias por vuestra asistencia, gracias a los organizadores, a la organización por hacer este evento posible. Yo soy Guillermo Tamorero, y bueno, imagino que si estáis aquí es porque vuestro WordPress es lento y lo sabéis, o podría ser un poquito más rápido. Licenciado en Pedagogía, Estudio y Ingeniería Multimedia, y soy socio fundador de Iproject, que es una empresa pequeñita, ahí nos dedicamos a WordPress, otras cosas, mantenimiento de WordPress es uno de los núcleos que llevamos. Y este año somos patrocinadores bronce de este evento. Por eso si buscáis en vuestra, en la bolsita que os han dado en la entrada, tenéis, encontraréis un folletito nuestro, que espero que más tarde lo miréis en algún momento. Vale, lo primero es esta gráfica, os muestra desde el 2009 hasta el 2018 el porcentaje de todas las páginas web servidas a teléfonos móviles desde el 2009, eso hasta el 2018, es decir que ahora si os fijáis arriba de todo pone 52%. Hoy podemos decir que las webs que hagáis van a ser más vistas por móviles que por un ordenador. Entonces Mobile First, este paradigma es primero los móviles, que significa primero velocidad, buena velocidad de carga, y que funcione todo bien a nivel de móvil. Así que os invitaría a que a la siguiente web que tengáis que hacer, cuando hagáis el diseño a un cliente, en vez de decirle, te enseño cómo queda en la pantalla grande, no, enseñarlo cómo queda en Mobile, su web, prepararla para Mobile bien, y si os dice, ah, y para PC ¿qué? Dices, bueno pues nada, ya lo haremos, no pasa nada. Normalmente lo que pasa es, lo he hecho en plan inverso. Normalmente lo que se suele hacer es, bueno, algo para ordenador, y luego para Mobile ya haremos ahí algo, no, intentar hacerlo así, ¿vale?, en adelante. Tener en cuenta que Google valora la velocidad de carga para lo que es el ranking deseo, es decir, si vuestra web carga rápido, Google la va a posicionar mejor, y que sepáis que WordPress tarda una media y diez segundos en cargar en un dispositivo mobile con una conexión 3G, 4G, algo así. Estás, estás un día en un pueblecito de por aquí, y ves esto, no estás en tu casa con tu superfibra, y ves que en tu Mobile todo va muy lento. A lo mejor es una experiencia única de vosotros, probar con una conexión lenta vuestra web, a ver lo que tarda en cargar si es WordPress, hay que tener un poco de paciencia. Vale, lo primero que se puede hacer para, para que WordPress vaya más rápido, voy a ir diciendo bastantes cosas, intentaré no pegar mucho la chapa, y luego ya os aviso de que os preguntaré por webs si queréis que le echemos un ojo, las abriremos con el inspector, con la consola, y el que quiera un voluntario podemos ir mirando, ¿vale? Lo primero, seguramente hay muchos, hay algunos plugins, por ejemplo, que solo estáis cargando la página principal, y no sé si sabéis que WordPress carga todo en todas las páginas, ahí donde estés, no importa, si no le dices nada, por defecto, te va a cargar tu slider, que solo está en la home, en todas las páginas de todos los sitios, cargará los recursos, a lo mejor no carga las imágenes, pero esos recursos que pueden ser 100K, puede ser bastante algo importante, lo estará cargando en todos lados. Si nosotros hacemos un if, is front page, y ahí le ponemos el script para que se carga el slider, y en el resto de páginas, desactivamos el plugin, pues haremos una carga óptima solo para la home, en el resto no se cargará. Lo mismo, por ejemplo, para la página de contacto, que lo que haríamos aquí es desactivo el script, en este caso es WordPress contacto 7, lo tengo desactivado, pero si es una página de contacto, entonces lo activo, es WordPress 7 en Qscript, por ejemplo. Ahora, si esto suena un poco a chino, ahora explicaré otra cosa más fácil. También, por ejemplo, en este caso sería, si es una página simple, o si estamos en una categoría, tárgame el social plugin, que tengáis solo que sea, y lo de abajo es un poco más complicado, pero también podemos hacer que un WooCommerce, mejor tenemos una web que tiene una página de checkout, una página de carrito, y algunas páginas que son propiamente de WooCommerce, pero hay un montón de páginas que no son WooCommerce, y están cargando todos los recursos de WooCommerce. Si lo desactivamos, que se haría así, si lo buscáis en Google, encontráis exactamente como cosa escribiría esto, pues podéis hacer que vuestra web cargue, bastante más rápido. Si esto no sabríais bien bien dónde ponerlo, estos SIFs o estas cosas, que estaría dentro de las plantillas, dentro de las páginas PHP, en algún momento, o en funciones, hay un plugin, que se llama plugin organizer, que os permite hacer algo muy parecido, se puede combinar este plugin, se puede combinar con lo otro que he explicado, o lo puedes usar a ese caso. Por ejemplo, en este caso nada más instalar el plugin, en WordPress, que se instala pues como cualquier plugin, lo que aquí le hemos hecho es decirle que por defecto desactive booking calendar y contact form 7. Bueno, se ve aquí en este lado, y salen en rojo ahí los que no están activos por defecto, ¿vale? Entonces, en global tenemos estos dos, y por ejemplo, si me voy a, yo quiero que en la página de contacto salga el contact form, si me fuera la página de contacto vería que no me sale nada, porque no se está cargando el script de contact form 7. Entonces, lo que tengo que hacer es, desde aquí dentro, desde el panel de WordPress, irme a páginas, a la página de contacto, y donde tienes el título tal, y toda descripción y todo, bajas un poquito y tienes otra vez esta pantalla, y lo que harías es arrastrar a uno de los dos lados, o sea, decirle el contact form 7, sí que lo quiero activo. Es muy fácil, esto es drag and drop, arrastras y funciona. Este plugin es bastante sencillo de utilizar. Sí que tenéis que tener activado el Selected Plugin Loading, que es el único botón que yo tengo activo aquí ahora en el ejemplo, y si queréis hacer cosas también divertidas, de no cargar ciertas cosas para versiones de teléfono móvil, podéis activar el lado al lado y también podéis jugar un poco con esto. Pero bueno, voy a ir enseguida a la parte práctica. Voy rápido y saltamos a hacer pruebas, consejos básicos para mejorar la velocidad. Plantillas monstruosas que le llamo, no voy a poner nombres, versus plantillas hechas a medida. Cuando usarlas, cuando usar una, cuando usar la otra, yo para mí depende del proyecto, es un proyecto muy sencillo, algo muy fácil, muy tal, que un cliente no tiene mucho recorrido pues podéis hacer lo que es de la gana. Cuando es un cliente medio grande o que va a tener, es un recorrido de medio largo alcance, yo siempre tiraría plantillas adocas, plantillas que tú puedas, que gestiones tú, que hagas tú, por lo menos en nuestra experiencia lo que hemos visto es que el hecho de hacer nosotros las plantillas, cuando hay cambios, cuando nos pide cliente, ahora quiero que esto esté aquí, que esto está ya, que no se haga el precio aquí, sino que se haga, no sé qué, es muy fácil. De la otra manera, si usas plantillas, si tienes que estar ahí comiendo la cabeza a ver cómo se hace, porque no sabes internamente cómo está hecha esa plantilla. Han cercado mejor si hayis expertos de una plantilla en concreto, de la Divi y tal, que dices, no, no, es que yo me lo sé todo, lo puedo hacer lo que me dé la gana, vale, también. Luego, el uso de Visual Composer, Fusion Builder, Elementor y todas estas cosas, incluidas Bootstrap. Bueno, con cuidado, yo he visto cómo hay algunas empresas o personas que para hacer un grid de tres columnas y cuando tienes un navegador o un móvil, que es estrechito, que se vea en una, o sea, de tres pasar a una, se instalan todo un Bootstrap o se instalan el Visual Composer, tu entero dices, a ver, si solo vas a hacer eso, que son dos líneas de CSS con media queries, para que montas un FOILON que te va a estar ocupando 80k o más en tu página, ¿vale? Vale, no me enrollo más. JPEG progresivo versus JPEG normal o PNEG o GIF. Bueno, esto siempre es mejor JPEG progresivo. Progresivo es que carga la imagen como por capas, incluso siempre es un pelín más pequeño, suele serlo. PNEG, si tenéis fondos transparentes, bueno, no hay más remedio, si son muy grandes podéis tener un problema porque hay webs con PNEG enormes. Y luego la otra cosa es el tema de carga de imágenes en función del tamaño de la pantalla. Si cargáis una foto, se usaría sobre todo en sliders, ¿no? Un slider y que resulta que cuando tienes la pantalla grande pues es 1.900 píxels, cuando tienes una pantalla pequeñita se beso una barrita finita que casi ni se ve en el móvil. Entonces lo que puedes hacer es cargas condicionales. Si la pantalla es más pequeña carga otra foto directamente, otra foto recortada, más cuadradita, más pequeña, que ocupe menos. Ahora lo veremos en la práctica. Super caché, total caché. Se puede utilizar según el caso. Yo no me metería. Ahora con los servidores que hay PXP7, HTTP2, con Varnish, con TAL, con Enginex y todo eso, creo que no hace ni falta, a la vez que últimamente no lo estamos ni utilizando. Pero si tenéis mucha carga de gente que no es usuario que no entráiselo a GA, pues puede ser útil lo super caché. Me habían dicho que me enrallaron un poco más con el tema del servidor. Yo no soy experto, pero lo voy a decir en precio. Pagar 10 euros más o menos al mes por una web en WordPress y tener un buen servicio y tal es algo que más o menos sería razonable. El que diga no, no, es que yo tengo aquí un servidor que tengo tropecientas web aquí metidas, entonces al final me sale por 2 euros al mes porque se calculan los imprelaces. Tengo este WordPress que me cuesta 2 euros al mes, pues a lo mejor un poco límita de recursos o tú o la máquina o algo. Vale, luego lo último es deshabilitar siempre que sea posible vpkron. ¿Esto lo hace alguien? Vpkron es cuando cargas WordPress, siempre antes de nada, como WordPress te permite hacer programación de posts, por ejemplo, te permite el domingo por la mañana publicar un post y tú estás por ahí, pues se publica, ¿no? Pues para eso, para que eso sea posible, hay un script que antes de arrancar la web, te pregunta a ver algo que hay que disparar ahora, hay que lanzar algún post, sino todo el rato esa carga siempre da igual la página que cargues de WordPress que se hace esa consulta. Con lo cual si le pones esto dentro de esta línea de define-dissolve-vpkron-true en vpkron.ivpconfig.php, pues bueno, te estás ahorrando bastante. Y sobre todo, si tienes una página con muchas visitas o si tienes una página con muchos posts, o tienes muchos posts, esto mejora bastante. Yo lo he visto en algunas páginas simplemente poniendo esta línea, es decir, hostia, esto ya empieza a ir mejor, se nota. Vale, bueno, sí, me queda la de los sliders antes de empezar la práctica. Cuidado con los sliders, hay muchos sliders que por ejemplo tú los instalas, me quedo guapísimo aquí y tal, pero para móvil lo voy a quitar. Entonces dentro del mismo plugin de sliders, de WordPress, he puesto dos, pero hay muchos más. Todos los que he probado me funcionan así. Le puedes decir, desactivar el slider si estamos en un teléfono móvil. Entonces, te enseñas a tus colegas y te dices, mira, qué guapo, que se ve en el móvil y tal, que guay, pues estás cargando ahí una megancera porque te está cargando todo el slider, pero no te lo enseñas, te lo oculta. Así que mucho ojo con este tipo de sliders. Podéis utilizar lo que os he explicado antes de la carga condicional para móviles. Por ejemplo, decirle, si es un móvil, no cargues nunca este plugin. Y eso realmente hace que no se cargue nada. Siempre, si no tenéis un slider en vuestra web, la web va a cargar mucho mejor y mucho más rápido. Para móviles, pues ya no te digo. Vale, pues vamos a hacer un poco de análisis. No sé si hay algún voluntario, alguien, que diga, me gustaría que le echaras un ojo a mi web, porque bueno, a lo mejor puede ser rápido. Si vamos a una web fantástica, os diré, oye, la habéis clavado. Entonces, vdf.es. Siempre cromeas es posible. Así entrada, no ha parecido lenta, ha sido rápida. Obviamente estamos en un entorno con cable. Entonces, ¿qué hacemos? F12, los de Apple, no sé cómo va, pero llegareis hasta aquí también. Nos vamos a, por ejemplo, vamos a empezar por los audits, ¿vale? Google Chrome, que es una vez más avanzado sin duda, que hay ahora mismo, aunque le sigue un poquito Firefox, y Safari se está un poquito poniendo las pilas, pero bueno, ahí está. Chrome tiene esta herramienta, que para llegar aquí es, bueno, le dais al F12. Y en estas pestañitas, picais en audits y aquí directamente os dice, ¿qué quieres analizar para móvil o para desktop? Le marcamos a todo que sí, simulame una conexión 3G con una CPU un poquito lenta y te hace una simulación, limpiame la caché y le decimos, corre. Esperamos un poquito, vemos que va haciendo cosas aquí al lado. En principio, cada, con estos azules, cada cuadrito es un, bueno, que sería blanco, pero es que hay un fondo azul puesto en la web en principio, es un segundo, es decir, que está tardando aproximadamente como seis o siete segundos en cargar todo. Y aquí nos dice First Content Paint, la primera pintada en pantalla, tres segundos, la primera pintada en pantalla un poco significativa, es decir, aquí, tres segundos, coma dos. ¿Cuánto tiempo tarda el procesador en estar tranquilo? Una vez has hecho la carga de la web, ¿cuánto tiempo el procesador ya baja y se descansa? Cinco segundos. ¿Tiempo interacciones? Es decir, el tiempo interacciones, bueno, tú ves la web, pero a veces pasa que tú le haces clic en algo, haces scroll, se queda así enganchado porque está el procesador machacando, y te tienes que esperar, eso es el tiempo de interacción. Pues en este caso si bajamos, fijaros lo que pasa, de tiempo así no parecería mal del todo dentro que, bueno, es mejorable, pero aquí nos dice unas mejoras que no me cajan mucho por arriba porque si dice que tarda en cargar seis segundos aquí dice que te puedes ahorrar nueve segundos, es decir, que va atrás en el tiempo, pero bueno, para esta web no sé qué tiene, algo tiene. Lo que tiene sobre todo, y además pone muy bien el audits de Chrome nos lo pone todo en barras así rojas de más importante a menos, nueve con más seis segundos es muy importante, y luego de abajo todo, pues bueno, si lo haces bien y si no no sería grave, ¿vale? Vamos a mirar lo que es esto. Aquí nos dice que hay unas imágenes, esta imagen, y además estas las pone también en orden, ¿eh? Esta imagen es gigantesca, ya puedes ir, cuando salgas la cambias. O sea, es gigante y se dice que te puedes ahorrar un montón, por lo cual no sé ahora si es gigante en sí, no sé si le puedo decir aquí, a veces con el botón derecho, pero no parece que no. Bueno, sería buscarla, ver cómo es y ver por qué está mal comprimida, ¿vale? Seguramente, o es muy grande, o está comprimida como al 100% de jpg, algo así. Y aquí tres cuartos de lo mismo, hay algunas que realmente haciendo algunos cambios ahorraremos bastante, sobre todo estas dos o tres primeras solo tocando estas, mejora bastante. Properly size images, estos son, si ganarías otros cinco segundos más si hicieras las imágenes del tamaño correcto. Eso es lo que dice. Y dice cuáles son, justamente la más gorda de antes, vale, probablemente esta está mal, mal hecha. Luego también tres segundos coma seis codificador, optimización de imágenes, bueno, pues optimizarla, creo que es lo mismo, la imagen ya está, sería suficiente. Luego nos dice aquí render blocking resources, esto es cuando la página HTML se carga siempre empieza a cargar recursos y en este caso está cargando una CSS que se está en CSS, un frontman CSS que ocupan poco una fuente y tal, dice si esto en vez de cargarme lo aparte me lo cargas dentro del mismo contenido de HTML pues será más rápido, ahorraremos un segundo, y luego ya hay cosas que son menos importantes según el criterio de Google que es en activar la compresión de texto, no sé si se refiere a GCPO bueno, esto no sé a qué se refiere y eliminar los CSS que no están en uso, vale. Bueno, gracias por la web ya sabes lo que hay que hacer ahora, así de entrada, por ejemplo si queréis miramos otra web o podemos mirar esta misma a otro nivel, es decir, en vez de la nivel de audits que es lo que dice Google es mirar yo propiamente a ver qué le pasa vamos a hacer esta porque así luego me decís otra, vamos a hacer esta porque ya sé que vamos a tener un problema muy grande con la imagen y así lo vemos directamente, vale por ejemplo hago control f5 ah, ojo, aquí ya no estoy en audits me había venido aquí a audits, ahora me voy a ir a network ¿vale? alguien usa la consola de esta de sí si queréis utilizarla, todos los que desarrolláis todos los que tal, incluso los que no tengáis ni idea, va bien que con vuestra web digáis para lo que os voy a explicar aquí es suficiente decir oye, que esta web ocupa 4M nada más arrancar, ¿qué pasa? vale, en este caso esta web ocupa 3M vale me he puesto aquí en network le he dicho que disable cache disable cache y aquí puedes por ejemplo aquí varias opciones por aquí arriba, ya un día lo probáis un poco pero sobre todo, lo más interesante es ver todo lo que se está generando las jss, que si yo hago click aquí sólo me voy a mostrar las jss, las css que me salen aquí las css, las imágenes y esto ya es menos relevante pero bueno, las fuentes y tal entonces por ejemplo, vamos a darle a todo control f5, vamos a dar la carga vale, tenemos 50 requests, la importante está aquí abajo así de global, 50 requests 3.1M ha acabado en un segundo y 17 no está mal de velocidad de carga también es verdad que estamos trabajando sobre un ordenador bueno, tal, todo, vale si quisiéramos simular un móvil aquí arriba podéis decirle todo el device toolbar y por ejemplo, aquí en estos puntitos y si no está por aquí está por aquí a ver si consigo contrarlo aquí en online le podemos decir fast3g por ejemplo vamos a hacer una cosa salvaje vamos a decirle slow3g mejor acaba la charla y todavía no ha cargado vamos a probarlo si digo slow3g y ahora recargo para que veáis esto en realidad no se ve, ahora está haciendo la carga 80k, ahora está empezando a cargar pasaba ya 10 segundos estamos en un móvil en un pueblo hacho pobrecito, lo que sea no pasa nada con los polvos que tengan 3g ya lleva 30 segundos de carga esto es un caso de ejemplo real con el móvil dirías ya me voy no sé, si tienes tiempo libre estás descansando a lo mejor y ya lo espero a ver a ver si ya carga algo esto es un ejemplo claro, vale llevamos 1.8M de carga llevamos ya 50 segundos de carga parece que esté destruyendo la web pero perdona esto pasa con todas las mías también así cargan un montón en carga era un ejemplo para que veáis cómo se puede simular un móvil vamos a desactivar esto ya se ha cargado vamos a desactivar el slow3g el slow3g vamos a ponerlo en modo online que es toda la velocidad que puedas así consigo y otra vez vamos en all network, control f5 estoy a carga rápido, vamos a quitar esto y por ejemplo, vamos a arrancar lo primero que yo haría es voy a imagen y os recomiendo que hagáis os vais a imágenes y ordenáis por tamaño aquí en size dámelo ordenado por tamaño fijaros lo mismo que ha pasado antes 1.3M ha tardado mucho en cargar es lo primero que tendríamos que revisar si queremos mirar este recurso como es, aquí si con el botón derecho lo podemos decir y vemos que esta es la foto la foto en cuestión, la foto que nos está generando un problema grave si lo hago zoom, esta foto es gigantesca pues ese es el problema, tiene casi 4.000 pixels, simplemente es comprimirlo lo que habría que hacer es ponerla a 1.900 pixels y bajará un montón o 1.800 ¿Qué más? tenemos lo mismo podemos ir mirando y decir si también lo puedo hacer más pequeño, tal, tal las imágenes están listo, vamos por ejemplo a css y vamos a ver qué pasa con el css bueno tenemos tamaños de 80K cuando veis 80K aquí abajo y aquí 14K es la versión comprimida y la versión sin comprimir esta web es que está comprimiendo los recursos envía la web comprimida entonces aquí sale 80K que es el tamaño real y 14 es el tamaño comprimido y para todos los recursos sale así en realidad unos 50 recursos que tiene esta web está más o menos en el límite de lo correcto pero bueno depende mucho también de cada web hay webs que a mejor son muy corporativas en mucha imagen y tal puede ser que puede tener 40 recursos 50 y si tenéis webs que son más en tipo landing muy pocas fotos, algo muy muy breve a mejor con 20 requests o con menos, ya sería suficiente de carga aquí no hay nada así significativo es algo que si este css es un poquito grande, el resto son muy pequeños esto lo que podríamos hacer aquí es unificar los css estos de aquí con catenar unificar para que en vez de cargar 6 recursos pues este cargando 1 por ejemplo ya está y este se podría mirar a ver si hay algo que se pueda quitar de esta css de aquí queréis que miremos otra web? alguien que me hace la suya dime, no tengo no, siento, estoy con una mica sordo digas, digas, Arrelsta siempre vale, vale, siento sembra que estoy sordo Arrelsta siempre f5, control f5 vale, vamos a ver que ha pasado aquí, mire aquí si hacemos comparativa es cargando 3.7 megas nada más en la página principal puede ser que sea grande fijaros abajo los recursos, estamos cargando 124 recursos muchos aquí al lado pone 26 que significa que hay 26 css que es donde estamos en el selector de arriba 124 recursos total 300k de css y 3.8 megas de total, ya tardan a cargar dice, 16 segundos a veces esto es relativo lo de la velocidad carga tenéis que tomarlo como relativo porque podría ser que algún recurso que se cargue muy indiferido y entonces será como la velocidad de carga lo importante es que vosotros veáis bueno, pero esta web por ejemplo como así como consejo probablemente lo que habría que hacer es minificar bueno, primero hacer las algunas cosas que hemos dicho y ahora se explicaré y minificar css, vamos a mirar de jss como va tiene también muchas jss 52 jss que si las ponemos ordenadas tenemos la primera que son 349k de una cosa que es el atdisk vale, lo que vamos a hacer es como el atdisk es una cosa externa aquí se ve, lo que podemos hacer es bloquear este recurso, por ejemplo block request domain bloqueo esto del atdisk para ver qué pasa, control f5 aquí debajo aparece bloqueado, cuando yo quiera no bloquearlo puedo borrarlo, o sea realmente la consola de navegador y en concreto la de chrome es muy potente se pueden hacer muchas cosas por ejemplo bloquear recursos lo que le comentaba él es no hace falta que sepáis a que yo ira no se donde a desactivar jquery aunque os vengáis aquí botón derecho sobre jquery, le decís bloquear la url o el dominio entender lo que quieres bloquear pues ya podéis hacer una carga a vuestra web sin jquery a ver qué pasa, a lo mejor vuestra web funciona sin jquery, y otra una sorpresa y lo podéis desactivar o pedirle a alguien que lo desactive habíamos bloqueado el atdisk y lo que ocurre es que cuando está bloqueado pone aquí block y sale aquí en rojo y ha cambiado un poco 3.5 creo que ha bajado un plin, hay menos request 112, esto si lo vamos haciendo con todos los recursos que son externos, como lo recapcha y todas estas cosas por ejemplo block domain agestatic para que no cargue las cosas de google que van añadiendo historias y el maps podríamos quitarlo también block request domain este también es el mismo más maps aquí tenemos un layer slider que no ocupa demasiado un jplayer hay algún vídeo por ahí se supone entonces ahora que hemos bloqueado algunos recursos vamos a probar otra vez de cargar a ver qué ocurre bueno, ha mejorado porque si os fijáis aquí abajo los recursos que dan bloqueados, estos que salen en rojo si los quiero desbloquear simplemente hago a clic aquí pero de ciento y pico de recursos que aparentemente se están cargando que realmente se cargan, pasamos a 83 son 83 recursos los que parece que carga la página realmente luego, externamente carga otras cosas bueno, tengo que saltar a lo siguiente por aquí me están diciendo que ya me estoy alargando sigo con el con el powerpoint estábamos aquí hemos mirado el análisis de carga y ahora os doy algunos plugins que pueden serviros para mejorar la velocidad lo que decía antes eliminar jquery si no lo usáis se puede probar así directamente, si veis que todo funciona acá hay que probar la web completa de arriba abajo desactivando jquery que veis que salen rojo oye, desactivarlo, es perfecto, se puede hacer remove jquery migrate estos son plugins, los nombres que veis aquí son directamente los nombres de los plugins remove jquery migrate es un plugin que lo que haces es que es compatible que había antiguamente jquery tenía ciertas funciones y esto lo que haces es cargarse esas funciones que ya normalmente no se usan puede ser que os falle todo podriais eliminar este os instaláis este plugin, os borrará jquery migrate que es un script que se está cargando siempre y eso os borrará cosas antiguas puede ser que vuestra web deje de funcionar si, puede ser un lot and remove emojis and bits head details esto es para cargarse todo, es un plugin que lo haces cargarse el tema de los emojis que yo creo que no lo usa mucha gente a todo sistema de embed de WordPress y detalles de cabeceras que son como un poco redundantes o que no, no son necesarios siempre que podáis también usar vglay siload sirve para que cuando tú estás en una página, estos os voy a enseñar lo que es estás en una página por ejemplo tengo esta esta página lo hace bien y para que veáis, si yo le digo control f5 estoy aquí y le digo ahora borra todo fijaos lo que he hecho aquí arriba, puedo borrar todos los recursos para ver que ocurre después me voy a all y si bajo esta web está cargada, funciona bien pero fijaos que aquí se ha cargado un recurso Thailand de arriba si ojo un poco más ha cargado otro recurso porque lo que me está haciendo es cargar los recursos de que van a aparecer en la web y no se cargan, eso es un buen es una buena forma de optimizar también luego usar leverage browser catching que son políticas de caché para fijaos y otro plugin remove query strings from starting resources que es que WordPress por defecto siempre pone detrás de todos los recursos un interrogante y un parámetro pues lo que haces cargárselo para mejorar un poco la velocidad de carga y así como nota no basta con instalar el plugin hay que comprobar siempre que haces un trabajo eso lo podéis siempre comprobar con la consola de la que tenemos puede ser 10 minutos preguntas podemos mirar alguna otra web si alguien... hola hola si has hablado de los sliders que cargan que no son recomendables y de un slide en la página inicial slider revolution que pasa con eso depende como lo uses yo te diría si usas slider el cliente le encanta fantástico si usas slider intenta que sean muy poquitos es decir si tienes 3 sliders mucho mejor que decir si tienes 8 porque en principio los 8 a lo mejor te los carga directo si no puede ser que el plugin tenga la opción de cargar en diferido los sliders creo que hay algunos plugins slider que te dicen bueno voy a cargar en la primera imagen que vas a ver nada más entrar y como pasa en unos segundos y luego cargar el siguiente ya lo cargaré en diferido puedes intentar buscar esa opción pero luego lo haría en la versión móvil también está el slider también está y se ven anito así arriba o se ve grande diferente se ve ajustado a la pantalla si está en el móvil lo mismo que te acabo de decir que se carguen en diferido y ya está no tiene mucho más yo por ejemplo en esta cosa he enseñado antes de realtile que hacía cargas hacia abajo cuando bajaba salían las imágenes hice un script yo que sale una foto otra foto detrás y son cuatro líneas de jQuery que incluso ahora estoy pensando si quito el jQuery y ya las dejo de verdad porque para poner una foto y otra foto con los botoncitos realmente programando hay plugins hay scripts muy sencillitos que te hacen el trabajo puede ser que diga al cliente me encanta este tal no lo que sale sino que luego salen textos y van apareciendo y tal hay filigranas muy gordas con sliders que si te lo quieres hacer tu a mano es un follón entonces pues puedes que esté bien intenta desactivar el slider en todos los otros sitios que no esté en la home dejalo pero en el resto con lo que has explicado antes gracias bueno día acabo de comprobar el tiempo de carga del sitio web de la universidad donde trabajo poco más de tres segundos pero cuando comproba la versión móvil me subió casi seis como puedo atacar ese problema un poco con lo que ha explicado no sé escoger abrir el navegador pasarle la audit, osea Chrome pasarle una auditoría a ver que te dice él y luego analizarlo tú es decir voy a ir mal a la pestaña de network ver si son imágenes si son scripts lo que tarda una siempre es meterle un servidor más potente a veces te puedes estar aquí perdiendo el tiempo intentando dos trajes que me da muy lenta la web y realmente tienes un servidor que es muy lento, no tiene a mejor http2 no va sobre ngnex es una máquina muy limitada si simplemente pasando a una cosa de 15 euros al mes un poco más a mejor ya te la ahorras si es una universidad, bueno, quizá tienes sus propios servidores y supone que eso no debería ser problema va por aquí la cosa intentar analizar, mirar, a ver qué está cargando aquí cada uno me ha dado tiempo a explicar cosas pero a lo mejor está cargando recursos que son bastante inútiles y tal como os decía tú puedes decirle un recurso, este no lo pongas por ejemplo, pasa, fontawesson ¿cuántos iconos? 400 iconos son 80k a lo mejor está usando 4 iconos de fontawesson en tu web y para eso estás cargando una librería entera y toda una css no es necesario a optimizar se puede optimizar un montón como decía el compañero Pablo por la mañana decía hay como un 80% o sea, en un 20% puedes optimizar el 80 pero luego ya hay un punto en el que empiezas ya a aislar muy fino y vas a ir quitando cosas y bueno, si puedes ir optimizando, pero ya es más tedioso y más costoso cuando haces un pitch speed hay dos cosas una es la respuesta la respuesta del servidor es lenta que es lo que se puede hacer ya no el hosting sino a nivel de usuario aparte de comprimir para poder reducir esa respuesta a usuario y cuál es la velocidad correcta si existe y la segunda es el tema de aprovechar la cache aprovechar la cache para no cargar tanto pero te habla de google analytics google match que entiendo que yo no puedo guardar en mi cache te dan esos errores y aprovechar la cache para analytics para google match pero yo no puedo, entiendo si, de la primera pregunta sería si te dice que el servidor es lento es porque realmente el servidor es lento o es porque el servidor lo tienes machacado que significa que a lo mejor tienes un montón de plugins la velocidad de respuesta de un servidor es pan función de lo que tú le estás pidiendo si tú le pides al servidor una página html con cuatro cosas te la devuelve en el acto si tú le pides una página en PHP si hace dos cositas de PHP y te la devuelve pase muy rápido, nunca se va a quejar el problema es cuando tú le pides una página en PHP como una página en WordPress y cuando entras allá en el PHP tienes un festival de plugins algo gigantesco tiene que ver trabajar todo lo que hay ahí y devolver la página visible para el usuario devolver un html de un PHP sale, te devuelve siempre un html si es html, ha sido muy costoso de hacer pues probablemente te dé ese tipo de avisos de tus servidores es lento entonces entiendo que no es culpa del servidor sino es culpa mía que la máquina sea lenta no, no es del todo puede ser que la máquina sea muy rápida pero puede ser que tú le estés haciendo un buckle infinito y te haces un while hasta el infinito te dirá, no contesta no es un problema del servidor, es un problema tuyo que no has hecho bien el buckle pero iría por ahí la cosa lo otro que me... no sé si te contesta la pregunta lo otro que me preguntabas era de cache es la cache a nivel de hacer un PHP siempre te avisa de que aprovecha la cache y te dicen las alertas del google analytics google maps y todo eso, pero entiendo que esa información no la puedo guardar en mi cache yo no le daría... a ver, google analytics está muy bien el page, el insights page speed, todo esto está bien como patreona referencia es referencial para mí, el que dicen no, es que yo o mi web tiene 100% de tal yo te la hago rápido, yo te pongo un html te pongo hola mundo y tienes 100%, me parece no lo he probado de verdad, pero es tan rápido y todos los recursos están optimizados y te da eso, pero no sé, depende el tema de la cache pues eso si no lo hagáis mucho caso si tienes un 90% un 90 y pico no hay que buscar el 100 y si hay recursos que te están tragando historias o te están reduciendo o pues oye, si el cliente le da mucha importancia es muy sencillo, coges el mapa de google maps se lo pones pintado en pantalla con una imagen y cuando haga click se va y ya está ahí si no empurre eso hola buenas, una pregunta sobre las imágenes hace mucho que no lo veo pero antes las imágenes se cargaban y eran como píxeles, o sea, y se va haciendo esos cargos progresivos eso es una buena práctica lo ves como una buena práctica y como se aplica o se aplica automáticamente es que la verdad que no tengo ni idea cuando guardas la imagen en photoshop o el programa que uses como jpg progresivo y eso se hace automático, no se tiene que hacer nada más eso lo va cargando y ya está muchas veces el ordenador ya lo ves directamente porque ya tiene tanta potencia y te carga todo pero si quedes verdad que desde móviles ves que hay una imagen y se va cargando y entonces es bueno, es como muy antiguo pero ahora todavía pasan conexiones lentas perfecto, simplemente eso, muchas gracias buenas preguntas que opinión te merecen frameworks como genesis dv y quizá no, pero genesis de genesis ¿qué piensas? no lo he probado mucho frameworks una cosa pero al final caigo en, bueno, la hago yo haces tú pero es que has puesto en una diapo has hablado de ponías plantillas base que parecían interesantes pero no lo has comentado por ejemplo, yo hace dos años aquí en la workamp una ponencia de que explicaba cómo hacer desde cero una plantilla, ya no una plantilla básica y tal sino desde cero se puede hacer y en realidad es muy interesante si eres programador si realmente quieres aprender vas a aprender mucho, si empiezas a hacer una instalación de workpress y creas una planta vas a workpress codex y te dice ¿cómo se hace una plantilla? tú vas, la haces así ves que pones un nombre de la plantilla y está el punto css todo empieza ahí y pones el nombre de la plantilla y cuatro cosas y ahí arrancas y vas siguiendo el manual aprendes mucho de workpress hay algunos de los 6 routes que es una gente que hace este tipo de plantillas así muy de base que decían hasta que no has hecho una plantilla en workpress desde cero no eres programador hay que hacer una para entender cómo funciona no sé si te he contestado es otra cosa a ver, es que uso genesis he hecho alguna plantilla desde cero los frameworks, yo no me casaría con ninguno es que es relativamente rápido y a veces lo que nos pasa es que en el mundo real crear una plantilla para un proyecto por temas de presupuesto no es viable entonces necesitas una base que conozcas como también has comentado sobre divi y siempre está es el paradigma la búsqueda externa de la plantilla perfecta para la cual empezar un proyecto y luego personalizarla yo no la encontré y la he buscado pero bueno, yo creo que sí que hay gente que las encuentra y se llaman así genesis, divi, no sé qué yo provee también la XC en un tiempo no me gustó nada, no entendía nada mejor soy yo que no me acabo de aclarar pero sí que yo, soy un poco radical con el aunque digas ostras, es que es mucho más fácil con sus temas plantillas si el proyecto es de mediana si es un proyecto muy pequeño, soy yo que por Xeuros te hago aquí cuatro cosas nosotros gusta hacer proyectos un poco medianos grandes y es bueno si lo hacemos desde cero tenemos una velocidad de carga bestial porque todo lo que hacemos es directo no cargamos CSS de sobras no cargamos ni bootstrap, yo ahora al final ni siquiera el bootstrap lo estoy cargando porque digo si voy a usar col xs guión 12 y voy a usar col md guión 4 esto no es una de bootstrap para hacer columnas y tal y para que voy a instalar el bootstrap ya me lo escribo yo con css es un poco radical no se perfecto, gracias hay uno más a última hola, buenas algún consejo para optimizar una web multilingüe porque aquí has dado muchos consejos y muchas ideas para ir rascando milisegundos pero luego llega el cliente que tiene multilingüe, le metes el wpml y esto es un mamut aquí todos los que os he explicado sirven para multilingüe todo lo que he dicho lo puedes hacer para multilingüe si que es verdad que cuando pones multilingüe tienes muchos más post generados tampoco tampoco de lo que tenemos nosotros en multilingüe no es algo que diga que le pongo el idioma y tal y noto que la carga ampeora mucho si haces todo esto además de tener el multilingüe no creo que tengas problemas ya no sé si concretamente podrías ir a buscar en google optimizar tal o mejorar velocidad de carga si tienes, bueno no se nos da la tiempo pero podríamos mirar alguna que tengas y decir mira, está cargando un script que es un poco pesado ahí que se hace, a lo mejor no hay más remedio que decir bueno porque se cargue o a lo mejor en sí la página tiene muchas otras cosas y no es el multilingüe lo que te está haciendo fallar gracias a ti muchas gracias un aplauso