 me gustaría presentar al compañero juanca pues bueno es uno de los compañeros que se mueve mucho por la comunidad de WordPress organizador de WordPress Zaragoza también tiene un pasado y un presente oscuro con jumla pero un presente y pasado y posiblemente futuro también y nada pues nos va a hablar sobre cómo conseguir que nuestro WordPress huele y adelante con ello muchas gracias bueno muchas gracias a todos por venir nada vamos a hablar un poco de web performance optimizaciones a ver un poco qué es esto y unos primeros pasos para intentar mejorar un poco nuestros webs bueno ponerme el cronómetro porque si no luego me paso y me echa en bronca vale pues como ya me ha presentado un poco el compañero soy juan cadíaz básicamente yo soy programador frontend como a mí me gusta decir soy programador de lo que se ve para que me pueda entender mi madre y todo el mundo que no sea técnico porque muchas veces dices frontend y nadie sabe lo que realmente estás haciendo vale entonces cuando dices programación de lo que se ve ya más o menos queda un poco más claro estoy especializado tanto en WordPress como un jumla como ha comentado el compañero al final a mí me da relativamente igual lo que haya detrás siempre y cuando se asoja al libre por lo tanto es también es un poco declaración de intenciones que no nos tenemos que fijar tanto en la plataforma vale sino simplemente ser un profesional en un sector en un concepto en concreto y ya está vale como ha comentado soy fundador de desarrollador de jumla es que es un portal pues igual que tenéis las warcams en WordPress en jumla están los jumla deis no tenemos la suerte de tener una una entidad como son la warcancelta que los ayuda ahora mejor vale no tenemos tanta suerte de tener una entidad como warcancelta que nos ayuda a montar los los eventos como este entonces nosotros creamos una asociación para hacer los etcétera etcétera vuelve a estar agona vuelve a barcelona etcétera post hay podcast quien conoce post hay podcast vale pues tenéis que conocerlo más básicamente es un podcast que tengo con darío velbontín el que normalmente tratamos temas así un poco críticos vale nos mojamos un poco en temas de que la gente no nos suele comentar controvertido etcétera etcétera vale perfil un bastante técnico pero bueno creo que es interesante si os gusta el tema técnico creo que es interesante vale y yo siempre suelo empezar las presentaciones con un disclaimer vale un poco avisando de que todo lo que vais a ver es un poco en base a mi experiencia que yo no hago presentaciones ni charlas para sentar cátarea ni escribir un libro simplemente pues se os puedo ayudar un poco con mis consejos y con lo que yo he aprendido pues ganamos todos vale pero que nada es ciencia ciencia cierta sino que discutirme lo todo yo no estoy de acuerdo yo pienso que se puede hacer de otra manera mejor etcétera y al final aprendemos todos que es lo que lo que se trata vale como siempre digo soy responsable de lo que digo no de lo que cada uno interpreta no me puedo responsabilizar si alguno de estos códigos o recomendaciones fallan en tu web y en caso de duda consulta con tu programador vale wpo que son las siglas estas tan raras de wpo web performance optimization al final no deja de ser una cosa tan sencilla como el conjunto de técnicas para analizar proponer y desarrollar cambios directamente relacionados con con la optimización de la velocidad de carga de una web así como la experiencia de usuario de ésta y este último punto es algo que normalmente muchas veces se olvida nos centramos mucho en que la web cargue muy rápido pero luego la experiencia de usuario se ve afectada por esto y para mí eso es una mala optimización de una web porque carga muy rápido pero la experiencia que tenemos es mala entonces para mí no sirve de nada vale y un poco la otra opción para describir el wpo es ésta desde que se pone el semáforo en rojo y pasa verde cuando el de atrás no se insulta es también un poco wpo vale o sea lo que tarda en carga nuestra web cuando le damos al enter y qué pasa que no carga no que nos pasa a todos además estamos muy acostumbrados a web grandes como amazon otras plataformas que cargan súper rápido y cuando nosotros visitamos la web de un cliente o la nuestra y tarda 1 o 2 segundos en cargar ya nos desesperamos y sobre todo que no es wpo no es wordpress optimización porque al final tiene un poco de las mismas siglas vale tampoco instalar tres cuatro plugins y ya está vale tampoco es optimizar solamente la home que esto es una cosa muy típica hostias que la home me carga súper rápido ya pero en la home vendes no pues entonces de que te sirve que la home cargue súper rápido si es donde realmente tiene que cargar rápido de la web es donde tienes tu con tu acción tu página de donde venta etcétera etcétera que es donde realmente tu web está convirtiendo y esa es la que tenemos que tener súper optimizada vale tampoco se tampoco es wpo no valorar colecciones lentas porque muchas veces los perfiles técnicos solemos hacer pruebas en nuestros súper equipos y ordenadores que son la hostia con nuestras conexiones de fibra óptica de 600 mega simétricos y mi casa la web funcione súper bien no no la web la tienes que probar en el hotel de mierda que no te carga nada ahí es donde realmente se ve si una web está optimizada o no vale y luego lo que comentaba antes mucha velocidad de carga de la web pero tenemos una mala experiencia usuario cuando nos solemos preguntar sobre wpo pues nos solemos preguntar cuando tenemos una percepción de que nuestra web va muy lenta cuando nosotros queremos hacer campañas de seo y vemos que nos están la campaña no sale mucho más cara porque detecta a google cuando hace un cuando tú traes de alto una campaña normalmente te seo está mal sería adwords vale y pero también te penalizan el seo cuando tú traes de alta una campaña de adwords el mismo google revisa tu web y mira a ver cuánto carga la experiencia usuario que tiene lo que tarda en cargar la web y si tarda mucho tiene problemas de carga te va a salir mucho más carga esa campaña que si la tuvieras optimizada porque al final google lo que le interesa es que su usuario final tenga una buena experiencia con las recomendaciones que le da entonces si nuestra web de destino andamos la campaña que tarda mucho en cargar etcétera etcétera nos va a salir mucho más costosa nos va a salir más costoso cada clic es decir si queremos hacer una campaña que funcione y tener muchos tener muchos clics nos va a salir todavía más cara vale o sea que es un poco el pez que se muerda la cola cuando por ejemplo tenemos nuestra web y tenemos muchos visitas y al hosting nos dice oye que estás consumiendo demasiados recursos que pasa aquí y esto ocurre que cuando consumes demasiados recursos según que hostings o te piden que le ves a un plan superior o dice mentalmente te dice que te cambias de compañía porque la web no puede estar en sus servidores vale y el típico que es la competencia calzo que he dicho antes la gente está acostumbrada a las velocidades de amazon y si nuestra web tarda seis segundos aunque sea una tienda online y tengamos unos productos fantásticos si para hacer una compra en cada paso tiene que esperar seis segundos pues al final se va a marchar vale y en base a todo esto vamos a ver una serie de recomendaciones de lo que yo suelo decir de evitar caer un poco en el nhaas vale en el nhaa pasas a service y es decir tener una serie de conceptos un poco claros de un inicio y luego en el desarrollo ir aplicándolos para intentar evitar entregar nhaa pasa a clientes que luego son inoptimizables y lo es un problema vale que al final no cuesta mucho cuando empieza cuando ya los dios un poco claro los conceptos empiezas a desarrollar veremos que tampoco es una cosa muy complicada de poner en práctica ya desde el inicio vale vamos a ver una serie de pasos vale como todo en la vida antes de poder hacer algo tenemos que saber qué es lo que está pasando vale y para eso existen cosas que se llaman auditorías es decir vamos a ver qué es lo que tienes cómo lo tienes y en base a eso vamos a proponer unos cambios etcétera para para mejorar pero primero tenemos que ver de dónde partimos para esto tenemos una serie de herramientas como puede ser gtmetry google page speeds pingdom etcétera que lo que nos ayudan es hacer un análisis de lo que nos encontramos en nuestra web de qué es lo que hay y qué valores tenemos vale como decía antes no sólo se tiene que analizar la home la home es una de las que tenemos que analizar pero sobre todo tenemos que tener una reunión con nuestro cliente o ver el proyecto que queremos optimizar en concreto y ver cuáles son las secciones que realmente somos las que convierten donde está el formulario de contacto donde están donde nos piden un servicio etcétera esas páginas son las que tienen que estar utilizadas o las mismas landing page y vamos a hacer campañas etcétera etcétera vale y como recomendación que esto lo veremos adelante pues al final el tiempo de carga de una web si es una web con mucho tráfico por lo recomendable son de dos segundos hacia abajo y si es una web normal entre los cuatro segundos ya está bien vale como esta es un ejemplo de por ejemplo gtmetrix tenemos aquí una web que en este caso es la nuestra web estarragona y vemos aquí que nos da nos da unos porcentajes vale nos damos los valores nos lo ponen verdito ya está bien y lo que vemos no pues el tiempo de carga de la web tarda 1,8 segundos el total de peso de la web son 977 k si tenemos 27 consultas a base de datos y luego además nos va saliendo aquí una serie de puntos que nosotros podemos revisar a la hora de cómo está nuestra web en ese momento cuando se hace el análisis vale en este caso esta web prácticamente no tuvo optimización es decir ya se desarrolla de una manera siguiendo una serie de pasos que luego veremos y entonces cuando haces el análisis está más o menos bien pero tampoco nos tenemos que solucionar con los porcentajes vale como recomendaciones así un poco genéricas veríamos que como hemos comentado antes una web con mucho tráfico menos segundo una web corporativa o normal que tengo unas visitas normales pues en alrededor dos cuatro segundos está bien intentar siempre tener que el peso de la web esté por debajo de los dos megas esto es objetivo porque si tu web es de fotografía y tiene muchas fotos o enseñas un producto que es muy visual y vas a utilizar fotos o vídeos pues te va a pesar más al final como todo en la presentación el sentido común es lo primero y luego lo que se puede hacer vale intentar siempre que las menos peticiones posibles hacia afuera en este caso pues alrededor de una cincuenta estaría bien esto veremos que a la que utilicemos plantillas comerciales tema multipropósito que es un despropósito y cosas de estas veremos que las consultas bueno que todo esto se multiplica por 500 porque es muy generalista y es muy difícil y con que tengamos puntuaciones alrededor de 60 70 80 por ciento ya está bien tampoco nos tenemos que obsesionar en conseguir el 90 99 porque es muy complicado y a veces según que proyectos es imposible hacerlo vale este es el caso típico que llevo ya gtmetrics pongo mi pongo mi web no mi súper web punto com y lo que me sale esto que esto es un caso real además es curioso porque es una web de un sitio en la que me invitaron para dar una charla de web performance de mi seis y cuando estoy revisando dije yo joder aquí o me cuelgan o salgo en brazos no fijaros en cuatro casi cuatrocientas peticiones a base de datos 40 megas de página web de carga y un tiempo de carga de 18 segundos y esto es si buscamos nuestra web y tenemos estos valores es que lo todo mal sabéis la expresión todo mal pues todo mal aquí nos ha hecho prácticamente nada si está la plantilla tal cual viene nos han optimizado las imágenes no se ha hecho nada y claro el resultado es esto si la web la ves en tu fibra de 600 vegas simétricos se ve perfecto pero solo vas a ver tú vale y entonces lo que pasa no cuando no tenemos este resultado pues ésta es un poco la cara que nos queda porque es imposible optimizar así que en base un poco lo que hemos visto antes vamos a ver los siguientes puntos a ver qué podemos hacer con este desaguisado que nos hemos encontrado vale si nosotros ya hemos hecho una serie de auditorías lo que tenemos que hacer es analizarlas entonces analizamos la serie de auditorías que tenemos es decir esos porcentajes esas recomendaciones esos puntos que hemos encontrado auditorías en función de las diferentes secciones o páginas que hemos que hemos analizado y lo que tenemos que hacer es ordenarlas por orden de importancia es decir de todas estas cuál es la más importante a mejorar y cuál es la que tiene que primar sobre las otras para poder ir optimizando punto por punto vale porque en este caso si una de las páginas nuestras muy importantes de optimizar me lo invento es la de que te rellenen un formulario y uno de los problemas que tenemos es que se nos está encargando todos los scripts y todas las consultas de formulario en toda la web pues igual lo que hay que mirar es hacer carga condicional de ese formulario solamente en esas secciones que tenemos formulario y en las otras no es un ejemplo muy chorras pero para que nos hagamos un poco la idea y luego también tenemos que valorar con el responsable de ese proyecto qué puntos podemos hacer porque muchas veces nos encargan una tarea de optimización o queremos optimizar la web pero hay algunos de estos puntos que no se pueden tocar es decir uno de los primeros pasos es pues si tarda mucho encargar si el tiempo del primer byte de respuesta es muy alto etcétera se tiene que cambiar de hosting pero si no se puede cambiar es que tengo cinco años contratado si no me devuelven el dinero bueno pues igual te interesa seguir perdiendo pasta en optimización porque es que ya los paga en el hosting y no te queda otra no son cosas que se tienen que valorar o no se puede cambiar el diseño porque es que hace seis meses que lo hemos cambiado y ya hemos implementado este y nos costó mucho dinero y nos gusta porque está muy alineado con nuestra marca etcétera etcétera pues igual el diseño entero no se puede cambiar pero se pueden hacer unas modificaciones un poco más pequeñas o no se puede cambiar de tema porque hemos sido unos cracks y hemos implementado un tema de sinfores y tenemos un montón de cosas por folios cosas que no tienen que ver con el tema y ya lo tenemos en nuestra web con contenido y moverlos un problema pues igual en ese momento sólo por una tarea de optimización igual el cliente no te va a aceptar que le cambia la web entera y todas estas cosas se tienen que analizar se tienen que comentar con el cliente o con el proyecto que vamos a optimizar y valorar que es lo más prioritario en base a lo otro vale esto ya cada uno lo puede hacer a su manera o como crea tercer punto optimizar las imágenes este es el punto más sencillo de hacer y que tiene un cambio más gordo entre comillas en la experiencia de al final del de la web en sí vale y es el tema de que las imágenes se tienen que optimizar en tamaño y en peso es decir tenemos que utilizar el tamaño de imagen que realmente necesitemos ni más grande ni más pequeño porque si es más pequeño se va a abrir pixelado y si es más grande estamos bajándonos de información de más que no sirve para nada tenemos que optimizar la calidad de estas imágenes hoy en día tenemos unas cámaras que hacen unas fotos a megapixels bueno te hacen de todo pero no necesitamos todo eso vale de hecho la web la la densidad de pixels que va a mostrar son 72 para que necesitamos subir las fotos a 300 de pays es un poco absurdo no pues todas estas cosas se tienen que mirar y va a hacer que nuestras fotos pesen mucho menos imágenes y la carga sea mucho mejor así mismo como que en todo lo que se pueda utilizar elementos vectoriales como svg etcétera etcétera es mucho más recomendable que utilizar imágenes que son mapa de bits luego con pantalla retina se ve pixelado etcétera etcétera vale esto en la medida que de lo posible se utilizan logos antes era mucho más complicado porque todas las webs eran imágenes cortadas en pequeñito y es optimizar la edad de la muerte pero a día de hoy es casi todo código casi todo vectores y es muchísimo más sencillo y carga mucho más rápido a eso que no las imágenes tenemos que hacer escalados de imágenes es decir intentar consensuar con el diseñador que si vamos a ver una foto destacada en la noticia individual que luego tenga un tamaño relativamente proporcional a la vista del archivo donde están todas para que los cortes de esa imagen técnicamente sean mucho más fáciles de hacer que no tengamos que declarar dos tres imágenes para subir una foto porque es que en el diseño quedan muy cookies si pero es que voy a tener que subir cada vez tres imágenes voy a tener que optimizar tres fotos cuando lo único que quieres poner una noticia vale esto también esto es un poco entre wew y sentido común pero también es importante vale y luego también eliminar información redundante como pueden ser metadatos que estén dentro de la foto que no nos interesa porque no los vamos a usar etcétera al final todas cualquier programa de edición de fotos falle cargar sus metadatos la propia foto cuando se hace ya tiene sus propios metadatos etcétera etcétera plugins que se suele utilizar para esto pues el wew wew wew image optimizer que a mí me gusta mucho funciona muy bien o por ejemplo el smash que también es muy conocido y funciona muy bien hay muchos más servicios y hay muchos más plugins esto ya cada uno elige el que más le conviene vale aquí pongo siempre dos imágenes cuál de los dos me diréis que es la original y cuál es la optimizada para para web la verdad ésta es la original no vale pues luego que habéis dicho derecha estáis equivocados la original es ésta de aquí vale o sea 1920 de resolución por 1080 2,4 megas de web y la de la derecha es la optimizada en 980 pixels de de ancho y 550 de alto vale 202 cas donde está el truco aquí además que aquí es la hemos reducido el tamaño porque es el que necesitamos le hemos pasado un filtro que le baja un poco la calidad a la imagen para que no pese tanto y además al ser más pequeño de tamaño pesa menos y por ejemplo una de las cosas que yo hago es que como le estamos quitando calidad la imagen le aplicamos un filtro de sobreponer el efecto y lo que hemos perdido de calidad lo estamos ganando pues aumentando el efecto de foto es yo mismo de enfocar que lo que te haces que las aristas te las destaca un poco más y parece y no parece tanto que hemos perdido calidad es como un truque vale seguro que hay mil más pero yo soy programador entonces es hasta donde llego vale entonces en base a eso luego también hay mil trucos más como utilizar fotos donde predominé más un color que otro porque al final lo que será realmente en los archivos de imagen lo que se guarda son bits es unos y ceros entonces si se repite mucho un color se va a declarar muchas muchas menos veces en ese fichero y va a pesar menos vale entonces al final son un poco de técnicas truquis que nos pueden servir para para esto seguimos cuidado porque WordPress cada vez que guarda una imagen él realmente hace tres cortes que son estos que tenemos aquí que si nos vamos a justos medios los podemos declarar y gobernar por aquí en el que nosotros le vamos a definir qué tamaño va a tener cada cada imagen que vamos a subir el tamaño pequeño el tamaño medio y el tamaño grande entonces cada vez que se suba una foto además de que WordPress por defecto va a bajar un poco la calidad creo que la baja un 10 por ciento de forma de forma nativa y eso lo podemos desactivar con una línea de código me quedo me estoy ahogando no hago mayor ya cada vez nos va a hacer tres cortes de imágenes entonces intentemos utilizar estos tres cortes de imágenes porque es que nos las va a generar si o si entonces utilizémoslos y adaptemos un poco en las imágenes y los diseños y los layouts que vayamos a desarrollar teniendo en cuenta que siempre vamos a tener al menos estos tamaños de imágenes podemos declarar otros más propios que queramos pero cuando los declaramos van a ser tres versales a todas las imágenes es decir si declaramos cinco tamaños de imágenes más se va cada vez que subamos una foto aunque sea para un producto se nos van a generar las cinco tamaños que hemos declarado más los tres más los que te meterá bucomers o lo que sea vale entonces esto lo tenemos que tener en cuenta y luego también otra cosa que si hoy cambiamos el tamaño de estas de estas imágenes y al dentro de dos meses nos hemos dado cuenta que necesitamos otro si nosotros lo cambiamos aquí las fotos antiguas van a tener el mismo tamaño en los mismos cortes que el día que las subimos entonces hay un plugin que es regenerar time nails que lo que hace es que ejecuta otra vez la acción de regenerar todas estas miniaturas de tu galería de medios depende de la galería que tengamos del tamaño de imágenes va a tardar más o va a tardar menos pero cada vez que cambiamos estos valores se tiene que hacer para que lo cambien todas las fotos de la web seguimos hosting punto número 4 hosting porque pongo hosting y luego hay abajo gratuito web barato etcétera porque se busca y claro si queremos que cargue a la web rápida y buscamos hosting barato gratuito pues tenemos un problema vale como buscar banca ética no son conceptos que chocan en la cabeza pues esto es igual como recomendación un poco genérica para que un cojostin más o menos empiece a ser decente desde mi punto de vista he repito a partir de 100 120 150 euros al año podemos encontrar cosas con caray ojos al final lo barato sale caro vale quien paga cacahuetes contrata monos entonces tenemos que tener en cuenta esto no le pedimos no le podemos pedir mucho si nuestro hosting es super barato es gratuito es un compartido donde hay 5000 webs entonces dependen el proyecto lo que necesitemos tenemos que apostar por hosting que tenga discos ssd hp 7 es un básico http2 ssl a día de hoy para mí todas estas cosas es un básico o sea lo tiene que tener si o si otros puntos va a lograr que el hosting esté acercando al cliente pues si es un proyecto en españa mirada a ser lo posible que el hosting esté en españa lo más cerca físicamente del cliente porque vamos a limitar los tiempos de respuesta porque físicamente está más cerca vale al final son mil y segundos pero bueno esto vamos subando unas cosas con otras y se nota y ya para nota es si por ejemplo tenemos una caché que se interna en el propio servidor tenemos por aquí saigón que es patrocinador y ellos por ejemplo tienen un sistema de caché en servidor que funciona muy bien y es mil veces mejor que cualquier otro sistema que instalemos un plugin o lo que sea porque esto lo gestiona memoria ram y no es más rápido que no hay nada más rápido que eso y luego la respuesta al primer bit plugin itis este es otro típico cuántos hemos visto web con plugin itis levantemos la mano vale básicamente la progenitis es tener muchos planes y no sabemos ni pa que estamos usando unos otros planes que están haciendo lo mismo que hace el otro ya pero es que este hace uno que una cosa que me gusta y el otro hace otra que tal digo ya pero es que todos están cargando la misma funcionalidad y se lo utiliza es un trozo tenemos que intentar revisar vale intentar revisar que no se repiten funcionales funcionalidades en los mismos plugins para cosas pequeñas como dos líneas de código no se necesita un plugin a poner el código de google analytics no necesitamos un plugin si no sabemos hacerlo no nos va a quedar otra pero si ya estamos mirando temas de optimización que ya se supone que tenemos una web y que tenemos la parte técnica mínimamente realizada esto ya es un punto ya para para ir haciendo las cosas un poco mejor evitar por ejemplo los plugins franquestein todos esos plugins que hacen cincuenta y cinco mil cosas hay plugins de caché que te lavan la ropa prácticamente vale y dices hostia si es lo único que quiero es que me caches teminificate caché te hace los cookies no sé que no o sea hazme una cosa sola y ya está porque el día que quiera prescindir de ti sólo voy a prescindir de esa funcionalidad y voy a elegir otro que me cubra sólo eso en cambio si tengo cincuenta y cinco mil cosas contigo el día que me vaya porque te falla algo voy a perder cincuenta y cinco funcionalidades nuevas que tengo que buscar ya me entendéis un poco lo que quiero decir y luego para saber un poco cuánto nos consume cada plugin y qué problemas estamos teniendo tenemos el p3 a día de hoy creo que hay muchos más pero bueno este es un típico y este es lo que nos dice un poco es en nuestra línea ejecución de workpress cuando se van cargando los plugins que es lo que pesa y que es lo que carga cada uno y ahí podemos ver un poco cuál es el que nos está generando un cuello de botella o igual tenemos un auto el típico tonto de compartir en redes sociales y le pasamos esto y nos encontramos que es el que me chupa cuando es una chorrada lo de cargar en redes sociales que lo podemos hacer de otra manera o incluso con un código metiéndolo en los layouts que nosotros nos interese vale carga condicional esto es un ejemplo que ponía antes que era por ejemplo si mi call to action está en vender un producto o en que se rellenó un formulario de contacto porque me estás cargando los css los yavascript y todas las consultas de ese formulario y desadventa del producto en toda la web si solamente hay dos páginas en los que se ejecuta esa acción pues tenemos que mirar a ver que realmente si esos plugins lo están haciendo bien o no lo están haciendo bien para que solo se carguen esas librerías esas dependencias esos ficheros en las en las páginas o en las secciones donde nosotros vamos a utilizarlas vale es un típico que el de formulario de contacto cargue los recursos en toda la web y solo se está utilizando en la sección de contacto que además el tema de contacto es un poco genérico no se tendría que dar un poco de vuelta ahí en como digo revisar la carga de los x plugins porque a esto te lo puede hacer uno te lo puede hacer todo por ejemplo luego lo vemos más adelante bu comes por defecto te carga todas sus dependencias en toda la web y no lo hace porque sea al final muchas de esas de estas decisiones la gente pensará que cabrones me lo cargan toda la web me quieren joder no sea por ejemplo bu comes o muchos plugins lo hacen básicamente porque si tú tienes un ecomers es que toda tu web va a ser un ecomers entonces por defecto se toma esa decisión que puede ser la mejor o no pero se ha tomado esa decisión lo importante es que luego haya un filtro o algo que nosotros podamos desactivar todo eso que lo normal es que si están bien desarrollados lo podamos corregir a vale y lo que comento ahí que es intentar hacer landing page porque si nosotros hacemos una landing page dentro de nuestra web imaginemos que tenemos una web súper mal optimizada con un montón de dependencias etcétera pero queremos hacer campañas o queremos hacer una promoción especial o lo que sea pues hacemos una landing page en html del ao repitiendo un poco el mismo diseño y lo que tenemos en nuestra web lo podemos que combinar perfectamente con WordPress y optimizar un html es lo más fácil del mundo porque ahí no hay ni consultas a base de datos ni te cargo esto ni te cargo lo otro si esto lo necesito si esto no y es una manera de que podamos salvar esas campañas o esos problemas que tenemos puntuales en esos puntos lo ideal es actualizar e intentar tener a la web pero a veces también esto puede ser un recurso optimizar los códigos de nuestros plugins o nuestros temas o todo lo que tengamos dentro de nuestra web al final esto es código por lo tanto contra menos llamadas contra menos condicionales tengamos contra el código este mejor más ordenado y se amas limpio limpio y ocupe menos más rápido va a cargar etcétera etcétera vale como decía antes dos plugin digo dos para dos líneas de código no se necesita un plugin muy importante diferenciar entre diseño y funcionalidad es un típico de que en las plantillas se introduzca lógica de negocio o se introduzca en funciones de programación que no tiene nada que ver con el diseño el diseño y la maquetación es una cosa y las funcionalidades es otra es decir todas estas recomendaciones de tengo quiero hacer este cambio en mi web para que no se muestre esto copia este código y ponlo en tu función de tu tema no el tema es diseño y es maquetación las funcionalidades tienen que ir a nuestro propio propio plugin porque el día de mañana cuando cambiamos de tema que vamos a cambiar porque cada año dos años cambiamos de tema si nosotros cambiamos y tenemos un montón de funcionalidades en funciones además como hemos hecho copiar y pegar no las tenemos comentadas no sabemos que estamos cambiando y que no y cuando cambiamos de tema vamos a tener un problema de tener que estar rebuscando todo eso allí cuando si lo hubiéramos hecho en un plugin nuestro ese problema no lo tenemos o tenemos a futuro hemos hecho un cambio y tenemos un problema deshabilitando ese plugin podemos ver si esas modificaciones están afectando no están afectando a eso de la otra forma deshabilitamos la plantilla y no de lo deshabilita todo vale vale y lo que comentaba también antes de intentar sustituir los plugins comerciales por plugins nuestros con mínimas funciones si veis un poco cada número que avanzó es un poco más jodido de hacer vale se requiere un poco de nivel técnico pero bueno o sea al final podemos elegir un poco en qué punto nos quedamos también un poco en base a lo que necesitemos o no el punto número 8 minificar html i css básicamente los recursos estáticos se pueden minificar que es poner todo el código junto como vemos aquí esto nosotros no lo podemos leer pero las máquinas lo leen perfectamente igual que el otro vale las máquinas no tienen un toque como tenemos nosotros que el código tiene que estar ordenado intentado todo perfecto bonito donde abre cierra a la máquina le da igual mientras esté lo va a leer y lo va a ejecutar pues intentemos utilizar herramientas que nos minifiquen el código siempre en producción que se lo hacemos en desarrollo no lo vamos a poder entender y no vamos a poder desarrollar vale y como vemos ahí se cambia bastante los los tamaños de los diferentes recursos y los tenemos minificados o no en algunos casos es más en algunos casos menos al final si vemos un poco en general todo es tema de kilobytes o sea cosas muy pequeñas pero muchos cambios pequeños hacen un resultado final grande vale es al final el la calidad está en los detalles bueno como vemos aquí en todas hay plugins relacionados vale que os pueden ayudar con con esta tarea como puede ser el auto optimize o el super minify optimizar base de datos este es un típico cuando nosotros tenemos plugins desinstalados hemos probado plugins hemos utilizados unos cuantos todos estos registros se quedan en base de datos y qué pasa o sea la base de datos al final es como un índice se va escribiendo y si esas líneas no están borradas cuando nosotros tenemos que buscar noticias de aquí pero aquí hay cosas escritas va a tardar más porque tiene que hacer saltos y tiene que ir consultando en cambio si esas líneas que ya no se usan están borradas el salto es directo no tiene que ir no se tiene que ir encontrando basura por medio es lo mismo para que nos entendamos como el de fragmentar disco en el windows vale intentemos minimizar el número de revisiones de los post vale para que no guarde es que por defecto no tiene límite pues tres cinco revisiones y ya estaría bien todos los comentarios aunque estén en spam estén en la papelera ocupan sitio en la base de datos entonces si no necesitamos se borran directamente papelera o sea va hacia el papelera y listo y luego el otro punto son los los opciones o los transient que los utilizan plugins y también son información que está guarda en base de datos y todo esto si el plan más o menos está bien hecho nos va a pedir que una vez lo borremos se eliminen todos estos registros en base de datos y nuestra base de datos va a estar más óptima y para acabar y lo pongo el último es caché y cdn porque no sirve de nada no haber hecho ninguno de los pasos antes y cachar desde el primer momento porque estamos cachegando caca y si cachéamos caca nos sirve de nada porque lo único que estamos haciendo es cachar cosas que valentas entonces primero tenemos que optimizar y el último punto de todo si es necesario cachar vale básicamente lo que el cachar lo que hace es que todas esas consultas dinámicas y que tardan de consulta base de datos y etcétera etcétera no las va a hacer las va a guardar en un fichero de temporada en html y eso se lo va a servir cada vez al usuario sin tener que hacer todas esas consultas vamos que es mucho más rápido vale intentar utilizar las las caches de navegador todo navegador tiene su caché si se declaran htx etcétera etcétera te las va a gestionar en navegador sin problemas habilitar la compresión que cip esto ya si un servidor no tiene cip ya tenemos un problema también esto va también a ahorrar ancho de banda y luego también tenemos que tener mucho cuidado con utilizar este contenido dinámico en en web como por ejemplo una tienda online etcétera porque por ejemplo las páginas de carrito las páginas de usuario el checkout eso no puede estar cachado porque entonces nos vamos a encontrar información del cliente del lado vale y eso no lo queremos y como último paso utilizar un cdn que es un content delivery network que es para poder cargar esos recursos que no las sirva nuestra máquina sino que se vayan a buscar afuera que son más rápidos y voy a acabar ya porque si no me van a matar último punto muy muy rápido bucomers bucomers genera sus tamaños de imagen lo tenemos que tener en cuenta como comentaban descuidado con la caché no cachemos carrito checkout etcétera etcétera evitar cargar bucomers en todo wordpress y aquí os dejo un código que lo que hace un poco es deshabilitar las dependencias de bucomers y solo les habilitan esas páginas que se necesitan vale y no se carga en toda la web y esto hace pues que si en nuestra home no vamos a ver productos no lo vamos a utilizar pues no se carga vale un poco de guía muy rápida auditoría para ver cómo estamos consultoría que es lo que vamos a hacer que podemos hacer y que consensuamos con el cliente con el proyecto para optimizar optimizar imágenes revisar hoftin intentar no tener plugin itis hacer una carga condicional de lo que necesitamos en base a la sección donde estamos optimizar el código minifiquemos optimizar base de datos y al final del todo caché y cdn vale y como siempre me ha gustado acabar con una frase mólana pues el worker pintero deja el mueble bien acabado tanto por la parte que se ve como por la que no y ya está tenéis las diapositivas de aquí con los enlaces en todos los recursos y plugins comentados así que luego voy a estar todo el día aquí así que no muerdo aunque tenga mala pinta no muerdo bueno lamentablemente por el tiempo no no queda tiempo para preguntas pero como acaba de decir va a estar por ahí así que o acercar y la aceis todas las preguntas que quieras muchas gracias juan cada otra ahora vamos a hacer la foto si es al salir a la derecha eso iba a comentar también que vamos a bajar y en la puerta de entrada