 Buenos dias a todos, muchas gracias a todos por venir, muchas gracias también a los organizadores de la Workamp por hacer tan bonito evento e a la comunidad de WordPress de Zaragoza por elegirme como segundo año consecutivo para dar unha ponencia. O primeiro homen presento, me llamo Joaquín Ruiz, soy ingenio informático, especializado en tecnologías web tanto CMS e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e os he puesto aí unos enlaces a mi Twitter por si me querísseguir e a mi página web, tengo ás unos blogs que os poden ser de utilidad. Mi conexión con WordPress bueno, eu tenho un cariño especial a WordPress porque foi una de las primeras plataformas con las que empecé a desarrollar páginas web automatizadas Aya por el 2005, o que ha llovido un pouco. De que mámos a hablar hoy? O título de aponencia é Tengo unha buena página web o me están estafando. Quiero hacer un inciso porque unha buena página web Dependiendo dos objetivos que tengamos para nuestra web Puede ser unha misma página web, puede ser buena o mala. Por lo tanto, he dividido a aponencia en tres grandes bloques. O primeiro seria as motivaciones o os objetivos generales que tenemos a la hora de desarrollar unha plataforma web. O segundo bloque serían os componentes de los que se forman todas as plataformas web de unha maneira genérica, haciendo un capié un pouco en Wordpress. E por último veremos herramientas con las que poder comprobar se ciertamente os componentes están satisfaciendo nuestros objetivos. Antes de empezar, un rápido disclaimer. Las opiniones de esa charla están basadas en mi propia experiencia e non estoy representando a ningún organización e ninguna comunidad. Simplemente son opiniones basadas en mi experiencia. E como todo é debatible estar encantado de debatir cualquiera de las opiniones o en la ronda de preguntas o despues con unha cerveza. Empezamos. Que motivaciones tenemos para a hora de crear nuestra página web. Que objetivos buscamos? O primeiro está claro. Aqui sí que no hay debate porque queremos estar en internet. Se non estamos en internet, no existimos. Hasta Homer Simpson creo su negocio online hace ya unos cuantos años. Hoy en día todo se busca por internet. Se buscan el móvil estamos con un grupo de amigos e debatimos. Google nos da la razón. Al final todo se busca a través del móvil. Tenemos que estar en internet. Igual que nosotros queremos estar en internet millones de personas, millones de empresas quieren estar en internet. Aquí tenemos en nuestro primer problema la competencia es global también es un beneficio porque podemos acceder a outros mercados que de outra manera no podriamos acceder pero al tener esta grandísima competencia tenemos que tener cuidado para sair rápidamente en la búsqueda esta de que hemos dicho que vamos a hacer el móvil. Por lo tanto, a primera conclusión seria se no estás en internet no existes pero se estás e no te encuentran tan pouco. Este seria o primer bloque de motivaciones. Qual sería o segundo estar localizable en todo momento? Internet nos da unha una experiencia que es que aunque nos estemos durmiendo por la noche o nosso negocio puede seguir funcionando. E isto seria o segundo gran punto. Non os podeis imaginar a seguridad que da un cliente simplemente unha página de soporte un formulario de contacto quando vendemos un producto. No sé se os ha pasado pero os pongo un ejemplo reciente montar un armario de Ikea e perder el manual e se os joder não sei como vou fazer base internet e te lo podes descargar outra vez esa seguridad é bastante importante e pode ser unha motivación importante. Después seguendo en este punto podemos crear ciertas automatizaciones podemos crear un chatbot no hace falta que nos llame cada vez que tiene unha duda al cliente podemos hacer un chatbot podemos hacer unha página de FAQ e depois simplemente outro ejemplo que seria el compartir por exemplo quando vas a un restaurante te ha unha tarjeta de contacto con el teléfono ou podes llevarte o menu etc etc antigamente te decías te coneces un restaurante bueno te daba en la tarjeta hojeen día que haces te vas a la página web e por WhatsApp le compartes el enlace que ademas igual tienes te podes descargar isto é unha ventaja pero também tiene unos riesgos que riesgos tiene estas capturas que os he puesto aquí a la derecha que serían errores de 404 errores de 500 que son errores de funcionamiento de nuestro servidor de funcionamiento de nuestro software porque poniendo que tens un formulario de contacto unha página soporte un chatbot pero si el cliente tiene esa seguridad e tu página web está caída porque está mucha gente entrando a la vez o porque hay algún error de programación tu cliente ya pierde esa seguridad de hecho estás dando un má la imagen e por último o último gran bloque de motivaciones seria mejorar nuestra imagen al exterior unha buena imagen una buena web profesional un diseño profesional nos da unha buena imagen al exterior puede ser nuestro punto de partida para un cliente ademas internet nos ofrece una interactividad que no nos ofrece ninguna outra plataforma que é la experiencia del usuario mientras está navegando por nuestra web eso revierte na afinidad e complicidad con os visitantes de nuestra web que é importante tener un diseño profesional e dar unha buena imagen seno todo a usabilidad que é por detrás que reacciona na afinidad e complicidad con os visitantes os he puesto dos ejemplos dos web corporativas que como veis son muy distintas en la primera tenemos un diseño má antigo má recto de hecho utilizan un complemento flash que se utilizaba hace 20 años por lo tanto nos dan unha imagen de que esta empresa é un pouco antigua non é moderna e na segunda vemos outra página corporativa con unha web que parece má o menos moderna con colores vivos fotos de gente joven mensajes concretos que nos dan outra imagen bistos estos tres grandes bloques lógicamente muchas má motivaciones podes ser vender directamente, crear unicomers etc pero no me da tiempo a ver-los todos então viendo estos tres grandes bloques de motivaciones o objetivos que podamos tener pasamos a ver os elementos que componen todo a plataforma web a que os pongo unha frase que resume cierta parte de lo que quero hablar que é o éxito fracaso de tu plataforma web se basa en la forma que está hecha con esto que quero decir que muchas veces nosotros empezamos a posicionarnos en internet a crear una página web, unicomers e empezamos e decimos con un website builder pequeñito después ya lo irem mejorando con un hosting pequeno después ya pasar el contenido a outro sitio etc etc bueno, yo soy de la opinión hay que empezar bien, hay que empezar con buen pie hay que empezar con un buen hosting con una buena programación con buen SEO, con un buen diseño para posicionarnos ya de dientes de un principio lógicamente, lo hay que hacer mantenimientos hay que hacer mejoras pero hay que empezar bien sempre desde o principio de una manera profesional qual serían os cuatro grandes elementos que forman toda plataforma web pues como os pongo aquí primeros serían hardware e servicios el segundo el software tercero contenido e SEO e por quarto punto usabilidad e estética hardware e servicios bueno, bien rápido os voy a explicar el hardware sería el ordenador o servidor donde está alojada nuestra página web e los servicios serían aquellas tecnologías que cogen el contenido de nuestra web e lo ponen en la red vale a la hora de elegir el hardware, el servidor el hosting tenemos que tener varias ciertas cosas básicas para elegirlo porque seno vamos a tener problemas como los errores 500 que hemos visto en el segundo objetivo el primero sería el número de usuarios concurrentes que vamos a tener en nuestra página web o número de usuarios que van a estar a la vez no que vamos a tener durante un mes que van a estar a la vez visitándonos el segundo sería la complejidad de nuestro software no sé, lo mismo alojar un WordPress que un Magento 2 por ejemplo Magento 2 necesitaremos más RAM e esto nos dará una velocidad de carga a esto es uno de los grandes puntos que nosotros por ejemplo quando ponemos en una herramienta quál es el rendimiento de nuestra web nos dice el first time byte no sé cuánto pues uno de los culpables es el hardware cuando vamos a elegir nuestro hardware, nuestro hosting tenemos ciertas selecciones el hosting gratuito no voy a al nombrar el hosting compartido sería tener nuestra página web lo cual tenemos un riesgo de que as outras páginas web puedan afectar al rendimiento de nuestra web el UPS tendría un rendimiento parecido al servidor dedicado pero no podemos llegar a configurar los servicios de la manera que podriamos hacer un servidor dedicado servidor dedicado es simplemente un servidor para ti te lo podes configurar como quieres un hosting cloud nos ofrece además flexibilidad, escalabilidad disponibilidad en cuanto aos servicios bien rápido no seria la primera vez que me encuentro que por no aplicar un parche de seguridad un servicio de repente tenemos un servidor mineando bitcoins para un ruso son no es muy agradable para nadie e luego que valenta o servidor entonces hay que tener mucho cuidado con los parches de seguridad con las actualizaciones de las versiones tanto de PHP engines etc eu pongo un ejemplo sobre todo de rendimiento WordPress 5.0 utilizando PHP 5.6 que aunque no está mantenido sigue siendo la versión de PHP que má se utiliza nos entiende e con PHP 7.3 por exemplo pues el rendimiento como veis mejora bastante decir que tanto PHP 5.6 como PHP 7.0 ya no están mantenidas por lo tanto se se encuentra un un fallo de seguridad no haber parche para vosotros así que actualizar que outros puntos os pongo HTTP2 porque no utiliza HTTP2 o que nos hace nos manda má request por segundo nos manda má request en mismo canal outro punto importante se non utilizáis los crones de WordPress desactivar-los porque chupan mucho e luego la cache todo o mundo se configura su plugin de super cache e se o pone por defecto con los ficheros etc pero vas a configurarlo con un servicio como redis como mencached e veréis como el rendimiento mejora bastante siguiente punto a la hora de elegir nuestro software es un punto bastante importante também en cuanto a rendimiento lo primero que tenemos que hacer temos varios opciones unha opción fácil para los que empiezan sería un website builder como WordPress con Wix Hopify etc que con 4 clicks en un cuarto de drywall temos ya nuestra página web montada eso al final nos va a penalizar mucho en un futuro que es lo que comentaba yo antes en un futuro queremos crecer queremos hacer personalizaciones queremos mejorar nuestra web vamos a tener muchos problemas e aparte hay un aspecto muy importante que es el locking el locking es tú cuando por ejemplo estás metiendo contenido en uno de estos sistemas tú no sabes que está guardando esa información tú en el día de mañana que igual quieres tú contenido que al final es lo más importante lo quieres exportar a un WordPress por ejemplo e no puedes porque el contenido está ofuscado las tablas no sabes dónde están etc etc es un punto bastante importante e si por el contrario nos elegimos un framework tenemos que tener cuenta el uso e la funcionalidad que vamos hacer para elegir el framework tenemos lo mismo a hacer un ecommerce esto lo sabemos todos pero también tenemos que tener en cuenta el número de referencias que vamos a tener en nuestra tienda online tenemos que tener en cuenta se vamos a querer mantenerlo como lo queremos mantener se vamos a tener capacidad para llevarlo o queremos automatizar más e luego en la elección por contenido cuantos elementos estáticos vamos a tener cuantos elementos transaccionales vamos acachear todo el contenido va ser dinámico etc etc e bueno y luego ya si nos vamos a un volumen de tráfico muy grande tenemos que tener en cuenta a hora de elegir nuestro software como bien sabéis WordPress no se puede partir por ejemplo no podriamos meter en un sistema de microservicios por ejemplo bueno para hacindo incapié en WordPress un enlace a charla que di el año pasado que habló sobre todo de estos temas de desarrollar bien el plugin e conocer e optimizar el WordPress e a que os voy a poner varios ejemplos rápidos de como podriamos optimizar nuestra página web se lo sabréis que WordPress carga todos os recursos en todas as páginas como podemos evitar esto utilizando cargas condicionales un ejemplo bien fácil seria por ejemplo un bucomers en el que tenemos noticias, tenemos un blog por lo tanto podemos poner una función bien fácil que si non es bucomers non es el carrito e non es el checkout non me metas los estilos de bucomers e esto ao final mejoramos muchísimo en rendimiento simplemente ponendo esta línea en el functions de nuestro WordPress outro punto importante non es lo mismo el rendimiento que me da un tema genérico que podamos comprar que un tema hecho a medida además un tema hecho a medida es más mantenible en un futuro podemos hacer cambios mucho más fácil de primeras nos va a gostar más pero en un futuro vamos a mejorar e por último cuidado con ciertos plugins muchas veces en WordPress hay miles e miles de plugins para elegir, no hacemos máxquistar os plugins por muy fácil le doy e os pongo sobre todo los sliders por eso tamén aquí habló tamén mucho de los plugins e el rendimiento que dan ciertos plugins contra outros e ao final lo mejor es hacerlo uno mismo seno que tenamos la capacidad de hacerlo tenemos que tener cuenta con as herramientas que voy a comentar a continuación se nos cargan de más dos recursos etc etc tercer punto seo e contenido tampoco voy a entrar mucho porque já habló mi compañero antes bastante bien simplemente lo que queremos de mostrar valor coitores de búsqueda queremos aparecer en Google e contra más arriba mejor como funciona al final es más básico de lo que parece funciona por autoridad e relevancia a autoridad seria la popularidad de la web se una web es famosa no es famosa ese punto se no lo trabajamos no lo tendremos e la relevancia es la relación del contenido de nuestra web frente a las búsquedas que lo que se llaman factores on site como funcionan Google, Bing, Yahoo etc etc pues tienen unos bots crauleando nuestra web entran por nuestra home iban buscando los enlaces que hay iban rastreando todo el contenido se lo tenemos el contenido estructurado mejor porque le busquen entraran mejor e podemos ayudar a estos bots con os site maps poniendo todos os enlances de nuestra web e se hay zonas de nuestra web que no queremos que accedan podemos poner cabeceras como las de index follow o podemos ponerlo en el robots.txt es un fichero de texto que en el que ponemos ademas podemos indicar que bot acceda a ciertas partes o no acceda a ciertas partes de nuestra web e se es un bot legítimo hará caso una vez el bot tiene el contenido de nuestra web, lo indexa lo indexa según autoridad e relevancia o que hemos puesto aquí e despues por ultimo con unos algoritmos Google, Bing, Yahoo etc etc machéan lo que nosotro estamos buscando con el contenido de nuestra web por ultimo usabilidad e estética no voy a entrar mucho porque ademas la siguiente echarla va de esta basicamente que es la usabilidad e estética la calidad de la experiencia que tiene un usuario quando interactúa con nuestra web el punto máx importante hay que saber diferenciar entre usabilidad e estética e el diseño en mi opinión debe mejorar la interacción no definirla nosotro tenemos que hacer primeiro un estudio de usabilidad hacer los wireframes e dizer como debería ir la navegación e despues meter el diseño para mejorar la interacción no para definir, no me vale un diseño moi bonito, se luego la usabilidad no es buena una vez visto los componentes e os objetivos que buscamos como lo comprobamos ok en la primera herramienta seria una herramienta de rendimiento que es GTmetrix ademas GTmetrix tiene un plugin para WordPress que podemos instalar que nos va haciendo los scanner cada cierto tiempo e ademas nos muestra una grafica un histórico de si nuestra web está mejorando o está empeorando GTmetrix utiliza los algoritmos de Google Page Speed que es el de Google que supongo que muchos lo conocereis e de Weislow Weislow es un proyecto open source que está mantenido por Yahoo que nos mide de una manera distinta e hay cosas mo interesantes lo que nos mide Google Page Speed aqui os he puesto un una comparativa entre mi pagina web www.hokiruid.com e la web del país como veis se sale la frecita para arriba es que mejora la media se sale el puntito amarillo e se sale la flecha hacia abajo es que es peor que la media como veis en Page Speed tengo un 91% en Weislow 71% se sale más en detalle en cuanto carga la pagina 4,1 segundos el total de la pagina pesa 1,71 megas e o número de request son 70 e se nos vamos a la del país Page Speed da un 49% Weislow 46% la pagina carga totalmente 9 segundos pesa 3,25 megas e hace 247 requests en este punto con lo que hemos visto diríamos la web del país es bastante mala les han estafao bueno pois si los que buscan el rendimiento claramente sí pero ahora vamos a pasar a la siguiente herramienta en este caso es Nibbler que no nos mide el rendimiento sino que nos mide funciones son Page of Page para sintetizar accesibilidad experiencia de usuario marketing e tecnologia en este caso tecnología prefiero utilizar GT Metrics porque nos mide más cosas pero Nibbler nos mide otras cosas se vamos al detalle mi página web tiene en total un 7.6 en accesibilidad 8.7 experiencia 7 marketing 5 en total tiene 9.3 accesibilidad 9.7 experiencia 9 marketing 9.5 veis que en este caso sí que se mejora mucho la web del país porque buscan esto lo que quiera el país es una buena accesibilidad muy buen marketing muy buen SEO etc etc por lo tanto en este caso no les habrían estafado porque lo que buscan es eso pos pongo también unha herramienta que yo creo que tendríamos que utilizar todos y varias veces a la semana que es el Deadline Checker que lo que hace es lo que haría un bot de Google que es entrar por nuestra página web e ir midiendo todos os enlaces de nuestra web e mirando se hay algún enlace roto se hay algún enlace que da problema la calidad de los enlaces etc etc tener enlaces roto nos penaliza mucho en temas de SEO e además nos puede ser un indicativo de que hay algún error de programación e por último os pongo aquí dos más uno seria WebsiteGrader que es similar a Nibbler e por último os pongo WebPaceTest que es unha herramienta que los que llevamos un tiempo en este mundo hemos utilizado mucho e en este caso utilizan un algoritmo que es distinto al de Google PageSpeed no es tan moderno pero al final en temas de rendimiento son las cosas básicas que todos deberíamos mirar e por último el inspector de Google Chrome es unha estrella creo yo porque podemos optimizar muchísimo más e no depender de un tercer servicio a la hora de mirar se la calidad de nuestra Web es buena o mala por tanto paso a analizarlo lo primero como aprimos el inspector de Chrome lo pongo ahí para Windows e Linux con Ctrl Shift I e o Mac e nos saldría unha ventanita como esta no se ve muy bien que son distintas pestañas en la primera pestaña que se llama Elements vemos el código HTML de nuestra Web e también podemos ver los estilos que tiene cada nodo HTML e de hecho para los diseñadores maquetadores viene muy bien que podemos cambiar os diseños e ver sin necesidad de programarlo o de maquetarlo como que nos quedaria en tiempo real en la segunda pestaña que es console podemos ver los errores JavaScript e los logs de JavaScript e además podemos incluir novas funciones de JavaScript e ejecutar funciones de JavaScript o cual nos viene muy bien también para un programador de frontend para probar ciertas cosas en diciertas páginas sin tener que incluirlas en el proyecto en el siguiente punto de pestaña se llama sources en sources vemos esto es un punto importante porque vemos no solamente todos los elementos que está cargando en nuestra página web sino desde dónde los está cargando este punto podemos comprobar no solo si estamos cargando muchos o pocos elementos sino que igual estamos cargando elementos desde una página de un tercero no solamente desde nuestro cdn o desde nuestra web desde ahí podemos ver rápidamente se nos están inyexando código por ejemplo e por último el más importante creo yo que es el network en network vemos todas las requests que está realizando nuestra web todas las peticiones todo lo que está descargando cuánto pesa cuánto tiempo le cuesta e si se está haciendo antes o después que outra petición esto es muy importante porque porque imaginaros que nosotros estamos cargando me lo invento hotjar o welltag manager cosas externas a nuestra web e se están cargando antes que elementos de nuestra web nos están bloqueando por ejemplo pues aquí lo podemos ver vamos analizar el network un poquito má aquí os he puesto un mapa veis aquí no es un mapa de político es un mapa de la cobertura 4G 3G en esta zona de España que está Barcelona, que está Zaragoza Huésca, Teruel e como veis en las grandes ciudades sí que hay muy buena cobertura 4G sí que tenemos esas zonas verdes pero hay muchas zonas que están en morado esto porque lo pongo porque muchas veces nosotros hacemos una página web que va rápida el servidor responde rápido e se nos carga así o que contento estoy con mi página web pero igual estamos metiendo una imagen que pesa 4 megas esa imagen que pesa 4 megas en nuestro ordenador o en nuestra conexión 4G se descarga enseguida pero igual en una zona en la que no hay 4G estamos en 3G se descarga un pouco más lento entonces esto también sería un objetivo que nosotros tenemos no es lo mismo en la página en la que te muestran el horario de actividades del gimnasio de la esquina que por ejemplo el horario de actividades de barranquismo de la Sierra de Guará que si no me equivoco estará por aquí en la zona morada entonces esto también lo tenemos que tener en cuenta para esto en network tenemos un opción onde le podemos decir la velocidad a la que queremos testear esa web e nos hace como que la estamos testeando en 3G, en 4G en la velocidad que nosotros queramos e podemos medir como seria como estarían nuestros clientes navegando desde donde van a navegar un siguiente punto en la parte abaixo de network tenemos esta información os la voy a en la primera parte el número de peticiones que se hacen en la segunda parte lo que pesa la página e por último quanto ha tardado en cargar completamente esta página el primer punto el número de peticiones lógicamente contra menos peticiones hagamos mejor pero yo diría que es máis importante nos son un número de peticiones pois se las peticiones al final son desde nuestro servidor e nuestro servidor lo tenamos bien configurado e nuestro servidor responde bien contra menos peticiones es mejor pero vamos a optimizarlo que es lo que tenemos que optimizar el tamaño de nuestra página al final esto todos lo sabemos, nos metemos en el móvil tenemos tantos gigas de datos contra máis pesa la página máis nos va a consumir también no solo máis nos tardará encargar sino que máis nos consumirá e logo el tiempo el tiempo muchas veces no depende sólo de nós sino de las cosas de terceros que hemos integrado vale unha vez dentro de network podemos seleccionar el tipo de ricoes que se nos está descargando que nos estamos descargando estamos descargando javascript, css imagenes código plano etc se nos vamos a imagenes e ordenamos por tamaño podemos identificar de unha maneira bien rápida que imagenes nos pesan máis para les tenamos que optimizar etc etc imaginaros que esta imagen que se descarga en 73 milisegundos en vez de pesar 307 megas pesa 307k pesa 3,2 megas pues el tiempo de descargar no seria 73 milisegundos e máis se temos unha conexión 3G o gprs vale outro punto importante la compresión isto lo vais a ver bien pero se non tenemos la compresión habilitada en nuestro servidor el navegador nos va a mostrar no solamente o que se está descargando realmente sino quanto pesaria sino estaría comprimido este caso son 452k un fichero javascript e se no estuviera comprimido pesaria 1,3 megas vale 3 veces por lo tanto es muy importante la compresión que es la compresión compresión hai dos como dos tipos para que lo entendamos bien rápido unha seria a traves del servidor utilizando gzip por ejemplo habilitando gzip e a outra seria minificando nuestro código ahí está minificado e aquí está sin minificar como veis no pesa lo mismo ese fichero que este fichero por último e no sei se va a pasar alguna vez e quando desarrollamos nuestra pagina web va muy rápida la tenemos muy bien optimizada pero despues nuestro cliente empieza a añadir que es i well tag manager que es i hot yard que es i addis que es i publicidad de google e se empieza a notar el rendimiento de la carga de la web e enton nos dice el cliente oye que la web ahora va muy lenta mira veis que ha pasado o nosotros mismos como clientes oye hace dos dias e va bien e ahora no sei que ha pasado que va más lenta nos podemos identificar se esa culpa es nuestra como bloqueando deste test de carga podemos ir sobre el elemento que nos está tardando mucho que igual es de addis de hot yard o lo que sea e lo podemos bloquear vale en el inspector bloqueamos estos dominios para que nos descarguen e volvemos a cargar nuestra pagina que nuestra pagina funciona como funcionaba el primer dia entonces el problema es como estamos metiendo nosotros estas herramientas de marketing vale e por ultimo se podre abrir el navegador si vale es un ejemplo de de leisilode leisilode es cargar las imágenes cuando van aparecer por la ventana a ver a internet no internet si non lo lo vale ok nada simplemente era un codiguito que podia sirviendo que ibas haciendo scroll e se van descargando las imágenes cuando se van a visualizar no las descargamos desde un principio e podis decir es que resulta que por el SEO tengo que tener las imágenes cargadas bueno pues cargar distintas versiones de la imagen una versión con menos calidad en un principio una imagen borrosa como un placeholder e después cargar la imagen de buena calidad mediante vas haciendo scroll e muchas gracias a todos por vuestra atención e se tenis alguna pregunta