Construye y diseña un sitio web profesional de WordPress: optimiza tu sitio web para mejorar el SEO | Parte 5.

1. Introducción : UI vs. UI vs. UX vs. CX: hola y bienvenido a la sección de optimización fuera del curso. Ahora bien, esta es una sección súper importante donde vamos a hablar de cosas como la velocidad de carga de páginas . Ahora bien, si la velocidad de carga de tu página es demasiado lenta, tus visitantes ni siquiera se van a quedar para experimentar tu sitio web. Por lo que no importa lo bien que hayas decidido. Y ahora, igual manera, si tienes una velocidad de carga realmente rápida Pero tienes un diseño terrible, los visitantes no se van a quedar de todas formas. Por lo que la parte importante es optimizar todo y encontrar ese maravilloso equilibrio para asegurarse de que todo funcione. Entonces en esta conferencia, vamos a seguir adelante y pasar por algunas acrónimos realmente importantes, qué son, cómo usarlas y cómo relacionarnos con estas expresiones y tenerlas en cuenta mientras estás diseñando tu sitio web en general , correcto, Hasta el momento hemos hecho la página principal. Ahora lo vamos a optimizar y estas optimizan estaciones, vamos a tener en cuenta durante todo el resto del curso. Por lo que siempre sabemos qué es importante y en qué enfocarnos. Entonces empecemos ahora, Una expresión que vas a escuchar ah, mucho como haces tu investigación y a medida que continúas desarrollando tu sitio web y tus habilidades de edición y diseño de sitio web es algo que te llama. También me conocía como interfaz de usuario. Entonces interfaz de usuario es básicamente lo que hemos estado haciendo. Es el diseño. Entonces si echamos un vistazo a nuestro sitio web en este momento, una parte de la interfaz de usuario es todo esto que estamos viendo, como el fondo aquí dentro, por ejemplo, como la fuente que reutilizando los colores que estaban usando el hecho de que hicimos estos menú pegajoso y le dimos una sombra. Los colores aquí, el hecho de que nos hayan pensado en tener esta oscuridad teniendo esta luz y luego haciendo esto Ah, poco oscuro. Estás haciendo esto un poco más ligero. Todo esto es parte del diseño, cómo se va a ver y cómo se experimenta con los diferentes colores. Y esa es una parte fuera de la interfaz de usuario. Por lo que podríamos resumir la interfaz de usuario como parte de la estética. ¿ Verdad? Cómo se ve el sitio web. Pero entonces también hay algo más. Hay algo que se llama usado, experimentado como acrónimo habitual que tú x derecha. Podemos ver esos en negrita. Entonces la experiencia del usuario es básicamente cómo funciona tu sitio web, verdad? Por lo que una parte de la experiencia del usuario es, por ejemplo, lo que sucede cuando llegan a la página principal. ¿ Cuál es el siguiente paso? Que van a hacer el tema que tenemos que aprender más botón que los va a llevar al inicio aquí, página el orden fuera de estas páginas, el hecho de que tengamos un menú pegajoso. Por lo que cada vez que se desplazan hacia abajo, pueden acceder instantáneamente a estas páginas. Eso es todo una parte de lo usado para experimentar, cómo funciona el sitio web y cómo pueden acceder a diferentes cosas. Básicamente, ¿cómo se siente el sitio web, y también parte de la experiencia del usuario es ¿tu sitio web llena Aggie? ¿ Se carga lentamente? Por ejemplo, si me desplaza hacia arriba, ¿las cosas se vuelven borrosas? No toma demasiado tiempo para que aparezca este color. Todos estos son parte de su experiencia. Ahora, si esto se siente torcido, por ejemplo, o Laghi eso realmente va a restar importancia a la experiencia fuera del sitio web, ¿ verdad? Si tenemos una velocidad de carga lenta que va a restar importancia a una gran parte de la experiencia del usuario fuera este sitio web por lo que podríamos resumir la experiencia del usuario como cómo funciona el sitio web, cómo se presentan las páginas, por qué están dispuestas de esa manera. La función de búsqueda, la forma en que se pusieron las secciones, por qué hemos puesto las secciones de esa manera. Por lo que nos dimos cuenta de que la interfaz de usuario y la experiencia de usuario se mezclan juntos, pero no son lo mismo. Entonces, ¿dónde están las interfaces de usuario sobre el diseño en sí? experiencia del usuario también tiene una parte del diseño, pero se trata más de cómo también opera para que funcione de forma rápida, sin esfuerzo y de manera pensada, por ejemplo, que tengamos el fondo learn mawr que los lleva a la página de inicio aquí que tenemos un menú pegajoso, etcétera. Eso es todo una parte de cómo funciona el sitio web y por lo tanto una parte de la experiencia del usuario . Y entonces también tenemos algo que es acrónimo S C X, también conocido como experiencia del cliente, y la experiencia del cliente que es mucho más sobre su negocio, cómo la gente está percibiendo su negocio, ¿no? Entonces, por ejemplo, si tienes tales cosas, como tienes en correo electrónico, abierto o tienes una generación de leads, o tal vez estás ofreciendo cosas gratis en tu sitio web. Están consiguiendo una sensación realmente buena de toda la experiencia en su sitio web desde su negocio que Issa parte de la experiencia del cliente. Ahora, podríamos resumir esto como ser los algunos fuera de la interfaz de usuario, la experiencia del usuario junto con su negocio. Correcto. Entonces si tienes un sitio web realmente bonito, tienes una gran experiencia de usuario en ese sitio web y tu negocio está ofreciendo una gran solución a su problema. Entonces vas a tener una experiencia de cliente muy alta, ¿verdad? Por lo que podríamos resumir eso como la experiencia comercial general que sus clientes están teniendo sus visitantes fuera de su negocio y que su negocio está por supuesto representado por su sitio web. Ahora vamos a seguir adelante y enfocarnos en la interfaz de usuario y la experiencia del usuario porque este es un curso de clase magistral de WordPress, ¿ verdad? La experiencia del cliente va a venir de forma natural a medida que empiece a desarrollar su negocio porque diferentes negocios van a tener diferentes herramientas, necesidades diferentes. Pero vamos a asegurarnos de que el sitio web cumpla todo con el diseño y todo con la experiencia del usuario, la forma que acabamos de tener y seguiremos haciéndolo ahora. El resultado de optimizar todo será, por ejemplo, por ejemplo, que vamos a haber mejorado S E o.Así que cuando nuestras páginas se estén cargando más rápido, eso también significa que los motores de búsqueda van a estar contentos vas a clasificar superior. También significa que los clientes se van a quedar en su sitio web. Ahora eso se llama retención. Y cuando tienes una alta retención en otras palabras, cliente sostenido durante mucho tiempo en tu sitio web, los motores de búsqueda te van a gustar aún más. Y eso significa que vas a tener un rango más alto y tener un rango más alto. Cómo vas a conseguir más y más y más visitantes, y de eso se trata todo esto. Y por último, una vez que tengas una gran interfaz de usuario, gran experiencia de usuario y finalmente la experiencia personalizada realmente alcanza los picos. Entonces vas a tener conversiones ahora, conversiones. Esa es sólo una palabra que literalmente significa cambio. Por lo que una conversión para un bloque podría ser que se tenga un visitante convertido en lector. Ahora bien, si tienes un comercio electrónico, eso podría significar que tienes un visitante convertido en comprador o podrías tener, por ejemplo, por ejemplo, un visitante se convierta en una ventaja, etcétera etcétera, Dependiendo de lo que quieras que cambien en convertir en eso va a ser el resultado, ¿ verdad? De eso hemos estado hablando. El propósito fuera de la página web de la página principal y todo. Y debido a que estamos haciendo cursos, queremos que la gente venga a nuestra página web, se acostumbre a nosotros, caliente y por nuestros cursos. Entonces cuando alguien compra uno de nuestros cursos, eso va a ser una conversión para nosotros. Y para conseguir eso, necesitamos clavar la interfaz de usuario. Ustedes yo, la experiencia de usuario ux y el cliente experimentan la c X. Así que, chicos, no cuando sepamos esto vamos a pasar a la siguiente conferencia. Y porque hemos estado haciendo tanta interfaz de usuario para diseñar En otras palabras, vamos a empezar mejorando la experiencia del usuario y viendo cómo se está desempeñando nuestro sitio web con la velocidad de carga, por ejemplo. Por lo que esto es súper importante. Nos vemos en la próxima conferencia, donde vamos a optimizar la U X y luego profundizar en do you. Te veo ahí 2. Prueba en tu sitio web: Muy bien, chicos, en esta conferencia, vamos a seguir adelante y aprender a probar de velocidad nuestro sitio web. Ahora bien, esto es muy importante porque la velocidad de carga fuera de tu sitio web determina cómo experimentan tus visitantes tu sitio web, recuerdas? Acostumbrado a experimentar. Ahora hay algunas estadísticas bastante locas que muestran que si tu sitio web tarda cinco segundos o más en cargarse, entonces sube hacia un 70% de descuento tus visitantes se irán. Y de igual manera, si tu sitio web tarda dos segundos en cargarse, entonces sube hacia el 34% de descuento tus visitantes dejarán eso, chicos, ese es un dos segundos que la gente no está dispuesta a esperar a que se cargue. Eso es una locura. Por lo que necesitamos seguir al día asegurándonos de que nuestro sitio web se cargue rápidamente. De lo contrario, si vamos a perder todo el tráfico, no van a experimentar todo este hermoso diseño. ¿ Verdad? Entonces vamos a seguir adelante y usar una herramienta llamada tiempo, y esto fuera de curso estará dentro. El recurso es que solo puedes seguir adelante y acceder a él. Están y vamos a seguir adelante y ver cuánto tiempo tarda un sitio web en cargarse y ver qué lo está retrasando. Si está tardando mucho Ahora lo que voy a hacer aquí está acostumbrado a Tab. Entonces voy a usar uno para el sitio web que he creado, correcto, Y luego otra pestaña con el mismo tiempo up donde puedes seguir adelante y comprobar a tus competidores cargando tiempo o simplemente alguien a quien has basado tu diseño porque eso te va a dar una buena pista de lo que te estás perdiendo cuando se trata de tiempos de carga cuando se trata de muchas veces de ratones. Entonces lo que voy a seguir adelante y hacer es seguir adelante y agarrar nuestra u R l así. Voy a sobrellevarlo, y luego voy a seguir adelante, quitarle esto y simplemente pegarlo. Ahí vamos, y voy a dar click en empezar a probar. Voy a dejar esa ubicación aleatoria, empezar a probar, y voy a ir al sitio web de Pat Flynn en realidad iban a usar su sitio web porque lo hemos estado sacudiendo tanto y basado en mucho para la ciencia en su sitio web, Voy a ir a agarrar su Ural. Copiarlo. Vuelve aquí, quítelo, péguelo y luego haga clic en. Empezar a probar. Voy a dejar esto al azar a Eso no es del todo justo, pero no lo es. En fin, sólo queremos un gráfico comparativo. Las posibilidades están aquí, algunos presupuesto mucho más alto y personas que trabajan para él para optimizar su sitio web al siguiente nivel. Ahora, probablemente no tengamos eso. Todavía queremos algo con lo que comparar. Muy bien, chicos. Entonces los resultados están en, y honestamente, no se ve demasiado bien. Entonces mirando esto, podemos ver que están cargando el tiempo basado en Sidney, Australia ahora, Pero de todos modos, todos modos, están cargando el tiempo es de más de cuatro segundos. Ahora, esto son milisegundos, Entonces eso significa que cada 1000 es un segundo. Por lo que el tiempo de carga para un sitio web es de 4.2 segundos. Ahora bien, ¿ recuerdas cuánto tráfico perdimos a los dos segundos? ¿ Te imaginas cuánto vamos a perder los tres? Y ahora, hasta cuatro. Estamos casi a cinco segundos. Lo que significa que probablemente estamos tocando ese 70% de descuento en el tráfico perdido. Este es un rompetrato masivo, y vamos a necesitar optimizar esto. Vemos que tenemos muchas solicitudes, siendo las solicitudes que hay ciertas cosas que hay que cargar entre el CSS y JavaScript . No necesitamos ir en detalle en esto. Sólo que hay muchas cosas pasando en nuestra página web. Probablemente no esté ayudando con el tiempo de carga y el tamaño total para nuestro sitio web es 2.7 megabytes. Chicos, eso es demasiado grande ahora. Honestamente, el objetivo es ponerte por debajo de un megabyte para tu sitio. De acuerdo, entonces 2.7 eso es demasiado grande. Y vamos a tener que arreglar eso. Si lo haces realmente profesional, podrías incluso lograr ir en los menos de 500 kilobytes. Ahora que 0.5 megabytes, podemos ver que tenemos una calificación de bajo desempeño para los cuatro de cada 100 con base en las estadísticas anteriores. Pero nuestra capacidad de uso móvil es realmente alta, y eso es gracias al tema Ocean WP y fuera de curso elemental, que ya lo está haciendo móvil responsive para nosotros. Entonces gracias por eso. Y luego vemos donde se basa esta prueba. Entonces sigamos adelante y sacudimos la página web de Pat Flynn. Ahora podemos ver que tiene una carga mucho más rápida desde un tiempo de carga mucho, mucho, mucho más rápido correcto, así que está cargando el tiempo es de 0.3 segundos, casi 0.4 segundos, pero de todos modos, está por debajo de un segundo. También vale la pena señalar que está cargando desde EU mientras estamos cargando desde Australia . Entonces hay alguna diferencia, pero aún así la diferencia es masiva. Él es mucho menos solicitado que también ayudó. Pero mira esto. Esto es vital. El tamaño total de su página web es de 630 kilobytes. Ahora que 0.6 megabytes. Por lo que necesitamos bajar drásticamente decisivo nuestro sitio web para acelerarlo. Al mirar su grado de desempeño, podemos ver que aquí tampoco supera las escalas. No tiene 100 de cada 100 chicos no quieres necesariamente encabezar la escala de rendimiento porque cuanto mayor sea tu rendimiento, generalmente más tiene que sufrir tu diseño, verdad, porque entre más alta calidad imagina tu uso, cuanto más interactivo destacado, estás usando todas estas cosas que tardan tiempo en cargarse. Entonces, lo que quieres hacer es encontrar un equilibrio entre la experiencia del usuario y la interfaz de usuario . Entonces 73 podría ser en realidad un número muy, realmente bueno porque sabemos que su sitio web es bellamente el cartel y aquí están pasando muchas características maravillosas. Entonces el hecho de que pueda tener a todos estos maravillosos descendientes la carga tan rápidamente que es increíble. Recuerda esto cuando estás haciendo la prueba, no quieres ir demasiado en la actuación y hacer que el diseño sufra. Todo se trata de la balanza. Aquí. usabilidad móvil está yendo a la clasificación realmente alta también. Entonces volvamos a nuestra propia página web aquí ahora. Lo interesante es que si nos desplazamos hacia abajo, en realidad podemos ver cuál es el problema en nuestra página web. Correcto. Entonces lo que vemos aquí es que tenemos un problema con la optimización de nuestras imágenes. No están optimizados. En otras palabras, tenemos algo llamado render bloqueando JavaScript y CSS en el contenido de arriba el pliegue, recuerda, arriba del pliegue, eso va a ser todo esto. Y todo aquí está abajo del redil. Y después hemos reducido el tiempo de respuesta del servidor y apalancamiento, navegar o cobrando ¿Qué? Vamos a seguir adelante y hacer chicos en las próximas conferencias hay que ir a través de todos estos y corregirlos y asegurarnos de que nuestro sitio web cargue mucho, mucho más rápido y optimizar todo Vale, porque esto va a hacer que nuestro usuario la experiencia sufre mucho. Va a hacer que nuestro CEO S sufra mucho. Básicamente, no vas a poder tener un negocio sustentable con este tipo de sitio web lento. De acuerdo, entonces tenemos que corregir esto. Y honestamente, es bastante emocionante de hacer. Este es un paso vital. No te pierdas esta sección en el curso. Nos vemos en la próxima conferencia, chicos. 3. Velocidad de carga de imagen: Muy bien, amigos míos, en esta conferencia, vamos a seguir adelante y hacer algunos problemas juntos como lo tenemos por un tiempo. Ahora, vamos a seguir adelante y optimizar nuestra velocidad de carga de imágenes porque no nos vemos tan impresionantes en este momento. Por la prueba, acabamos de hacerlo. Entonces, como puedes ver, si te desplazas hacia abajo, obtenemos algunas recomendaciones pasando aquí que tenemos en la sección de desempeño. Tenemos las imágenes optimizadoras, eliminando el bloqueo de render, los huesos de servicio reducidos, apalancamiento de tiempo, cobro del navegador, y luego uno en el tamaño de usabilidad móvil toca objetivos apropiadamente. Ahora vamos a pasar por ellos, pero vamos a hacerlo paso a paso. Entonces, empecemos con este. Optimizando imágenes. Entonces si hago clic aquí, en realidad me va a decir aproximadamente cuánto espacio podría decir si solo fuera un poco más inteligente. Y también cuál de las imágenes en realidad están costando problemas para que podamos ver. Por ejemplo, tenemos los estos son marketing 17 cursos en una imagen es en realidad se podría reducir un 97%. Eso es enorme. Y también tenemos el Amazonas. Podría reducirse un 97%. Tenemos la imagen de Shopify 97% Y estas son todas estas imágenes que acabamos de poner ahora mismo están tomando una enorme cantidad de espacio en innecesario Ahora. También tenemos otras imágenes como dice que son gente del cielo y persona, y estas son en realidad las imágenes de fondo que acabo de decidir no nombrar. Pero recuerdo los nombres fuera de ellos. Por lo que estas son las imágenes de fondo que podrían optimizarse igual de bien. Y luego finalmente, tenemos la edición de imagen recortada, y este es en realidad el nombre de nuestro logo. Pero como se puede ver, esto sólo va a decir que fueron 4.9 kilobytes. Entonces no me voy a molestar en optimizar este. Pero todo lo de arriba aquí vamos a seguir adelante y optimizar a todos y cada uno de ellos y luego ejecutar una nueva prueba y conseguir este tamaño abajo a la derecha, porque estos su manera de ser querer estar bajo un megabyte y definitivamente por debajo de dos segundos para el tiempo de carga. Entonces sigamos adelante y vayamos a nuestra página principal. Y si estás aquí y quieres empezar a editar con L un mentor o tenemos que hacer es dar click en editar con L. Un mentor. Entonces lo que vamos a hacer ahora es que vamos a empezar a optimizar todas estas imágenes estaban usando. Y estamos hablando de esta imagen de fondo, este fondo, todos estos tres y esta imagen de fondo, ¿ verdad? Y lo vamos a hacer poniéndolos todos en una carpeta para que sepamos dónde los tenemos . Y luego vamos a ir a este sitio web llamado compresor de imagen dot com. También conocido como a menudo mi sil, Cómo me encanta ese nombre. Entonces esto es, por supuesto, en el recurso es ahora todo lo que vamos a seguir adelante y hacer aquí es hacer click en subir archivos como este, y luego vamos a ir a todas nuestras imágenes, seleccionarlas y hacer click en zapatos. Entonces, en realidad es un proceso realmente entregado, y ahora va a empezar a comprimir las imágenes para nosotros en este segundo. Pero lo hermoso aquí es en realidad que podemos personalizar nuestra propia compresión, ¿no? Entonces, por ejemplo, tenemos Amazon en este momento que está seleccionado aquí. Y si me desplazo hacia abajo, puedo ver la forma en que se ve el original y la forma en que se ve mientras está comprimido. También puedo ver cuántos por ciento estoy ahorrando lo que los nuevos tamaños. Pero aquí está lo interesante aquí. Puedo ver la cantidad de colores que se están usando en este momento y también notar que no hay muchas culturas pasando en este momento. Entonces lo que voy a hacer en realidad es tirar esto hacia abajo para decir, Hagamos 80 collares y podemos decir que no hay diferencia alguna en las imágenes. Pero hay una diferencia en este tamaño, así que voy a continuar. Bajemos a 70 ¿verdad? Y todavía no hay igualdad notable. De verdad, Eso está cambiando aquí. Entonces voy a bajar aún más. Bajemos a decir 55. Estoy empujando los límites a la ligera aquí. Hagamos 53 todavía se ve bien. Voy a ir aún más lejos. Hagamos 40. De acuerdo, así que en realidad he comprimido este gran momento en este momento. Aunque asumo que ahí todavía no hay pérdida notable de calidad, me voy a volver realmente loco, en realidad, y voy con 20 y sigue buscando. OK, pero si asumo ahí dentro sí, como podemos ver, el blanco en realidad está empezando a sufrir un poco. Entonces me voy a mover a decir 40 y nos dan un bonito o blanco ahí. Entonces me voy a quedar con este con los cuatro a la universidad porque esto sólo va a ser un tamaño de miniatura de todos modos, así que voy a dar clic en aplicar. Por lo que acabamos de pasar del 68 al 76% de compresión. Realmente Bueno. Ahora bien, esto es solo una miniatura, por lo que puedes salirte con la tuya con el sufrimiento de calidad MAWR aquí. Pero esta es una imagen súper importante porque esta es nuestra imagen de fondo. Por lo que tenemos que ser un poco más cuidadosos aquí. Entonces tenemos la calidad ahora mismo y solo para mostrarte qué pasa si vas demasiado lejos, si bajara esto para decir, ya sabes, vamos con 35 puedes ver que hay una falta de calidad bastante decentemente perceptible yendo en aquí ahora, sobre todo si demando significa que se vuelve más prevalente y porque esto es un poco más sensible fuera de un caso, porque va a haber una gran imagen de fondo. No queremos ir demasiado lejos aquí. Al igual que puedes ver, todo está borroso de fondo aquí Probemos 60 y veamos qué pasa. Entonces seis se ve bastante bien. Voy a demandar. Significa que puedes ver que definitivamente hay un poco de pérdida de calidad si asumimos en así. Pero en realidad voy a ir y aumentarlo a 65. Creo que esto se ve realmente bonito. Entonces, ¿qué quieres hacer? También se puede ver que hay un poco fuera de la decoloración de la persona que llama más. Voy a ir a 70 aquí. Entonces lo que quieres hacer aquí es solo estar atento a la calidad. Asegúrate de que la pérdida no sean derechos demasiado grandes, sobre todo en estas imágenes importantes. Vamos a seguir adelante y aplicarlos, y vamos a hacer esto por todas las imágenes. Y luego vamos a asegurarnos de que los vamos a subir en nuestra página principal y echar un vistazo para que no haya notable sufrir de calidad. Por supuesto, no queremos sacrificar calidad de imagen real, calidad notable con el fin de obtener una mejor velocidad de carga. Va a haber este bonito equilibrio, pero queremos ponernos por debajo de uno megabytes de tamaño, así que voy a seguir optimizando estas imágenes. Vamos a bajar esto a cerca, digamos 65 entonces pronto en, podemos ver que definitivamente hay un cambio de cualidades. Voy a ir con 70 en estos, y luego voy a aplicar, y vamos a ver qué tipo de resultados estos rendimientos. Ahora se puede, por ejemplo, ver, hemos pasado de 252 kilobytes a 71 kilobytes. Hay una enorme, enorme, enorme diferencia. Entonces estamos ahorrando un tamaño aserrado. Y ahora, si alguna vez llegáramos demasiado lejos, lo que vamos a notar cuando estamos subiendo, todo lo que necesitamos hacer realmente es volver a tu subida, su original, y luego ser más amable con la compresión sí mismo. Entonces voy a bajar a 70 en este s. bueno, ahí iría. Voy a pegarle. Aplicar. Esto es una miniaturas. No tengo que ser bastante sensible Vamos a ir con y echar un vistazo, digamos, 59. Se puede ver que ahí mismo hay algún sufrimiento de calidad. Pero una vez más, esto va a ser una miniaturas. Creo que esto va a estar bien. Voy a seguir adelante y usar esto de 501 kilobyte a 116. Eso es enorme. Y finalmente voy a hacer Don't Shopify. Y esta también es una imagen muy sencilla, pesar de que hay más pasando en segundo plano. Entonces me voy a desplazar hacia abajo. Hagamos 60. Ahí vamos, y yo solo voy a pegarle aplicar aquí. Entonces ahora cuando estoy todo terminado, lo he aplicado a todos y podemos ver que no hay una pérdida de calidad real notable. Nada grande. Voy a descargar todos estos simplemente haciendo clic en descargar todos. Y luego voy a seguir adelante y extraerlos. Entonces aquí están todas las imágenes en este momento que acabo de usar. Y aquí está el compresor de imagen. Se trata de un archivo sip. Simplemente voy a hacer doble clic en él. Y aquí consigo las nuevas faltas. Es solo en esta carpeta llamada Image Compressor. Correcto, Así que esto es realmente, realmente bueno. Ahora vamos a seguir adelante y vamos a ir a la página web. Vamos a volver a subir todos estos, y luego vamos a hacer una nueva prueba y ver los resultados. De acuerdo, así que empecemos con el cuadro de fondo aquí. Voy a dar click aquí arriba. Vamos a editar esta sección, pasar al estilo, y luego tenemos la imagen aquí mismo. Voy a pasar a subir archivo. Voy a ir a seleccionar compresor de imagen. Está justo aquí. Y luego vamos a usar de nuevo esta imagen del cielo y podemos ver que el tamaño ahora es de 134. Y recuerda, todavía nos hemos destrozado que está comprimiendo los archivos para nosotros para que subamos está en la sección 131. Aplica esta compresión de vida a eso. Pero mira esta comparación. Tenemos 131 kilobytes aquí y el anterior, incluso con smushed comprimido fue de 422 es una enorme diferencia, chicos. Y eso es porque estamos usando la compresión con pérdida ¿verdad? Con smart, podemos Onley usar compresión sin pérdidas a menos que compremos ese enchufe. Y por supuesto, si quieres hacer tu vida un poco más rápida y sencilla, puedes comprar smush la prima. Pero honestamente, no es tan grande de una molestia usar esta herramienta. Creo que funciona Superb. Entonces esto se ve realmente bonito y voy a seguir adelante y dar click en insertar medios y aquí lo tenemos . Entonces déjame seguir adelante y dar click en los cambios de vista previa aquí y aquí lo tenemos. Y como puedes ver, no hay gran diferencia en la calidad. Entonces si solo para mostrarles la diferencia entre ellos, voy a seguir adelante y compararlos uno al lado del otro. Entonces si abro estos dos, esta es la imagen original, ¿ verdad? Este es el que era de 422 kilobytes, y luego éste es el que es casi cuatro veces más pequeño en tamaño que se puede vender. Si miramos la sombra aquí abajo mientras estoy saltando entre ellos, hay una ligera diferencia de color en cada vez tan leve diferencia de color. Y puedes notar estos preguntados, Bueno, cuando estás mirando bien el fondo, pero no hay gran cosa pasando en ello. Esto bien vale la pena ahorrar todo el tamaño, ahorrando todo el tiempo de carga. Entonces, básicamente, aunque estamos usando lossy, básicamente no es pérdida de calidad real. Entonces sigamos optimizando. Voy a seguir adelante. Voy a desplazarme hacia abajo hasta aquí, clic en editar esta sección, pasar al estilo, ir a bajar a imagen aquí, clic en la imagen, y voy a subir archivos, Seleccionar. Y luego voy a dar click en la imagen con las chicas sentadas aquí. Ahora, esto son 76 kilobytes. Y si le echan un vistazo a los anticipos, esto es 293. Entonces esta es una enorme, enorme, enorme diferencia. Ahora, mis matemáticas son muy malas para darte un cálculo adecuado. Cuánto mejor es, Pero hay una gran, gran diferencia pasando. ¿ Verdad? Entonces del 293 al 74 en Ghana, ¿ podría insertar medios aquí y allá lo tenemos. Tampoco hay pérdida notable de calidad pasando aquí. Ahora, voy a seguir adelante y voy a subirlos todos. Y luego vamos a revisar la página, ¿verdad? Entonces voy a hacer lo mismo. Aparecer, ir a sección, ir al estilo. Voy a dar clic en la imagen aquí, subir archivos, seleccionar imágenes, clic en zapatos. Entonces esto es de 71 kilobyte. El anterior fue 252. Enorme diferencia. Haga clic en insertar medios. Ahí vamos. Ahora voy a seguir adelante y cambiar estos. Eso es lo que solo voy a Kulick aquí y voy a dar clic en esta imagen y luego subir archivos selectos y luego voy a subir el correcto y zapatos y el medio de inserción. Voy a seguir haciendo esto en todos ellos, ¿de acuerdo? Por lo que acabo de cambiar todos estos tres también. Ahora hay una cosa más que es súper importante para que sepas de eso no hice cuando estaba usando estas imágenes antes. Y es decir, si haces click en el inmaduro, puedes ver que estoy usando el tamaño de imagen completo. No hay razón para hacer eso en absoluto, porque lo estamos comprimiendo a un tamaño tan pequeño. Entonces cuando estábamos mirando la prueba y decía que se puede ahorrar después y tener una reducción del 97% , lo que significaba con eso es que en realidad puedo, en lugar de usar una imagen completa, se necesita mucho de tamaño y espacio . Simplemente puedo seguir adelante y hacer clic en medio, por ejemplo, y no hay pérdida de calidad en absoluto porque en realidad estoy teniendo este pequeño tamaño. Pero se está recortando por sí mismo mediante el uso de esta característica por lo que automáticamente se vuelve aún más pequeño Ahora vas a notar si vas demasiado lejos. Porque si usé la miniatura aquí, por ejemplo, se puede ver que Eso sólo arruina la imagen. ¿ Verdad? Pero si usé el medio 300 veces, 300 o mediano grande o usé un grande, puede decir que la única diferencia real es el tiempo de carga, porque la calidad es prácticamente la misma. Entonces voy a ir con medio 300 veces, 300 porque eso es todo lo que necesitamos. Lo mismo aquí. Mediana 300. Lo mismo aquí. Mediano. 300 veces, 300. Y ahora lo hemos actualizado todo. Voy a seguir adelante y dar clic en actualizar aquí y ahora voy a bajar y hacer clic en los cambios de vista previa, y vamos a ver cómo se ve el sitio web y como puedes ver, ¿viste ese tiempo de carga? Esa fue una gran, gran diferencia. Chicos como nosotros acabamos de terminar aquí así y me encanta esto, y si te desplazas hacia abajo, puedes ver que no hay calidad perdida real. En realidad, esta imagen podría estar teniendo un poco de mucha calidad, pero no tan mal, en mi opinión, desplazarse hacia abajo esto no es pérdida notable de cualidades. Entonces lo único que tal vez quieras hacer sería aumentar la calidad de esta imagen , porque aquí es un poco más notable. Pero éste no tiene pérdida notable de calidad. ¿ Qué pasa así? Por lo que estoy súper contento con los resultados de esto. Pero lo que vamos a seguir adelante y hacer ahora es hacer una nueva prueba de velocidad y comparar los resultados. Entonces voy a abrir en nueva pestaña, ir al tiempo que vienen herramientas gratis, prueba de velocidad. Y ahora solo voy a montar en nuestro sitio web y luego empezar a probar. Muy bien, chicos. Por lo que los resultados están en. Y como podemos ver, hay bastante diferencia en los resultados en este momento. Por lo que los resultados anteriores, nos estábamos viendo algo como esto. Estamos viendo un tiempo de carga a 4.2 segundos. Ahora estamos viendo un tiempo de carga a 2.3 segundos. Eso es casi la mitad todavía demasiado, pero drásticamente diferente en este momento, si estamos viendo el tamaño total, realidad es 1.1 megabyte. Esa es una diferencia masiva con respecto a 2.7 ahora, en mi opinión, 1.1 megabyte sigue siendo un poco demasiado porque quiero estar por debajo de un megabytes. Entonces lo que voy a hacer es realmente poner estos a través de la compresión. Un par de ellos, por ejemplo. Voy a comprimir esto aún más mientras también comprimirlo un poco más lejos mientras que en realidad tal vez incrementando la calidad de este, y luego voy a volver a hacer una prueba y asegurarme de que estoy por debajo de un megabyte. De acuerdo, pero así es como optimizas tus imágenes. Asegúrate de que tu sitio web se cargue mucho más rápido, pero aún quedan más problemas, ¿ verdad? Entonces si miramos hacia abajo, podemos ver que tenemos el bloqueo de render eliminar que está arriba a continuación, y vamos a pasar por eso en la próxima conferencia. Entonces si ahora sigo adelante y bajo para optimizar imágenes, vamos a poder ver cuál es el tema, porque al parecer podemos ahorrar mucho espacio robando. Si estamos ahorrando tanto, vamos a bajar bastante drásticamente en el tamaño total. Entonces como podemos ver, aún podríamos tener una enorme reducción en el marketing digital, el Amazon y el logotipo de Shopify, ¿ verdad? No nos vamos a molestar por esto de porque es seguro, tan poco. Pero aquí en realidad podríamos ahorrar más de 100 sobre 100 sobre 200. Entonces lo que estoy notando aquí es que estos son P y G reales. ¿ Verdad? Entonces qué, voy a seguir adelante y hacer antes de pasar a eliminar el bloqueo de Render es que voy a seguir adelante y mostrarte en la próxima conferencia cómo puedes convertir imágenes PNG a J pig con el fin de ahorrar ah mucho tamaño y vamos a ir muy por debajo de los megabytes de uno. De acuerdo, entonces si ya sabes hacer esto y eres divertido con la imagen de mi estación, puedes pasar a la siguiente conferencia. Pero si sí tienes P y G false y necesitas redimensionar aún más para estar por debajo de esto que únete a mí y sígueme en la próxima conferencia, y vamos a ocuparnos de este problema de tamaño, Casey, en la próxima conferencia, chicos 4. Conversión de PNG a JPG: todo bien. En esta conferencia, vamos a seguir adelante y convertir nuestros archivos PNG en J pig. Ahora, si nos desplazamos hacia abajo, notamos en las imágenes optimizadas aquí que hay ah mucho fuera de tamaño para reducirse todavía. Ahora bien, no vamos a ganar en esta reducción porque no estamos usando el tamaño completo de estas miniaturas , ¿ verdad? Recuerda estos air full scale cuando se suban, pero en la forma en que los estamos usando para nuestros productos o para nuestros cursos, en realidad los hacemos 300 por 300. Pero no hace falta decir todavía hay mucho espacio que podemos ahorrar. Entonces vamos a seguir adelante y convertir nuestros archivos PNG, que son estos tres archivos en paquete J. Porque por lo general eso puede incluso hacer que el tamaño sea alrededor de la mitad. Entonces realmente necesitamos eso en este punto porque queremos ir por debajo de un megabytes. Entonces voy a seguir adelante e ir al sitio PNG to j pig dot com. Esto está en el recurso está fuera de curso, y voy a dar clic en subir archivos, y luego voy a elegir mi archivo, que es el Amazon, el digital y el Shopify. click en zapatos y luego solo voy a seguir adelante y dar click en descargar. Todo OK, así que he agregado en el archivo sip y solo voy a hacer doble clic en él así, se irían. Y ahora puedo quitar el archivo enfermo, y voy a seguir adelante y agarrar estas imágenes, ponerlo en la misma carpeta abajo aquí abajo, va a quitar esta carpeta, y en realidad voy a seguir adelante y quitar estas imágenes PNG ahora mismo porque no los necesitamos. Aquí tenemos nuestro nuevo cerdo J. Y si les miras por ejemplo, éste y éste, sólo los voy a abrir. Se puede ver que literalmente no hay pérdida de calidad. De lo que siempre Ahora lo único que estoy notando es en realidad, hay algún tipo de diferencia. Si miras súper de cerca el oro en el chip atrás, parece que algo está pasando cuando estoy cambiando. Entonces esto es un menor extremo, sobre todo considerando que vamos a usar esto es de 300 por 300 para que no los necesitemos. Vamos a seguir adelante y quitar los PNG Amazon y ahí vamos. Ya se han ido. En realidad voy a poner estos a través de la compresión una vez más porque con la clavija J notaría si los comprimimos aún más insights Vamos a seguir adelante y hacer eso ahora mismo. Entonces voy a volver al compresor de imagen u optimizar a Cilla como también se le conoce como me encanta ese nombre. Y podría puedo subir archivos aquí mismo. Y luego voy a elegir estos, que ahora están en J cerdo ahí. Y entonces el Shopify uno bien y largo puede elegir. Voy a desplazarme hacia abajo, y ahora podemos bajar bastante la calidad. Entonces sólo voy a probarlo. A lo mejor pinchando en 25. Podemos ver que claramente es una pérdida de calidad. Pero tenemos que recordar, esto va a ser 300 por 300 así que va a haber un muy, muy poco cambio en esto. Por lo que soy un 25. Se puede ver el original bajado a 52 lo cual es una enorme diferencia. Creo que el anterior se sentará alrededor de 100 así que realmente han bajado el tamaño al hacer esto en una clavija J y calidad 25. Ahora, nuevo, en realidad se puede ver que hay una calidad perdida pasando. No hay duda de eso. Pero vamos a usar esto como una miniatura, así que creo que esto va a estar bien. En realidad voy a usar este 25 rápido y aplicar. Voy a hacer lo mismo aquí. Lo vamos a bajar a 25 a ver qué pasa. Sí, aquí también hay una pérdida de calidad. Pero voy a aplicar esto porque van a ser tan pequeños. Lo mismo aquí. Haga clic en aplicar. Y si es una lástima, si no está funcionando, entonces está tirando del original una vez más y rehaciendo el proceso. No voy a dar click en descargar todo. Aquí está el archivo sip. Voy a hacer doble clic en este archivo sip aquí mismo. Y entonces tenemos la compresión de imagen, correcto. Voy a quitar este. Voy a sacar estos y ponerlos adentro. Vamos a ponerlo aquí abajo. Y no quiero mezclar estos, así que sólo les voy a dar un nuevo nombre rápidamente. Está bien, así que ahora todos tienen un nuevo nombre. Eso es realmente bonito. Voy a seguir adelante y volver a la página web. Voy a ir a nuestra casa aquí, y voy a dar click en editar con L. Un mentor. Ahora también debería hacerle saber que me tomé la libertad de usar las imágenes de fondo anteriores y en realidad las comprimió un poco más. Creo que usé en el principio 70 o 75. Ahora bajé y los comprimí a 60 y aún comparando el original con la compresa, que siempre se puede hacer. Todavía no hay pérdida de calidad en nadie fuera de las fotos. Ni siquiera en realidad este trasfondo que pensé que tenía una pérdida. No lo hizo. Entonces esa es una gran noticia. Entonces vamos a seguir adelante y voy a dar clic en este aquí dentro y luego dar clic aquí, click en subir archivos, seleccionar archivos. Va a ser un poco más fácil de encontrar ahora porque tiene un nuevo nombre, ¿ verdad? Entonces ahora este es en realidad 26 kilobyte. Eso es súper diminuto, y podemos ver eso comprimido con smarts, que sucede automáticamente. Se convierte en 25 kilobytes y podemos ver el anterior. Tenía 116 en lo cierto, porque era un PNG. Por lo que hemos ahorrado mucho de tamaño haciendo a estos chicos mucho tamaño. Entonces voy a seguir adelante y dar clic en insertar Medios. Y como puedes decir, no hay pérdida de calidad porque es tan diminuta. Voy a hacer lo mismo aquí, clic en él, subir archivo, seleccionar archivo. Voy a ir a la tienda si j cerdo comprimido. Ahora, éste es 12. Podría llegar a ser 11. No, sigue siendo 12 y la anterior fue 82. Tan enorme diferencia de tamaño pasando aquí, y voy a hacer lo mismo con este Amazon, que es la última subida Encuentra la compresa J cerdo, que es 14 podría convertirse en 13 es como una apuesta, ya sabes, sólo adivinar así. No, sigue siendo 14. El anterior fue de 75. Enorme diferencia de tamaño. Ahora 14 75. No son gran cantidad, pero este tipo de manejar en muchas imágenes que te va a ahorrar mucho espacio. Si crees que del 14 al 75 en mis matemáticas no es tan impresionante. Pero creo que ahorrar, como cuatro o cinco veces decisivo, es una enorme diferencia. en ese sentido. Entonces, como podemos ver, no hay pérdida realmente visible de calidad porque son tan pequeñas. Voy a seguir adelante y dar clic en actualizaciones. Entonces estos fueron nuestros resultados la primera vez que hicimos la prueba. Después rehicimos la prueba. Teníamos 1.1 megabyte. Ahora vamos a hacer la prueba una vez más y compararla con la última cuando hayamos optimizado el cerdo P y G T J. Voy a ir a tiempo, hacer clic de herramientas gratuitas, ir a prueba de velocidad, y voy a escribir en nuestro sitio web, luego empezar a probar. Y recuerda, seguimos mirando este tamaño en este momento y echa un vistazo a esto. Chicos, muy, muy buenas noticias. Este tamaño es absolutamente increíble. Por lo que ahora hemos bajado a 465 kilobytes mientras en antes estábamos en realidad en 1.1 megabytes . Entonces sí tuvimos una gran reducción después de todo, de girarlos de P y G a J peg, incluso con la compresión y todo pasando. Por lo que esto nos ahorró mucho espacio, y hemos optimizado toda nuestra portada ahora mismo y mira la velocidad de carga era realidad la carga en un segundo. Eso está a la mitad de la segunda regla. Ahora, aún quedan muchas cosas buenas por hacer. Por ejemplo, aún queremos eliminar el JavaScript de bloqueo de renderizado, que vamos a hacer en la próxima conferencia. Pero aunque Onley hiciéramos esto ahora mismo, teníamos una velocidad de carga de un segundo y un sitio total fuera por debajo de 0.5 megabyte. Entonces eso sería increíble. Una vez más, mirando a Pat plenamente y es más grande. Pero también hay más cosas en su página web. Pero esto esto está más allá de lo increíble. Entonces a pesar de que tiene un tamaño más grande sigue cargando más rápido y eso es porque es menos petición y se ha ocupado bien de su página web y estamos haciendo lo mismo. Por lo que vamos a continuar y optimizar aún más nuestro sitio web. Pero logramos bajar el tamaño total optimizando nuestras imágenes y mirando las tuyas en este momento, tal vez aún tengas ésta. Palabras tiene imágenes optimizadas porque todavía hay algo de trabajo. En caso de querer que se haga, por ejemplo, aún tenemos el logotipo de que podríamos comprimirlos. Curiosamente, sigue diciendo que podríamos estar ahorrando algo de espacio en estas imágenes justo en las imágenes de la gente , pesar de que es tan pequeño, dice, podríamos estar ahorrando espacio en lo digital en el Amazonas y en el Shopify, y eso puede ser cierto. Probablemente podríamos comprimirlo más y más y más allá. Pero honestamente, este es un tamaño realmente, realmente bueno. Como te dije antes, si pudieras conseguirlo 0.5 megabytes, eso va a ser increíble. Esto podría ser difícil de mantener si continúas expandiendo y agregando más cosas tu página de inicio, pero sigue siendo un tamaño realmente, realmente bueno. Se quiere estar por debajo de un megabyte. Si puedes ir a Siria 10.5 megabytes, eso es increíble, y tampoco quieres enloquecerte en esto . Recuerda, todo se trata del equilibrio entre la interfaz de usuario y el uso de la experiencia, y creo que en este momento los hemos comprimido más que suficiente, y estoy súper feliz. Entonces dos cosas para recordar una. Gira tus P y G's a J pick y para comprimirlos todos. Si has destrozado esto va a ser fácil aplastado la versión premium, es decir. Pero si no lo haces, bien podría usar las herramientas. Y el recurso es solo toma un poco más de tiempo, pero es completamente gratuito. Entonces sigamos adelante. Instalar el siguiente problema, ver en la próxima conferencia chicos. 5. Eliminar la renderización de bloqueo de JavaScript y CSS: Muy bien, chicos. Entonces en esta conferencia, vamos a seguir adelante y pasar al siguiente número que tenemos con nuestra página web con el fin de que funcione mejor y cargue más rápido. Ahora, lo siguiente para que pasemos a su bajo la pestaña de rendimiento y es éste y dice eliminar el bloqueo de renderizado JavaScript y CSS en contenido por encima de predeterminado. De acuerdo, entonces vamos a descomponer eso. Agua esto ahora JavaScript es una computadora. lenguaje es el idioma que la computadora y el navegador web entienden. Y JavaScript es básicamente lo que ejecuta los muchos fuera de los efectos en nuestro sitio web que este firma nuestro sitio web, ¿ verdad? Ve, Asesor, el entrenador que hemos estado usando para hacer diferentes cambios en un sitio web como hemos estado usando cierto código para nuestro formulario de poeta de correo. Hemos estado usando un código para un menú pegajoso, etcétera esos códigos r C s s que son códigos. Ahora. El problema con esto es que se renderizan bloqueando. Entonces, ¿qué hace que me bloquee? Significa que estos necesitan ejecutarse antes de que el sitio web pueda cargarse correctamente, ¿no? Y se toman su tiempo para ejecutar. Y debido a que lleva un tiempo aumenta la velocidad de carga. Entonces lo que queremos hacer es eliminar el renderizado que bloquea JavaScript y CSS en encima del contenido de pliegue . Y la razón por la que solo queremos eliminarlo por encima del contenido completo es porque cuando cargas un sitio web realmente no importa cuánto tiempo se tarda en que todo esto se esté cargando o cualquiera de esto porque lo único que estarás viendo en tu sitio web o en tu móvil si estás cargando el sitio web ahí en tu pantalla va a ser lo anterior el contenido completo. Entonces todo aquí lo que quieras cargar lo más rápido posible. Entonces sigamos adelante y eliminemos esos JavaScript es y esos ven evalúa. Entonces lo que vamos a hacer es pasar a nuestro panel de control porque vamos a usar enchufes para esto, y luego vamos a seguir probando para asegurarnos de que obtenemos las respuestas que queremos. Ahora vamos a pasar a enchufes y hacer clic en agregar nuevo plug in, y vamos a buscar ratones de equipo de auto. Suena como fuera para optimizar, pero solo tiene un solo Oh, así que se espera auto optimice tipo de bocado. Entonces aquí está. Cuenta con más de 900,000 instalaciones activas, y nos va a estar ayudando con el JavaScript y CSS. Entonces vamos a seguir adelante e instalarlo, y luego voy a dar clic en Activar. Y ahora vamos a pasar a la configuración. Y aquí es donde empezamos a activar las diferentes funciones. Por lo que también somos capaces de optimizar el HTML a pesar de que no tenemos ningún problema con eso optimizar estaciones, General intento de ser bueno. Por lo que puedes decidir por ti mismo si quieres activar esto o no. Ahora entonces tenemos las opciones de JavaScript y la CIA dice opciones. Entonces voy a seguir adelante y hacer clic en este en, y voy a seguir adelante y hacer clic en éste también para que se optimicen. Entonces voy a dar click en guardar cambios. Ahora, si miramos hacia atrás y miramos los resultados de nuestras pruebas aquí mismo y doy clic aquí abajo, podemos ver que hay cuatro JavaScript, su reserva y 18 CSS. Recurso es ahora porque hay tantas temporadas. recurso es el auto optimizado generalmente no es suficiente por sí solo para cuidar de todos ellos. Entonces, ¿qué? Voy a seguir adelante y hacer también. Se mueve una vez más para enchufar y dar click en Añadir nuevo. Y ahora voy a buscar ojos auto tema otra vez. Es decir, yo esa palabra, es realmente difícil de decir. Y ahora voy a usar su plugging más antiguo llamado CSS crítico. Ahora, lo que esto va a hacer es cuidar aún más CSS y aún más específicamente lo anterior el pliegue CSS. Entonces voy a seguir adelante y dar clic en Instalar ahora y después voy a dar clic en Activar Perfecto . Se instala. Ahora, para llegar a ella, todo lo que tenemos que hacer es ir al auto, optimizar aquí y volver a hacer clic en ajustes porque es la misma empresa que lo ha estado haciendo se va a sumar. Se puede ver aquí dice CSS crítico. Pero también se sumará en el principal y aquí es donde tenemos las principales características. Por lo que ahora estamos aquí y tenemos el CSS crítico agregado y se sumará en la principal. Si no ves estos cambios, todo lo que tienes que hacer es dar click en el botón de refrescar aquí arriba y se resolverá por sí mismo. Ahora, hay una cosa específicamente querer hacer aquí, y es desplazarse hacia abajo. Y vamos a ver que aquí hay algo. Esto está en línea por encima del pliegue CSS mientras carga principal fuera a mi C dice Onley después de la carga de página . Entonces queremos, específicamente lo anterior el pliegue, contenido tenga optimizado su CSS y la forma en que muchos enchufes hacen esto, a pesar de que esto es un poco de información extra, es que prefieren poner el CSS en el pie de página. Y sabemos que la foto es todo el camino hacia abajo, ¿ verdad? Entonces eso significa que se va a cargar más tarde. Pero no importa porque lo importante es que lo anterior la sección de pliegue se carga lo más rápido posible porque el segundo que baja ese segundo, tu sitio web se vuelve disponible y los visitantes pueden empezar a usar, y eso va a toma un par de segundos, y para entonces el resto del sitio web ya se habrá estado cargando y funcionando. Entonces, ¿qué? Voy a seguir adelante y hacer aquí, realidad, en realidad,con el fin de sacar el CSS desde arriba del pliegue. Se utiliza un sitio web llamado Side Low City. Y voy a poner esto Por supuesto, en el recurso es para que fácilmente puedas simplemente agarrarlo. Ahora todo lo que tenemos que hacer aquí es correcto, nuestra página web así. Y luego dar click en generar camino crítico. Ver evaluado. Y esto nos va a dar a todos un para arriba del pliegue CSS. Que es que es oro. Honestamente, Y ahora sólo nos desplazamos hacia abajo y lo vamos a tener todo aquí. Sólo tienes que dar click en el de éste Todo se va a seleccionar a sí mismo, ¿ verdad? Click, Y voy a hacer frente a esto. De acuerdo, Ahora, voy a volver a auto Optimizar aquí, y voy a pegarlo. Ahí vamos. Y ahora voy a desplazarme todo el camino hacia abajo y hacer clic en guardar cambios. Se ha guardado la configuración. Entonces, ¿qué quieres hacer ahora? Bueno, fuera de curso, queremos hacer una nueva prueba para asegurarnos de que se esté cargando correctamente y que tengamos menos solicitud y podemos ver que estos temas están desapareciendo. Simplemente voy a escribir en nuestra página web aquí y luego dar clic en empezar a probar Y como podemos ver , hay muchas mejoras realmente bonitas pasando. Mira esto. Solicitamos han bajado a 31. ¿ Ya vemos el anterior? El anterior tenía 60 solicitudes pasando, y ahora éste está teniendo 31. Ahora el tamaño total va a ver ha bajado también, pero he notado que esto está cargando tamaños ligeramente diferentes. Lo que es importante saber es que está bajo un megabyte, correcto, correcto, y está bastante por debajo de un megabytes y la velocidad de carga también ha mejorado, cual es increíble, lo cual es increíble, y está cargando desde Londres UK. increíbles, Estadísticasincreíbles, absolutamente increíbles. En este momento, nuestro rendimiento genial está subiendo de 56 a 63. Pero lo más importante, bajemos y echemos un vistazo a esto. Podemos ver que el único tema en este momento es que tenemos uno bloqueando JavaScript y ese es el coro de G. Se dot gs, y en realidad este generalmente son los temas JavaScript. Por lo que el tema quiere estar cargándose antes de que realmente ejecutemos y mostremos el sitio web, y hay formas de evitar esto. Pero honestamente, en mi experiencia, esto no es un problema. Si tienes un tema que realmente quiere usar este JavaScript y no aplazarlo. Podemos usar este. Entonces voy a dejar esto, y en realidad estoy súper feliz con estas estadísticas. Ahora, chicos, si han instalado estos enchufes y siguen teniendo javascript, que son tema aquí mismo, hay una cosa más que pueden hacer. Ahora. Si no tienes ese tema, puedes pasar a la siguiente conferencia. Pero si lo haces, quédate y te mostraré. Entonces vamos a volver aquí y vamos a movernos e instalamos otro enchufe más . Es decir, si hay un problema, hay un blogueo, ¿no? Entonces vamos a dar click en agregar nuevo, y ahora vamos a buscar un fregadero. JavaScript. Y aquí vamos. Y vamos a dar click en instalar. Ahora. En realidad no necesitamos esto. Esto es para fines de demostración, ¿verdad? Y luego voy a hacer clic en activar, y luego vamos a pasar a la configuración, y luego todo lo que necesitas hacer realmente es seguir adelante y hacer clic en habilitar frente a javascript y luego desplazarnos hacia abajo y guardar la configuración. De acuerdo, Ahora, antes de seguir adelante hay un par de cosas que quiero mostrarles. Hay dos maneras diferentes de salir usando el JavaScript de carreras. O pusiste en cola un fregadero o podrías aplazar el JavaScript y las diferencias con la carcasa que va a permitir que el JavaScript se ejecute en cuanto se hayan cargado. En otras palabras, siempre que haya algo en tu sitio web cargando, solo vas a dejar que eso aparezca en pantalla antes de que todo lo demás se haga bien? El problema con eso es que si las cosas equivocadas se cargan de aire demasiado rápido, tu tema se va a romper. Vas a ver, como, como, esta versión realmente fea fuera de tu web por alrededor de medio segundo, y luego todos los efectos bajo la ciencia y todo se van a aplicar. Y eso no es una gran cosa. Entonces para algunas personas y algunos temas y página web, los A piensan que no va a funcionar. Bueno, ahí es cuando puedes usar para diferir y el aplazamiento que significa que vas a cobrar todos de estas cargas juntos. Y cuando todos los más importantes para los grandes looks estén todos hechos, entonces ejecutarán. Ahora obtienes este look mayor en tu página web. El problema con eso es que a veces eso es un poco más lento, pero nunca quieres romper tu tema en la carga. Entonces, ¿cómo sabes cuál usar como bastante simple, en realidad, porque ya tenemos esto up Tiempo de hacer las pruebas primero para que podamos comprobarlas aquí y todo lo que realmente necesitas hacer es ir adelante y agarrar una pestaña privada y agitar fuera de su sitio web. Acude a tu página web. Si el fregadero A no está funcionando, entonces ve con el diferencial. Simplemente haz lo que funcione, correcto. Vas a ver si tu sitio web, si tu tema se está rompiendo. Si lo es, no está funcionando bien. Entonces, chicos, eso es todo. Es así como resolvemos el problema fuera del render bloqueando JavaScript y la CIA dice arriba del contenido de pliegue. Por lo que nuestro sitio web está cada vez mejor, más rápido y más rápido. Pasemos a la siguiente conferencia, ¿de acuerdo? Y si tiene alguna pregunta fuera de curso, y, como siempre, estará en la Q y A C en la próxima conferencia 6. Reducir el tiempo de respuesta de servidor: Muy bien chicos, chicos, bienvenidos de nuevo Ahora, ya hemos llegado bastante lejos. A estas alturas nos hemos tomado el tiempo de optimizar todas nuestras imágenes para ahorrar el tamaño sobrante. También hemos ido adelante y hemos eliminado nuestro renderizado bloqueando JavaScript y CSS para lo anterior el contenido de pliegue. Ahora, a continuación, como puede ver, está reduciendo el tiempo de respuesta del servidor. Ahora, estos Air Putin más alto Kim. Significa que quieren esto arriba, más a la izquierda. Ese es el que tiene mayor prioridad. El tema más grande, si se quiere. Por lo que actualmente, no estamos teniendo un muy buen tiempo de respuesta del servidor. Si hacemos click en él, podemos ver que está en 0.78. Y por supuesto, esto también va a depender de donde lo estés probando en este momento. Lo estamos probando desde Londres, y si volvemos y probamos la anterior y comprobamos esta es nuestra primera prueba , mucho ha pasado desde entonces. Podemos ver que tardó hacia 1.1 segundos. Ahora eso es mucho tiempo para esperar incluso para que tu servidor vaya, o mejor dicho, para tener una respuesta del servidor. Entonces vayamos más a fondo a lo que esto realmente significa, lo que podemos hacer al respecto. Entonces, empecemos. Entonces, ¿por qué dices tiempo de respuesta del servidor? Bueno, para saber qué es, necesitamos saber cómo. ¿ Qué? Se mide ahora es la respuesta del servidor. El tiempo se mide por algo llamado titi FB. Hora de morder primero, ¿verdad? Por lo que siempre que tu usuario venga a tu sitio web, va a medir cuánto tiempo tarda en recibir su primer mordisco. El primer dato, justo entonces ya sabes, va de por kilobytes, megabytes, gigabytes, etcétera. Entonces cuando recibieron su primera mordida, es cuando el servidor ha considerado dar una respuesta. Y para nosotros, este momento son 0.8 segundos y hemos tenido hasta el 1.1 2do antes de que el usuario incluso consiga alguna respuesta para llegar a descargar cualquier cosa. Y eso es mucho tiempo, chicos. Entonces, pasemos por qué es esto y qué podemos hacer al respecto. Entonces lo más común emitido, si vemos de la manera más fácil de resolverlo, es echando un vistazo al servidor host. El recurso es correcto, por lo que un host va a tener varios servidores diferentes desde donde pones todas las cosas de tu sitio web en. Y cuanto más espacio tengas en ese servidor, más podrás estar usando, por ejemplo, enchufes exigentes. Agregando mawr de tus artículos, etcétera, etcétera, y eso va a dictar cuánto tiempo es el tiempo de respuesta. Ahora estamos usando host azul, ¿verdad? Y si le echamos un vistazo a su página web, podemos ver que un par que va a hosting hay tres secciones diferentes pasando ahora. Estamos usando hosting compartido en este momento, y voy a explicar la diferencia entre estos tres y por qué importan. Y voy a explicar de una manera que aprendí y creo que es realmente, realmente entrega. Así que el hosting compartido es básicamente como tener en apartamento en este momento. Cuanta más gente haya en el departamento, menos espacio obtienes porque todos están compartiendo ese mismo espacio. El hosting compartido es de la misma manera. Entonces básicamente tienes un servidor y ellos solo van a poner un montón de gente en ese servidor y menos gente. Ahí están las más historias espaciales para ti y tu página web. Cuanta más gente haya menos pasteles para ti y más lento va a ser el tiempo de respuesta , y luego tenemos a los VP. Ahora, los VPs es como vivir en un dorm. Vas a tener tu propia habitación, tu propio espacio, y depende de ti cuánto decidas usar ese espacio. Pero siempre vas a tener cierta cantidad de espacio disponible. Ahora, esto es muy similar con los VPs porque tienes un servidor y vas a tener cierta cantidad de CPU, cierta cantidad de ram, y va a ser de ti cuánto el uso de la misma. Entonces va a haber un límite, pero no dependes de que alguien más lo use. Entonces no importa cuántas personas en realidad hay en la casa, porque aún tienes tu propio espacio. Y finalmente tenemos el hosting dedicado, y eso es básicamente como ser dueño de toda la casa tú mismo, ¿ verdad? Es todo por ti. No hay nadie más que obtienes todo el espacio, obtienes toda la disponibilidad para ti mismo. Pero como se puede imaginar, eso es lo que de todos modos, hay hipotecas. Hay renta, etcétera, etcétera, y de igual manera, cuando seas dueño de todo el servidor, va a haber más costos Así que hay un mayor mantenimiento por cuánto cuesta estos tres y hosting compartido fuera de curso siendo el más barato porque todos están compartiendo VP siendo más caro y hosting dedicado siendo el por mucho más caro. Ahora estos normalmente solo se necesitan los VPs y dedican er, si tienes mucho tráfico pasando y dedicado, es mayormente si tienes una cantidad extrema de tráfico pasando. Imagina estos enorme sitio web de comercio electrónico. Podrían necesitar el hosting dedicado. Y además, si vamos al hosting compartido, que tenemos en este momento, podemos ver que hay actualizaciones. Ahora, incluso con la actualización pro, obtenemos un alto rendimiento pasando, lo que significa que si tenemos por aquí, dice densidades de sirvientes más bajas. Por lo que tu sitio web tiene más recursos está disponible, y de eso se trata realmente. El recurso disponible es para ti y tu sitio web que va a dictar la velocidad del servidor. De acuerdo, entonces esto es lo que más Madison cuando se trata de tiempo de respuesta de tu servidor. Pero claro, no sólo estamos limitados a los caballos, un montón de cosas por las que podemos pasar, sino que déjame pasar y profundizar en por qué es esto y también en qué podemos hacer al respecto ahora. El motivo por el que esta es la forma en que es porque Blue Host forma parte de algo llamado el Grupo Internacional de Endurance E. I G. I G.. Y básicamente, esa es una empresa grande, grande, grande que posee mucha compañía de hosting como anfitrión Gator, etcétera, etcétera. Echa un vistazo a su, dijo Wikipedia. Se puede ver que son dueños. Creo que fue como 83 empresas de hosting diferentes en este momento, y eso es enorme. Pero también significa que hay, ah, ah, mucha gente que está siendo empaquetada en servidores bastante pequeños, que es lo que están haciendo. Pero hay que saber que hay enormes beneficios para Blue Host. Te voy a mostrar cómo optimizar aún más los servidores de host azul con lo que tenemos, y luego vas a llegar a ver cuáles son los otros beneficios de los hosts azules ahora. Me encanta Blue Host llevan un tiempo usando Blue House, incluso Pat Flynn, que hemos estado imitando hasta ahora he estado aprendiendo de Él está usando blue host y eso es porque tienen tantas ventajas más. No todo sobre los chicos de velocidad. Entonces lo otro, también podemos seguir adelante y hacer, lo que ya hemos hecho es estaciones optimizadas como arreglar nuestra captura. Significa que estamos poniendo todas nuestras cosas en una captura. Y luego ponerlo a la computadora del usuario para que no tengan que descargar, por ejemplo son cabecera son imágenes son fondos o decide etcétera. Cada vez más bien va a estar en su computadora, por lo que se incrementa la velocidad de carga. También haciendo las imágenes compresiones más pequeñas, etcétera. Simplemente haciendo que tu sitio web sea más ligero. Está bien. Pero tal vez lo más grande y lo más importante que podemos hacer para acelerar el tiempo de respuesta de nuestro servidor es acercar nuestro servidor al Yusor. Y lo vamos a hacer a través de algo llamado CD y red de entrega de contenidos. Ahora, para la red de entrega de contenidos, podría que ya sepas de esto, pero también son importantes. Y hay tres mayores de los que quiero que sepan. Ahora, si estás usando host azul como nosotros, vas a tener algo llamado sitio looks cdn ya disponible para ti en los paneles de host azul . Te voy a mostrar cómo activar eso Qué sobre SSL es Cómo funciona la celda, etcétera en la próxima conferencia. Pero hay una cosa que ibas a mostrarte cómo activar ahora quizás la más grande cuando se trata de un CD M libre es Cloudflare. Entonces en las próximas elecciones, te voy a mostrar cómo usar Cloudflare también. Si quieres usar ese servicio que probablemente vas a querer y te voy a explicar por qué en un poco y luego finalmente tenemos a Max Cdn, que podría ser la capacidad cdn más popular fuera del centro comercial. Tienen los servidores más dedicados alrededor, pero también cuestan. Pero quiero que sepas que si estás planeando gastar dinero en esto, te recomiendo Max Cdn. Entonces, en otras palabras, al tener estas diferentes redes de entrega de contenido, vamos a poner nuestro sitio web en diferentes servidores alrededor del mundo. Entonces si tienes a alguien que es de cierta parte de Asia, por ejemplo yendo a tu sitio web, entonces van a cargar tu sitio web desde ese servidor asiático el cual va a ser mucho más rápido que cargarlo desde. Por ejemplo, Utah, creo azafata azul situada en Utah en América. Y así es como vamos a acelerar nuestro sitio web mediante el uso de todos estos diferentes servidores . Por lo que no hace falta decir que cuanto más servicio dedicado sean, cuanto mayores sean las redes de entrega de contenidos, mejor suele ser. Cloudflare tiene con mucho más cuando se trata de un cdn libre, y Max Cdn tiene con mucho lo más creo justo y final de la historia. Pero también cuestan. Entonces vamos a seguir adelante y configurarlo en las próximas conferencias, y eso va a mejorar severamente el tiempo de respuesta de nuestro servidor. Ahora hay una cosa más que vamos a seguir adelante y comprobar que es tan importante y muchas veces se pasa por alto. Y ese es nuestro hogar y lado. Tú eres l Y lo que quiero decir con eso específicamente es como lo montamos. Entonces, por ejemplo, podríamos tener nuestro http Y entonces tenemos el colon hacia adelante slash forward slash robin y jesper dot com. Pero si estamos usando en SSL, que lo haremos porque es tan importante para S CEO y también para la seguridad, va a parecer que esto va a verse como https Colin forward slash robin y jesper dot com. Pero eso también significa que si alguien va al lado http regular, primero necesita ser redirigido al sitio H T. T. T. P s. ¿ Verdad? Y esta redirección nos va a costar un valioso tiempo de respuesta del servidor, y eso no queremos. Entonces cada vez que estamos montando su página web y poniéndolo en la web, necesitamos asegurarnos de que estamos poniendo la u R adecuada. Ok. Y a lo que 80 DP es un 82 P s en el que vamos a entrar más en la próxima conferencia. Pero https, puedo decir que puedo hablar un poco de porque eso va a ser sobre la seguridad fuera tu sitio web. Necesitas esa seguridad para un CEO por obvias razones de seguridad, y es sinónimo de la S en realidad significa seguridad y provienen del SSL Más sobre eso en la próxima conferencia. Pero también tenemos más cosas como Si estás usando w w w dot Robyn y jesper dot com, o va a ser www dot tu sitio web dot com, Pero en realidad has configurado tu sitio web para simplemente robin y jesper dot com. Aquí es lo mismo. Eso significa que si alguien entra a tu sitio web usando el doble uso, primero necesitan ser dirigidos a la u. R L sin los W's y que también va a costar un tiempo de respuesta del servidor. Entonces para reducir esto, lo que tenemos que hacer es asegurarnos de que estamos dando la correcta tu l. Por ejemplo, si estamos vinculando desde nuestro Facebook, si estamos vinculando nuestro contenido o diferentes sitios web, etcétera, y asegúrate de que estamos clasificando con lo correcto tu más, y vamos a pasar por cómo hacerlo en la próxima conferencia. Entonces en la próxima conferencia, te voy a mostrar cómo conseguir los https, que probablemente ya tengas. Pero si nada te va a mostrar cómo conseguirlo y también cómo activar este sitio, mira, C d m. Ok. Entonces veamos, en la próxima conferencia, chicos, 7. SSL SiteLock CDN: Está bien. Bienvenido de nuevo en esta conferencia, vamos a seguir adelante y asegurarnos de que tengas tu ssl activado y también cómo desactivarlo si quieres eso. Y además, les voy a mostrar cómo activar este sitio. Mira, cdn. Ahora bien, si no estás usando hosts azules como tu anfitrión, puedes seguir adelante y saltarte esta conferencia y pasar a la siguiente porque esto es Onley va a aplicar a los usuarios azules de Host. De acuerdo, Así que salta al siguiente, vamos a pasar por SSL y CD y más en profundidad para luego encontrar una solución alternativa. Entonces vamos a empezar E en azul Host que vienen aquí y luego vamos a dar click en un login porque vamos a ir a echar un vistazo a ver el S S. L Así que aquí estamos. Y ahora vamos a ir al mercado, y luego vamos a dar click en Adams y abajo aquí, vas a ver algo que se llama certificados SSL. Ahora, si hago clic aquí, me voy a meter a este sitio y se puede ver que dice también SSL está encendido. Eso significa que tenemos nuestro SSL activado de nuevo. Si aún estás confundido con SSL es no te preocupes por ello. Vamos a hablar más de eso en la próxima conferencia, pero sepan que es súper importante para la venta de seguridad y básicamente para clasificar y estar a salvo. Entonces sé que esto está encendido. Y eso también debería significar que si voy a Robin y jesper dot ven, voy a conseguir que esta pequeña mirada de pad siga pasando aquí Y si y eso también significa que estoy asegurado porque el candado es el celular significa que tengo en Http sus sitios web. Si hago clic aquí, se puede ver que dice h T T P s. Ahora, si no tuviera esto, o simplemente diría, http o simplemente podría verse así y no habría candado. Ahora, permítanme mostrarles un ejemplo. Ahora, aquí hay un sitio web llamado Entrenador blanco. Si entro, lo primero que vas a notar es que no hay un look de almohadilla pasando. Y si hago clic niño, no hay http s. así que no están usando un certificado SSL, lo que significa que no va a ser seguro y no va a clasificar adecuadamente como podría . Vamos a ir más a fondo en estos en la próxima conferencia y mostrarte por qué y cómo funciona . Entonces eso es para el S s L. Ahora déjame mostrarte también ayuda para activar el sitio. Mira, verlas Porque esa es una de las maravillosas características que viene con Blue Host First obtendría el SSL gratuito, lo cual es impresionante. Es realmente, realmente bueno. Y también obtenemos un cdn gratis. Entonces lo que queremos hacer es realmente estar en nuestros derechos de casa aquí. Y luego vamos a seguir adelante y vamos al tablero. Y ahora vamos a pasar a Blue Host y vamos a dar click en el rendimiento. Y luego nos vamos a trasladar a C. D. M. Ahora. Desde que he estado jugando con esto antes, dice que estamos configurando tu cdn. Esto no es cierto. En realidad lo he desactivado. Pero para ti, en realidad va a decir actuó en nuestro romance, activó, desactivó las cosas se van a quedar encendidas y apagadas. Pero esto es súper importante para que lo sepas. A menos que realmente hayas comprado en SSL, no puedes activar esto Y la razón de eso es que el SSL que tenemos aquí, el SSL gratuito es Onley va a trabajar para tu sitio web a través de Blue Host. De acuerdo, entonces porque estamos usando el servidor host azul, podemos usar en certificado SSL. Pero si estamos usando un CDN, eso significa que vamos a estar usando los servidores de otra persona. Y si estamos usando los servidores de otra persona, ya no estamos usando servidores host azul Y si ya no estamos usando servidores host azul, no obtenemos el certificado SSL gratuito. OK, entonces eso significa que si haces clic en esto, vas a perder ante SL. Ya no vas a ser https y eso no vale la pena, chicos. Pero esto es perfecto. Si realmente has estado en el juego antes y ya tienes un SSL activo, entonces puedes seguir adelante. Esto se puede activar porque el sitio se ve cdn. En realidad es muy potente y muy seguro. Pero para el resto de nosotros los mortales que aún estamos usando este, el SSL gratuito, no vamos a activar este sitio. Mira, Cdn, lo que vamos a seguir adelante y hacer en realidad es usado un otro cdn que se llama Cloudflare ahora el Cloudflare Cdn es increíble porque con ellos te acompañas tiene CD ins en todo el mundo. Son libres, libres para siempre. Se llama plan gratuito para siempre, lo que significa que son libres y se van a quedar libres. Y además, sorprendentemente, también nos van a dar un SSL gratuito. Entonces eso va a resolver nuestro problema porque, bueno, bueno, también llegamos a ver el final desde Cloudflare. Y debido a que eso es un SSL gratuito, necesitamos usar los servidores Cloudflare y porque por usar su CD y vamos a estar usando sus servidores, espero que esto tenga sentido, chicos. Pero lo que estoy tratando de decir es que la nube para va a resolver todo esto nos va a dar el SSL y también nos va a dar el C. D. M. Pero antes de seguir adelante con cómo hacer eso, yo en realidad quieren ir más a fondo en SSL y ver el final, por qué son tan grandes, su culpabilidad y luego pasemos a configurar esto. Cuesta chicos, esto es hazlo o irrumpe en entender el valor de tu sitio web y la seguridad, cómo funciona y cómo estás protegiendo a tus clientes para ver en la próxima conferencia 8. Compability SSL CDN: Bienvenidos de nuevo, chicos. En esta conferencia, vamos a hablar de SSL Qué es, para qué lo usamos, cómo funciona. También sobre Cdn y SSL ancho. capacidad de CD y comp es tan importante ahora. En primer lugar, ¿qué es SSL y qué lo hace tan importante que la gente esté dispuesta a pagarlo? Bueno, empecemos definiendo lo que significa SSL ahora. SSL significa capa de sockets seguros y básicamente ese es un nombre elegante por decir que es una protección de seguridad entre el cliente y el servidor. ¿ Verdad? Va a haber protegiendo al cliente y las transferencias del servidor. Ahora, la mejor manera de explicar esto realmente a fondo es mostrarte realmente a lo que me refiero. Entonces digamos que tenemos a nuestro cliente en el cliente. Podrían ser tus usuarios usando tu sitio web. Podría ser usted usando un sitio web. Se busca en su propia página web, etcétera, etcétera. Entonces digamos que tienes un juego largo. Las personas tienen su contraseña y se usan tu nombre y todo. Entonces lo que van a hacer es que van a iniciar sesión y por lo tanto enviar su nombre de usuario y su contraseña, y se va a enviar desde ellos desde su computadora a los servidores, ¿ verdad? Y luego el servidor lo va a buscar, y los va a encerrar. Ahora aquí está el problema. Ves que cuando el señor Hacker aparece en la foto, que lamentablemente se ha convertido en un lugar común hoy, va a poder asumir en esa cosa, va a poder demandarme en la propia transferencia entre el cliente y entre sitio web. Ve tu nombre de usuario y contraseña y de repente tú o ese cliente ha sido hackeado y eso es terrible. Ahora no quieres que esto suceda, sobre todo no cuando tienes alguna forma de comercio electrónico. O si estás manejando información sensible o simplemente por tu cuenta, inicia sesión en tu propio sitio web que puede romper todo tu sitio web. Ahora, claro, por suerte, tenemos respaldo en todo. Pero esto no es algo que quieras que suceda, sobre todo no saber que la gente podría estar compartiendo información valiosa de su información privada contigo con su inicio de sesión información de tarjeta de crédito, etcétera, etcétera. Entonces aquí está la solución. Chicos, encriptación y encriptación es exactamente lo que ofrece SSL. Entonces ahora cuando estamos usando SSL, se ve así Desde que tenemos a nuestros clientes que se está quedando van a estar iniciando sesión en tu sitio web, ¿ verdad? Va a tener su nombre de usuario y se pasa adelante, pero no cuando está enviando la información hacia el servidor. En realidad va a pasar por encriptación, ¿verdad? Este es el cifrado SSL, Así que eso significa que cuando la transferencia está sucediendo entre la subida y el servidor, ya no va a decir usado al 123 Se pasa por 123 derecho no va a decir el nombre de usuario y la contraseña real. En cambio, se va a ver algo así. Simplemente va a ser dígitos y números aleatorios imposible saber lo que realmente dice y lo que realmente significa. Entonces va a ser recibido por el servidor con esta información realmente extraña. Pero gracias al SSL, eso significa que cuando el servidor reciba esta información se va a descifrar. Y eso significa que el servidor puede obtener la información real y usarla e iniciar sesión de ese cliente forma segura. Entonces ahora debería aparecer el señor Hacker, al parecer sólo hay un hacker en el mundo en esta historia. En caso de que aparezcan los hackers, eso significa que van a asumir en esa encriptación, ¿ verdad? Y si siguen adelante y agarran la encriptación, no tienen idea de lo que significa que no pueden hacer nada valioso con ella. Y por eso SSL es tan importante. Y es tan valioso para la seguridad para ti, para todos los que lo usan, necesitas tener seguro tu sitio web SSL. De acuerdo, entonces pasemos a ver el final. Ahora, lo que pasa con el cifrado SSL es que la encriptación está pasando por el servicio Host azul porque estamos usando Blue Host y estamos recibiendo un SSL gratuito solo va a funcionar a través de los servidores host azules. Pero con Cdn, vas a estar usando un montón fuera de diferentes servidores. Y a menos que estés pagando tu certificado SSL, no podrás aplicarlo al otro servicio que estás usando. Debido a todos estos diferentes servidores, van a estar por todo el mundo, ¿ verdad? Entonces eso significa que tu sitio web en tu continente, material que la gente esté visitando en tu sitio web, se subirán en diferentes partes del mundo. Entonces, por ejemplo, si alguien es visto Noruega en Europa o alguien está en Australia o Nueva Zelanda, etcétera, etcétera. Entonces va a haber un servidor más cercano. Lo más probable es que seamos anfitriona azul y van a ser una carga de páginas más rápida. Van a conseguir el contenido mucho más rápido. Vas a tener un uso mucho mejor a través de la experiencia. Pero necesitábamos estar encriptados todavía. Y el SSL gratuito no ofrece eso con el CD él. Pero aquí está la solución. Y por eso esto es tan perfecto. Y eso es Cloudflare. Ahora, Cloudflare tiene esta oferta realmente increíble. Tienen bien por ser un cdn libre. Son con mucho los más anchos. Y yo diría que las mejores ofertas de Cdn por ahí ahora mismo. Ahora, claro, si estás usando Max Cdn o algo así, puedes obtener más sobre lo increíble con Club para es que es completamente gratis y gratis siempre está en el presupuesto, ¿ verdad? Pero no están en Lee ofreciendo un CD increíble y también están ofreciendo un certificado SSL gratuito . Entonces lo que eso significa es, y debido a que estamos recibiendo un SSL de Cloudflare, eso significa que llegamos a tener en SSL un cifrado seguro, transferencias seguras mientras también usamos C. D. M. Y no nos va a costar nada. Entonces eso es lo increíble aquí. Por lo que en esta historia a distancia obtendría una hermosa solución a todo el problema. Entonces qué, vamos a seguir adelante y hacer ahora mismo es en la próxima conferencia. Vamos a montar nuestras obras de Cloudflare Cdn. Vamos a configurar nuestro SSL Cloudflare, empezar esta fiesta y luego asegurarnos de que nuestros tiempos de carga estén mejorando en nuestro tiempo de respuesta del servidor esté mejorando. De acuerdo, así que veamos en la próxima conferencia, chicos. 9. Cloudflare CDN: Muy bien, amigos míos, no hay nada más que hacerlo. Preparemos el CD de Cloudflare, y está bien, ahora, antes de hacer esto, vamos a hacer un par de pasos de preparación. Y el 1er 1 es que si sí tienes un instalador de efectivo como nosotros hacemos WP super cash y tiene CD y apoyo, vamos a seguir adelante y de activar eso. Aquí va a haber en seedy, y luego vamos a convertir a este oficial que no tenemos que CD y apoya. Eso es amable choca juntos, y ya sabemos que éste no está funcionando muy bien. Podríamos verlo a una velocidad de carga. Y no estamos recibiendo ningún apoyo del otro mar y CD termina en los Urales. Entonces vamos a desactivar esto e instalar uno más potente. Voy a dar click en guardar cambios. Se irían. Y ahora también vamos a ir a Blue Host que venga, vamos a dar click en Logan, solo podemos seguir mis pasos ahí, y vamos a ir al mercado y luego a Adams y desplazarse hacia abajo hasta que tengamos SSL certificados. Y ahora vamos a deshabilitar nuestro SSL ahora no se siente muy bien ya que mirando la elección anterior lo es? Pero no te preocupes, Vamos a instalar una nueva y las cosas iban a estar aún más seguras en tan solo un par de minutos. Entonces vamos a seguir adelante y desactivar este. Ahí vamos. Entonces ahora estamos listos para empezar con Cloudflare, ¿ verdad? Fueron retirados. RSL También hemos eliminado cualquier forma de otro cdn soportado podría colisionar con este. Entonces vamos a pasar a Cloudflare dot com. Voy a poner esto. El recurso está fuera de curso, y todo lo que vas a necesitar hacer es seguir adelante y dar click en Regístrate aquí. Pero para mí, que ya tengo una cuenta, voy a dar click en iniciar sesión. Y una vez que te hayas inscrito, vamos a terminar en el mismo lugar de todos modos, y solo vamos a seguir adelante y añadir nuestro sitio y voy a escribir el sitio en el que estarán Robin y jesper dot Ven así, voy a dar click en add site, y entonces ahora vamos a cambiar tus registros DNS. Es decir, vamos a cambiar para que el DNS En otras palabras, la información se va a enviar a través de su servicio y no blue host on porque se envían a través de sus servidores, llegamos a conectarnos con su ver Dan, que va a ser en todo el mundo. De acuerdo, voy a dar click en el próximo año. Voy a elegir el plan gratuito. Como puedes ver, tenemos la semilla global en, que es increíble y también los certificados SSL gratuitos. Voy a hacer click care y podemos confirmar plan y llegamos a hacer esto por un sitio web gratuito que es más que lo suficientemente bueno para nosotros. Y luego vamos a confirmar Así que vamos a llegar a esta página aquí y no hay nada lo que tengamos que pensar porque todo esto está pasando Automática. Incluso dice automático aquí, lo cual es perfecto. Y lo que está pasando es que están cambiando su I, p o más bien R i p para apuntar hacia sus servidores. Por lo que ahora toda fuera de nuestra información que estará enviando en lugar de pasar por hosts azules van a pasar por Cloudflare. Y eso es lo que se está instalando aquí mismo. Entonces solo vamos a dejar esto ser ácido es y dar click en siguiente. Ahora, aquí es donde tenemos que ensuciarnos un poco las manos. Pero esto en realidad es súper simple. Necesitamos cambiar nuestros servidores de nombres. Entonces lo que vamos a hacer es cambiar o azul los servidores de nombre de host en los servidores de nombres de Cloudflare . Entonces el 1er 1 aquí, sólo vamos a dar click en copia para que se cubra, y luego vamos a ir a Blue Host. Voy a crear una nueva pestaña aquí e iniciar sesión en hosts azules y luego dar clic en Logan. Y luego me voy a mover para hacer la red aquí abajo, y se puede ver que es su Robin y Jesper, y esto duele un poco en el corazón No sabe SSL. Vamos a arreglar eso en un minuto, y voy a dar clic en Administrar, y luego vamos a ir a servidores de nombres y aquí están el servicio de nombres. Se puede ver esto el final, este uno host azul oscuro dot com. Y es la en esta, la casa azul que viene el día que nos estás pidiendo que cambiemos, así que quieren tener el final, esta en esta que ya copiamos, ¿ verdad? Entonces solo vamos a ir aquí y vamos a hacer clic en usar servidores de nombres personalizados y vamos a cambiar este por esto. Ahí vamos. Y vamos a hacer lo mismo con este. Lo vamos a hacer policía, volver atrás, cambiar el 2do 1 y pagar sentado así. Y cuando terminemos, vamos a golpear save, que está muy lejos a la derecha. Mi cara está en el camino, pero está aquí abajo en la derecha. Yo sólo voy a golpear, ahorrar así. Por lo que ahora se ha guardado con éxito. De verdad, muy agradable. Vamos a seguir adelante y retroceder y dar click en continuar. Y ahora en realidad estamos todos terminados. Todo lo que tenemos que hacer Bueno, no es sólo ya, ¿verdad? Pero en realidad necesitamos esperar después 24 horas antes de que se lleve a cabo este cambio. Ahora, en mi experiencia, esto puede tomar tan poco como la mitad en nuestro John nuestro Pero también puede tardar mucho más. Entonces sólo vamos a tener que esperar y ver los cambios. Ahora, antes de seguir adelante y hacer eso, vamos a cambiar y hacer correcto nuestro SSL. Entonces vamos a pasar a crypto. Eso es justo aquí. Todo esto ya está configurado vamos a pasar a Crypto ahora. El primero que tenemos que cambiar dentro de la cripta de opción es nuestro SSL, y por suerte, vamos a recuperar nuestro SSL. O mejor dicho ya lo hemos hecho. Por lo que es desde el principio, puesta a plena y hay cuatro diferentes pasando. El 1er 1 está apagado, lo cual probablemente no necesita una explicación. Se apaga, entonces tenemos flexible y flexible. Este es bastante problemático porque esto significa que no habrá seguridad entre su servidor y el Cloudflare. Pero habrá seguridad entre Cloudflare en sus visitantes, ¿ verdad? Por lo que todavía van a ser una brecha de seguridad entre su significado, puedes salirte con la tuya con muchas menos restricciones como la vendedora, sabia y prudente en materia de seguridad. Pero los visitantes todavía van a ver su sitio web como seguro. Entonces es una especie de SSL falso, si se quiere, y no lo recomiendo por razones obvias. No es tan seguro, al menos no de tu y es mucho más seguro de lo que está apagado. Pero no es lo suficientemente seguro, entonces el siguiente que tenemos está lleno y que en realidad está lleno en su seguro desde tu extremo hasta el destello en la nube y desde la nube para ello hasta el usuario. Y así es como querías. ¿ Quieres que todo el camino esté asegurado ahora? También tenemos completo estricto Y lo que medios estrictos es que necesitas algún tipo de certificado. Entonces, por ejemplo, porque Blue Host está usando un servicio llamado Let's Encrypt, ya tenemos un certificado en nuestros servidores. Nuestros servidores se consideran seguros en porque estamos usando Blue Host. Tenemos el vamos a encriptar, y luego tenemos el certificado y podemos usar al rigor completo. Por lo que recomiendo encarecidamente que sigamos adelante y utilicemos esta completa estricta porque es la más segura . Pero si no estás usando anfitriones azules, lo más probable es que solo puedas usar uno del otro. Tal vez incluso solo flexible, entonces flexible aún va a ser mejor. Pero aún te recomiendo que compruebes con tu host tus servidores y asegúrate de que puedes seguir adelante y conseguir el certificado SSL porque es tan valioso. Aprendimos eso de la conferencia anterior, correcto, Así que vamos a mantenerlo una racha completa porque podemos, y estamos agradecidos de que podamos. Entonces vamos a desplazarnos hacia abajo y queremos revisar algunas cosas. Y lo primero siempre se usa https. Y eso es parte de que sea estricto, ¿verdad? Entonces si alguien viene con http, siempre quieres redirigirlo a http, ya que siempre queremos usar este cifrado seguro. Recuerda, la S en realidad significa segura, y aquí tenemos reescrituras https automáticas. Básicamente, cambia todos los investigadores de contenido y enlaces. Dijo en el sitio de Http a https. Y queremos que eso esté armado. Eso es genial. Desean que todo esté encriptado y seguro, y eso es todo para eso. Entonces a continuación, nadie, todo está configurado. Tenemos nuestro SSL y también hemos configurado Cloudflare para la justicia Cdn. O esto va a tomar un mundo podría tardar hacia, bueno, un par de horas. Pero voy a cortar a eso para que no tengas que ver toda la parte aburrida. Entonces te voy a mostrar cómo puedes ver que en realidad está funcionando y funcionando. Está bien, así que han pasado como dos horas y ha estado en marcha por ese tiempo. Ahora lo que vamos a seguir adelante y hacer es ir a este sitio web llamado ¿Cuál es la red de puntos de mi deena ? Está en El recurso es y vamos a escribir en nuestra página web. Vamos a enseguida, Robin y jesper dot com. Y luego vamos a cambiar esta A y vamos a ir a terminar esto, que es servidor de nombres, y que vamos a dar click en Buscar porque esto nos va a permitir ver hasta dónde hemos llegado. Y podemos ver que en realidad tenemos algunos servidores que ha recurrido a los servidores Cloudflare como el de Ashburn. También tenemos el de Cambridge, en Brasil, en Amerigo, París, etcétera. Pero también tenemos una pareja a la que aún no le gusta en Londres, por ejemplo. Podemos ver eso porque estos son los que ponemos manualmente y este tipo de Blue Host, qué cifras? Porque dicen host azul en este momento, con el fin de comprobar o SSL y todo también. Y para obtener más información, podemos utilizar este cheque para Cloudflare dot celestic dot com. Esto también está en el recurso es que vamos a seguir adelante y escribir en nuestro sitio web, que es http s columna forward slash forward slash Siempre https. A partir de ahora, chicos Robin y jesper dot com y luego dan clic en Estafa. Y aquí podemos ver que ha comprobado ocho localizaciones globales y hemos encontrado a Cloudflare en cuatro el antes Inglaterra, Dinamarca, Rusia, no nos encontramos en China, Alemania, España y Países Bajos. Por lo que todavía va a necesitar un poco más de tiempo. Pero la gran noticia es que en realidad está funcionando. También dice que se usaron en la ropa baja cdn, lo cual es una noticia fantástica. Significa que está funcionando con claridad. Y también dice que estamos usando la capa de empleado SSL, lo que significa que eso también está funcionando, lo cual es una noticia increíble. Entonces todo está funcionando. Chicos, realmente podemos estar muy contentos con esto. Vamos a darle un par de horas más y luego vamos a pasar a la siguiente conferencia , revisar una cosa más, y luego vamos a hacer una nueva prueba ese tiempo y revisar el tiempo de respuesta del servidor. De acuerdo, gran trabajo haciéndolo tan lejos. Ver, en la próxima conferencia 10. Conexiones de URL de la página de sitio web doméstico: Está bien. Entonces antes de seguir adelante y hacemos la prueba de tiempo de espera para comprobar el tiempo de respuesta del servidor, quiero mostrarles algo que en realidad es realmente importante a la larga. Y eso es sobre el sitio y casa tu l Derecho. Entonces si vas a tu página principal para nosotros, eso es Robin y jesper dot com aquí, y haces click. Te vas a dar cuenta de que tenemos https fuera de curso, siempre asiático a PS. Y luego tenemos a Robin y jesper dot com. Ahora, note que no dice w w w w dot Robyn y jesper dot com. ¿ Debo entrar ahí? Simplemente voy a ser recta arrojado de nuevo a este robin y jesper dot com sin el doble usado y podrías elegir usar que podrías elegir no usar el paso. Pero al menos te voy a dar las opciones fuera de las que elegir. Y luego vamos a hablar de las ventajas y desventajas. Entonces lo que vamos a hacer es ir a la página web de Jennifer atrás. Vamos a ir al tablero de instrumentos aquí, y luego vamos a bajar dos sentadas, y vamos a dar click en General y luego podemos ver que tenemos tablero. Presione dirección su l y dirección del sitio, Ural. Y si te gustaría tener tu sitio web como www dot tu nombre de dominio dot com, este sería el lugar para cambiar configuración y general. Y aquí lo tenemos. OK, ahora, no hay ningún beneficio particular de usar los W's o usar sin. Hay muchos sitios importantes que usan sin, y muchos de tamaño grande sí usaron con. De acuerdo, entonces realmente no importa cuál utilices. Eso va a estar para que tú lo decidas. Pero quiero que pienses en dos cosas que es importante, una que cuando estés escribiendo lo que sea citado elijas, asegúrate siempre de usar esa. Entonces, por ejemplo, si estás usando el que se usaron sin los W's, entonces cuando estás escribiendo a la gente y vinculándolo cuando lo estás poniendo en tus redes sociales , cuando estás haciendo tu marketing digital, por ejemplo, quieres asegurarte de que no estás usando eso duplicado usando aquí porque eso va a hacer otro redireccionamiento. Eso sólo va a hacer que la velocidad de carga de páginas sea más lenta, y no queremos eso, está bien, y eso podría sonar como un menor. Pero a la larga, eso se va a convertir en una importante. Por lo que queremos asegurarnos de que siempre estamos usando lo mismo. Y lo segundo siempre usaría lo mismo es que si usas este por un tiempo y luego decides ir con W w w así, entonces el problema podría ser que Google ve eso. De acuerdo, aquí viene otro lado no reconoce tu sitio original. Y el problema con eso es que si dejó de ser sitios idénticos, probablemente te van a prohibir los motores de búsqueda de Google. Y eso significa muy poco o nada de tráfico. Entonces no queremos que eso suceda. Pero en la primera carrera, como estamos ahora mismo, está completamente bien ir adelante y entrar y cambiarlo. este momento, no hay ningún beneficio en usar uno sobre otro. Tan solo asegúrate de que escoges uno y te quedas con él. En realidad prefiero este. Pero el beneficio de usar los W's puede, por supuesto, ser que mucha gente cuando habla y hacen referencia a alguien que solían usar doble , pero es cualquier tasa ya que comienzas a ranking en el buscador de Google Cosco mejora. Este va a ser tu original. Citado Mejorado de todos modos, Así que van a aterrizar aquí enseguida. Las fiestas más importantes para tus redes sociales para un marketing digital. Si estás haciendo algún anuncio o algo por el estilo, quieres asegurarte de que siempre estás usando la dirección correcta. Y si quieres cambiar es este es probablemente el momento ahora temprano a los cambios y asegúrate de cambiar ambos fuera de ellos. Si solo cambias uno de estos, tu sitio web podría romperse. Y eso no es divertido, realmente no lo es. Entonces, solo cámbiate uno de estos. Entonces vamos a seguir adelante y pasar a la siguiente conferencia y hacer la prueba de velocidad para luego pasar al siguiente número y vendió uno también. Y luego te voy a mostrar lo que puedes hacer si tu sitio se rompe. Sé que tenemos nuestros respaldos y todo, pero hay más cosas que en realidad se puede hacer si se rompería para ver en la próxima conferencia. Chicos 11. Leverage de la caché de navegador: Muy bien, chicos, chicos, bienvenidos de nuevo. Ahora, si me has estado siguiendo desde la conferencia anterior, también habrás configurado tu nube para ver el final a estas alturas. Si no, adelante y haz eso. Si eso es lo que buscas hacer para optimizar en este apartado. Ahora, antes de que sigamos adelante y hagamos una prueba de velocidad en una prueba de página de carga, quiero hablar del siguiente tema que estamos enfrentando. Qué es, qué podemos hacer al respecto. Y luego vamos a seguir adelante y probar nuestro nuevo Cloudflare Cdn para el tiempo de respuesta del servidor y también comprobar cómo afectar el cobro del navegador de apalancamiento. De acuerdo, Entonces, ¿qué es el cobro del navegador Apalancamiento? Bueno, básicamente, es el efectivo que sabemos lo que ya es un efectivo, cierto. Se trata de aprovechar una caché de navegador, lo que significa que atrapamos muchas de las cosas como verte, dice javascript. Ah, lote de para imágenes o fondos, etcétera a la navegación o al usuario a sus computadoras. Todo se cargará mucho más rápido ahora, el tema que tenemos derecho, y es un pequeño problema porque se puede ver que en realidad está en la parte más baja de la lista de prioridades aquí mismo es que si se desplaza hacia abajo, hay sin fechas de caducidad ni tiempo de caducidad. Más bien, especificó. Y esto por lo general no es realmente un problema tan grande, porque vamos a seguir adelante y armar un partido de todos modos, así que eso va a encargarse de este problema. Pero lo que significa es que no tiene fecha ni hora para cuándo va a expirar. Entonces si estás actualizando tu lado, no se quita automáticamente del efectivo. Y para algunos, mucha gente usa diferentes tiempos para el efectivo, dependiendo de qué tipo de sitio web, dependiendo de cómo quieran apalancar etcétera. Pero lo que es importante saber es que todavía vas a conseguir el lado actualizado si te cuidas el dinero en efectivo en tu página web. Ahora bien, si le echamos un vistazo a Pat Flynn aquí en su página web ingresos inteligentes, pasivos. Esta es la primera prueba que hicimos antes en el apartado. Vas a ver que él también debería tener este apalancamiento navegador atrapando como error. Si haces clic en él, en realidad tiene lo mismo. ¿ Nos la caducidad no se especifica en un montón de las cosas aquí, pero de todos modos, su sitio web este funcionando muy bien y se está cargando super rápidamente y es un tamaño pequeño ahora, el más importante de todo esto fuera de curso, el tiempo de carga en sí. Y no estamos aquí para colgarnos de todos los números, consiguiendo todo perfecto. Queremos tener un gran tiempo de carga para la experiencia del usuario y para el S e o.Derecho. Pero lo que quiero que hagas es en realidad ir a tu enchufe de efectivo. Y si has estado siguiendo, deberías estar teniendo el super efectivo del WP. Y si no lo haces, eso también está bien . Hay mucho dinero en efectivo it plug ins por ahí y yo quería bajar a este en la sección avanzada. Por lo que vas a establecer cosas WP Super Cash avance y luego vas a este esta esta al 304 no modificado. Navegar o cobrar indican cuándo una página no ha sido modificada desde la última vez que fue solicitada. Entonces lo que esto va a hacer es que siempre es cuando están entrando a nuestro sitio web, van a revisar su captura hacia el efectivo actual en la página web para ver si están coincidentes solo para sacudir. Está bien. ¿ Hay algo que se actualice que necesite estar actualizando O si es lo mismo, si es lo mismo que no hay que hacer nada. Si hay algo ahí arriba nos va a actualizar. Es sólo algo que realmente vale la pena tener activado. Entonces vamos a hacer clic en él. Vamos a bajar y hacer clic en las actualizaciones. Estatus. Y ahora, con esta diminuta diferencia que hemos hecho con esta minúscula actualización, vamos a seguir adelante y vamos a hacer una nueva prueba de velocidad a nuestra página web. Ahora , por supuesto, Hay muchas más cosas que podríamos estar haciendo aquí. En realidad podrías entrar en tus archivos de exceso HD y sentarte ciertos tiempos de caducidad para cada uno estos archivos, y te voy a mostrar cómo hacerlo también. Ahora, también podrías seguir adelante e ir a tu archivo de acceso HD y escribir en un determinado código para establecer una fecha de caducidad. Pero ese expediente es muy sensible. Si algo sale mal, va a romper tu sitio web. lo he estado usando antes, pero realmente no he visto ninguna diferencia en el rendimiento en mis sitios web sea así que realmente no me moleste en hacer eso más, Así que no vamos a estar tocando eso. Es solo trabajo innecesario y también un trabajo ligeramente arriesgado. Vamos a seguir adelante y vamos a hacer otra prueba de velocidad, así que voy a dar clic en empezar a probar. Muy bien, Así que los números están dentro, y como podemos ver, hay una mejora realmente agradable pasando. Se mejora el tiempo de carga. Se bajan las solicitudes. Este tamaño ahora solo es un descargo de responsabilidad. Ninguno de estos es una ciencia exacta. Si realizas múltiples pruebas, podrías haberte dado cuenta de que va un poco Haywire, también, dependiendo de de dónde venga la prueba. Pero te da una muy buena estimación que, como podemos ver en las pruebas anteriores, se están cargando. El tiempo estaba flotando en 80.8 2do y cerca de 0.9, y ahora está flotando en 0.6. Esto es increíble. Se bajan las solicitudes. Podemos ver del 31 al 18. El tamaño es probable que aumente. Pero de nuevo, estos esto podría no. Esto no es pitch perfecto. Esto no es pitch perfecto. Nada de esto lo es. Pero un puntaje total ha subido a 71 de 63 en adelante. Esto es simplemente realmente, realmente chicos geniales. Ahora, si nos desplazamos hacia abajo, vas a notar que el navegador de apalancamiento que lo captura sigue siendo un problema pasando aquí. Pero va a ser hasta que nos fijemos en el tiempo de caducidad. Y en mi opinión, mirando estos puntajes fantásticos, no creo que tengamos que hacerlo. Y no creo que debas preocuparte demasiado por perfeccionar estos tampoco. Ahora, éste está fuera de curso. Súper interesante. Mira esto. Ahora seguimos recibiendo un aviso de tiempo de respuesta reducido del servidor. Pero antes de que ese estuviera en realidad en el top off, el kit superior era el mayor problema actual. Ahora está en la parte inferior, incluso más bajo que aprovechar el cobro del navegador. Entonces si hago click en este, podemos ver que el servidor ha respondido en 0.3 segundos y esto es fantástico. ¿ Dónde está antes? Estaba respondiendo en 0.78 segundos. ¿ Verdad? Y si miramos todo el camino desde el principio, cuando nuestra velocidad se prestaba a 4.2 segundos, casi 4.3, recuerda, esto era de Sydney, Australia. También tuvimos un tiempo de respuesta del servidor de 1.1 2do Así que casi sobre su segundo. Teníamos que esperar antes de que el servidor respondiera y algo pasara. Y ese fue el momento de morder primero. Recuerda eso. Entonces ahora mismo, chicos, en realidad tenemos un sitio web fantástico pasando. Y si nos comparamos con Pat Flynn, vas a notar que su velocidad de carga está fuera de curso más rápido. Y lo más probable es que esté usando experto para utilizar correctamente su sitio web, minimizando los tamaños de imagen aún más fuera de curso tal vez esté usando servidores dedicados o hosting VPN mientras estábamos usando el hosting compartido en el plan más básico. Y para ser honestos, lo estamos haciendo realmente genial incluso para eso tiene un punto cero casi 0.4 y estamos en 0.6 y el punto es estar menos de dos segundos. Entonces lo estamos haciendo realmente fantástico. Tamaño total ahora nuestras actuaciones al 71 él está de nuevo en 73, estas son sólo estimaciones abstractas de este lado para arriba el tiempo que vienen y nada aquí es perfecto. No hay necesidad de volverse todos locos para perfeccionar esto. También tiene estas cosas pasando. Pero uno de sus problemas es no servir un tiempo de respuesta. Ya ves que dice verde, y te vas a poner verde si sirves. El tiempo de respuesta es mejor que 0.2 y vamos a tener que actualizar o ir de Blue Host a, por ejemplo, site ground, que realmente rápido host o mejorar nuestro hosting en blue host a tal vez un plan VPN o pro, o simplemente estar muy contentos de que estamos pagando muy poco dinero por un servicio fantástico. Y nuestro sitio web está funcionando perfectamente bien, chicos, pero como siempre, la prueba real está en el maceta. ¿ Verdad? Entonces si seguimos adelante y íbamos a cargar a Robin y jesper dot com así, vamos a notar que se carga muy rápidamente fuera de curso. Pero si sabes lo que es ese ingreso inteligente, pasivo lo pasado aviones sitio web baja más rápido. Pero estos dos, si bien hay una diferencia, la diferencia no es enorme. Ambos sitios web se están cargando realmente, muy rápidamente y esto es fantástico. Si estás en los dos segundos, puedes tener una fantástica página web. Fantástico s ustedes visitantes felices. Tienes una gran interfaz de usuario i y genial, tú X Ahora en la próxima conferencia chicos. ¿ Qué? Vamos a seguir adelante y hacer en realidad es mirar todas estas otras estimaciones pasando aquí ahora mismo para mí ahora mismo. Y lo más probable es que usted pueda que sean verdes, pero puede que no lo sean. Entonces hablemos de lo que son todas estas otras cosas. Y si tuvieran esta señal de advertencia ¿qué hacer ahora con ellos? Una última cosa. Yo quiero hablarles de eso. Como siempre, este tipo de pruebas no son perfectas. Y diferentes pruebas dan resultados diferentes. Tenemos la tenemos una prueba de Google y también tenemos la prueba de Ping dum, y esas te van a dar diferentes sugerencias. Diferentes resultados. Pero como siempre, los chicos no se vuelven locos en esto. El punto principal es tener una buena puntuación, una hermosa interfaz de usuario, hermosa experiencia de usuario, y luego todos están bien para ir. No necesitamos tener puntajes perfectos en todo. Mira a Pat Flynn. Tiene un sitio web increíble, un negocio increíble pasando, y está haciendo 73 de 100 no 100 de 100. Entonces hablemos de estas otras cosas, y luego vamos a seguir adelante. ¿ De acuerdo? Ver, en la próxima conferencia, chicos, 12. Optimización adicional: Muy bien, chicos, chicos, bienvenidos de nuevo. Ahora vamos a hacer un poco más de problemas para cuando tu velocidad probando tu sitio web. Entonces ya hemos pasado por un par de temas en la pestaña de rendimiento, ¿ verdad? Hemos hecho el primero eliminando el render bloqueando JavaScript y CSS en lo anterior el contenido de pliegue. Ahora eso es un bocado que hemos optimizado o las imágenes han pasado por aprovechar el cobro del navegador , que sabemos es más a menudo el tiempo de caducidad que el tiempo real de cobro. Y también hemos analizado cómo reducir el tiempo de respuesta del servidor. Y hemos reducido el tiempo de respuesta y hemos pasado por algunas opciones para reducirlo aún más . ¿ Deberíamos querer hacer eso? Ahora echemos un vistazo a las otras parejas aquí. Ahora hay más. Eso es verde para nosotros. Y la razón por la que son verdes es porque muchos de estos hemos conseguido cuatro gratis. Ya que hemos ido construyendo nuestra página web. Ahora, el 1er 1 se llama yo unificando html, y vas a notar que tenemos magnificas hombres de Gmail. Si yo y la CIA dice aquí abajo magnificando javascript. Entonces, ¿qué se quiere decir si ng bien, básicamente hombres, si ng es cuando estás acortando el código, ¿ verdad? Porque HTML, CSS y JavaScript son todos tipos diferentes de códigos fuera de lo que los hombres, si mirar el código hace es que ahorra espacio al hacerlo ilegible para los humanos pero aún así completamente legible para las computadoras. Por lo que todos los espacios que el hacer los códigos para que los humanos como nosotros entiendan y sean capaces de programar quitaron eso Así quitan tamaño y quitan todo del blanco. El espacio innecesario lo comprimen. Básicamente, es una compresión, pero las computadoras aún pudieron usarla. Pero supongo que es sólo parece un gran lío. Entonces déjame mostrarte lo que quiero decir. Entonces aquí tenemos un código muy simple para los cambios en la posición de color on off the input se siente cuando estás haciendo una forma para puerto masculino, por ejemplo. Entonces así es como se ve un abrigo normal cuando te refieres a que si lo hago, vamos a quitar todo de este espacio Todo este espacio desperdiciado por aquí. Entonces lo que estaríamos haciendo entonces, mientras que la lupa está pasando y entrando así entrando así y entrando así y esto así si estás haciendo cualquier forma de codificación o programación y obtienes un montón de código y sería buscando así y digamos que hay mucho código y eventualmente se va a quedar así, pero con un montón de entradas diferentes, eso va a ser un gran lío, cierto, porque no hay espacios. Pero con el polvo de aumento es que sí ahorra el espacio al usarlo todo en una línea, dice Quicker para ejecutar. Y el archivo en sí es más pequeño y funciona mucho mejor, o al menos mucho más rápido para las computadoras. Pero un humano no va a poder codificar. Pero no necesitas co esto porque solo necesitas ejecutarlo. Entonces eso es lo que es la lupa. Y los hombres, si yo ng nos sacamos de nuestro tapón de efectivo, es correcto y los enchufes de efectivo que básicamente podrías estar usando cualquiera. Pero estamos usando down en el entorno dicen que estamos usando el WP super cash plug en el que Dustin unificando para nosotros. Pero el super cash WP no sólo magnifica, sino que también lo cobra en un archivo estático, por lo que pone todos esos archivos todos ellos unificados cae en el efectivo y luego servicios. Por lo que está un paso más lejos de unificar. Por lo que hace que todos los archivos estén muy cansados y muy comprimidos, lo pone en un efectivo y luego lo pone en las computadoras del usuario. Se carga más rápido. OK, ahora, si no tienes una captura, todo lo que necesitas hacer es ir a enchufes, agregar nuevos y buscar efectivo, y hay un montón de realmente maravillosos enchufes de efectivo Ahora, honestamente, He acostumbrado a W tres el efectivo más rápido, super cash, o para optimizar, y todos funcionan. Seguro que éste también funciona. Todos funcionan de verdad. Pero el que encuentro más efectivo y más fácil que prefiero es el super cash WP, razón por la que lo estamos usando. Nos dan mucho gratis, como ellos unificando aquí Ahora. El siguiente es habilitar la compresión y la descompresión es básicamente cuando tienes un archivo y lo haces más pequeño. Entonces los hombres, si ng es una forma de compresión para el HTML para la CIA, dice para el JavaScript. Pero lo más importante, ¿cuáles son los más pesados en nuestra página web son las imágenes, verdad? Por lo que hemos estado pasando nuestro tiempo optimizando nuestras imágenes a lo grande yendo por P y G a J peg y también comprimiéndolas en un archivo de menor resolución. Por lo que ahorramos mucho, mucho espacio fuera y aumentamos o tiempo de carga, y eso es compresión. Y lo tenemos habilitado también a través de enchufes como Sush, por ejemplo. Por lo que cada vez que subimos cualquier forma de imagen a nuestras bibliotecas de medios, mucho lo comprime automáticamente. Entonces también tenemos la página de aterrizaje de evitar. Redirigir. Entonces si tienes un problema con la compresión, lo que puedes hacer es seguir adelante y descargar un plug in como smushed. Se va a comprimir. Y también asegúrate de que sí comprimes tus imágenes y en realidad usas un tapón de efectivo en los hombres. Si yo tus archivos, por ejemplo, y cobro todos tus archivos para mejorar la velocidad de carga y utilizo la mayor cantidad de compresión posible en todo el rápido, se puede comprimir Now. Siguiente arriba es evitar la página de aterrizaje Redirigir. Ahora un redireccionamiento es cuando te envían de una página a otra Así que, por ejemplo, digamos que estabas entrando en http Roman y jesper dot com. Pero entonces esta página realmente te redirige a la versión h t T. P s fuera de la página. ¿ Verdad? Entonces eso sería un redireccionamiento. Pero ahora esta página también te redirige a la parte W W fuera de la página y luego estos espacios a dirigir realmente. Y entonces este re directores al delantero slash casa. Por lo que ahora estaríamos teniendo tres redirecciones innecesarias que está pasando en nuestra página web, pero nos vendría bien que nos enviaran de la primera a la última sin todas estas redirecciones medias . ¿ Verdad? Por lo que esto a veces puede suceder cuando obtenemos un problema con nuestro SSL. Recuerda el SSL. Entonces pasamos de http a https, Pero entonces tal vez haya algo mal con https te va a mandar de vuelta a http etcétera o cualquier problema de forma off loop que esté pasando. O tal vez la página acaba de ser configurada de tal manera que hay muchas direcciones gratuitas. Pero si estás teniendo este problema o hay algo roto o has estado cambiando la URL , todo lo que necesitas hacer es ir adelante y ir a los enchufes e ir a los enchufes, Añadir nuevo y buscar algo llamado Redirect. Ahora, aquí dentro, va a haber este tapón llamado redirección. Simplemente puedes instalarlo y empezar a usarlo de inmediato. Es súper sencillo de usar te va a pedir la entrada. Entonces cuando una persona escriba esto su l serán enviados a este euro. Por lo que justo justo en tu l que quieres que la gente use y luego donde quieres que se envíen súper fácil. Se redirigirán a donde las quieras para que no necesites ningún redireccionamiento de media mano , si así lo deseas. Tan súper fácil de usar. Y entonces también hemos priorizado el contenido visible sobre lo que esto significa es que estamos priorizando la carga y renderizando lo anterior el contenido de pliegue. De acuerdo, entonces cuando se descarguen nuestras páginas, lo que se va a descargar primero y ante todo va a ser el desde arriba la sección de pliegue en nuestra página, esta sección se ve lo rápido que cargó ahora todo abajo, lo más probable es cargado después de que todo esto ya se haya cargado. Y eso es porque cuando la gente acude a nuestro sitio web para que esta página se cargue de inmediato , ¿ verdad? Entonces eso es priorizar en estos contenidos para estar descargando primero ahora todo lo que está por debajo donde lo más probable habrá cargado más lentamente. Pero eso no importa, porque cuando la gente visita nuestro sitio, queremos asegurarnos de que estén viendo todo esto de inmediato. Y entonces todo lo que está abajo puede tomar su tiempo para estar cargando. Y eso es lo que significan con priorizar el contenido visible. Entonces, si estás teniendo un problema con esto, más probable es que el problema sea con tu plug en efectivo o mejor dicho, falta de cash plug porque el cash plug in va a asegurarse de que priorices automáticamente cargando fuera del los archivos más importantes en el secuestro, la sección de pliegue y todo lo que no es importante se cargarán más abajo porque lleva más tiempo, pero no es necesario cargarlos. Entonces si nos desplazamos hacia abajo, también tenemos usabilidad móvil, y estamos recibiendo ah lote gratis aquí por dos razones. Una, estamos usando el tema Ocean WP, que ya es móvil, amigable y móvil adaptado, pero también porque todo lo que haces en L. Un mentor también es muy amigable con móviles, así que es extremadamente dando y obtienes mucho de forma gratuita al usar estas herramientas. Ahora en realidad sí tenemos un error aquí que dice tamaños tap objetivos apropiadamente. Si hago clic en él, dice el Taft o tu política de privacidad está cerca de un otro tap targets finales. Y lo más probable es que signifique que en el pie de página nuestra política de privacidad y términos y condiciones enlaces o para cerrar en la versión móvil. Pero eso está bien porque no hemos ido adelante y hemos adaptado nuestro sitio web a la capacidad de respuesta móvil y a la capacidad de respuesta de la tableta. No obstante, la derecha o el sitio web responde para la tableta y para el móvil, pero aún no los hemos rediseñado específicamente para ellos. Eso lo vamos a hacer en una próxima conferencia, por lo que esto se cuidará pronto. Y luego hemos usado tamaños de fuente legibles, y esta es más divertida opinión off up time, que te están pidiendo que uses cierto tamaño divertido y cierta cantidad de palabras por columna . Por lo que el general su sitio se verá bien y sí llenamos este criterio. Pero esto es más una opinión que nada. Entonces tenemos este contenido de hielo para ver puerto, ¿no? Y éste. Asegúrate de que no tengas que entrar pronto en tu celular cuando lo estés usando para poder leer el contenido porque eso le quita a la experiencia del usuario a lo grande. Por lo que cuando ingresas a un sitio web en tu celular, quieres asegurarte de que solo puedes seguir adelante y desplazarte. Todo se servirá legible, accesible, y se veía realmente bien. Pero si no hay contenido que haya sido de tamaño al puerto View, vas a tener que entrar pronto en tu pantalla todo el tiempo. Y eso mata la experiencia del usuario. Entonces esto sólo significa que tiene el tamaño adecuado y una vez más, Ocean WP y fuera de curso elemental. Gracias. Y aquí que necesitas configurar el puerto View. Qué tan lejos, o qué tan lejos querías estar pronto y luego éste, para ser honesto, es bastante aleatorio. Dice Evitar enchufes. Ahora, si sigo adelante y hago clic en esto, me lleva a un desarrollador en Google que viene sitio que ni siquiera parece existir. No estoy seguro de por qué querrías evitar enchufes. Creo que éste es muy, muy aleatorio. Pero si miramos aquí a Pat Flynn y nos desplazamos hacia abajo, en realidad tiene un pequeño error aquí, y ese es su reproductor multimedia que tiene, o más bien es un reproductor flash. Pero éste, honestamente, no necesitas preocuparte por lo correcto a menos que haya algún tapón está tomando una enorme cantidad de espacio o que esté estrellando tu sitio Web. Pero generalmente este, no va a importar. Este nada que tienes que hacer al respecto. Pero chicos, si no están usando Ocean WP y no están usando ER elemental, que deberían, que deberían, en mi opinión de lo que pueden hacer para que su sitio web sea más receptivo móvil, en realidad es ir aquí e ir a su dashboard enchufa y luego haz clic en agregar Nuevo y luego solo busca un MP. Ahora un MP significa páginas móviles aceleradas iba a hacerlo mucho más rápido en tu teléfono y también va a hacer que sea amigable para móviles. Ahora, honestamente, no he usado éste ni éste porque básicamente siempre uso elementales. No necesito usar esto porque elemental lo hace móvil amigable como es. Pero si no quieres usar elemental por alguna razón y también estás usando un tema que no es amigable para móviles por defecto, puedes usar uno de estos para enchufar los va a hacer que sea amigable para ti. OK, entonces estos son todos los posibles errores ahora, ya que estás usando otras pruebas como Google Page Speed Inside y Ping DM, por ejemplo, que son otras herramientas para estar midiendo el rendimiento de tu sitio web cargando velocidad, etcétera. Te vas a dar cuenta de que probablemente vas a obtener resultados diferentes primero y ante todo , y además vas a volver a obtener diferentes recomendaciones. Te recomiendo que no entres demasiado en esto porque quieres asegurarte de que tu sitio web sea rápido. Es efectivo. Se trata de una alta experiencia de usuario, alta interfaz de usuario. Pero no te vayas por la borda apuntando a la puntuación perfecta porque al final, el tipo de obsesión tiende a simplemente lastimar el sitio web. Enfócate en lo que es importante y no te hagas mayor en los menores, ¿ verdad? Mira los grandes problemas, arréglalos, hazlo mejor, consigue la semilla y consigue el efectivo, etcétera y luego sigue adelante. Esta es mi recomendación, chicos. Ahora pasemos a la siguiente conferencia del curso. Y por supuesto, si tiene alguna pregunta, estará en las Q y A, pero vamos a abordar algo muy importante también en la próxima conferencia. Entonces nos vemos ahí. 13. Asistencia: Muy bien, chicos, en esta conferencia, quiero hablar de algo realmente, realmente importante. Y esto va a ser principalmente para aquellos de ustedes que están usando Blue Host, ¿ verdad? Si no estás usando Host azul, más probable es que esto no se va a aplicar para que puedas pasar a la siguiente conferencia. Pero si estás usando Blue host, quiero hablar de apoyos. Ahora hemos estado hablando de que los hosts azules no son el host más rápido con los servidores más rápidos . Correcto. Y esto definitivamente es cierto. Y si estás apuntando a velocidad pura, puedes ir por terreno del sitio, por ejemplo, que sabemos que son más rápidos que el host azul. Pero una de las cosas más asombrosas, que es la razón principal por la que amamos tanto a Blue Host ¿hay apoyo? Hay más razones, por supuesto, como su SSL, y están escuchando certificado de krypton. Pero el apoyo que obtienes de Blue host por pagar solo un par de dólares al mes es absolutamente increíble. Ahora no puedo empezar a decirte cuántas veces he roto un sitio web en servidores host azules en Lee para ir al soporte para que algún tipo pase a veces horas conmigo ayúdame a recuperar esto. Yo me digo lo que hice mal para luego arreglar los errores para mí y para chicos. Me estoy tomando horas y horas del tiempo de alguien más pagando un par de dólares de descuento al mes . ¿ Sabes cuánto va a costar? Si vas a tener uno en uno apoyo con alguien y vas a pagar de nuestro que puede ser, como 70 u 80 dólares en nuestro y aquí estás pagando un par de cajas fuera al mes y puedes tener básicamente tantas horas como quieras. Por lo que recomiendo encarecidamente cuando haya algún problema con su sitio web, vaya al soporte de host azul. Ahora, si tienes alguna pregunta para tu negocio, cómo llevarlo al siguiente paso para este signo O,ya sabes, ya sabes, seguir adelante que fuera de curso será en la Q y A y tienes la regla de las 24 horas siempre iban a responder en un plazo de 24 horas. Pero para estos asuntos técnicos, puedo tan fuerte el soporte de host azul recomendado y también es muy fácil. Todo lo que haces es tu clickable de nuevo. Adelante e inicias sesión y luego haces clic en el signo de interrogación aquí arriba y luego pasas a chatear. Se puede llamar, claro, pero me gusta callar. Y luego escribes en tu nombre, tu dominio y el nombre de dominio aquí. A continuación, se llega a describir su problema, y luego se le pondrá a la toma con alguien podría tardar un par de minutos. Depende de cuántas personas estén usando el servicio, y esto podría parecer un no cerebro. Pero honestamente, ah, mucha gente consigue este servicio, pero no usan el soporte correctamente. Y una vez más, pasé tantas horas en el apoyo que tanto me ha ayudado con temas de aprendizaje, comprensión. No puedo recomendar esto lo suficiente. Y es por ello que recomiendo encarecidamente no solo usar blue host sino que también usé su apoyo . De acuerdo, así que no te asustes si tienes algún problema con tu página web. Si hay algo que no estás entendiendo, no está funcionando. Adelante y usa el soporte de host azul. Ahora, Blue Host solo puede hablar por los servicios Blue Host. Si hay enchufes, etcétera, etcétera, vas a querer hablar con nosotros en la Q y A en su lugar porque no pueden ser responsables de todas esas cosas. Pero lo que trato de decir es que tienes mucho apoyo. Tu manguera azul, que son realmente expertos en los asuntos técnicos. Todo. Manguera azul. Y luego nos tienes en la Q y A por todo sobre los enchufes para el cartel de negocios , etcétera, etcétera. Así que quita mensaje chicos acostumbraban al apoyo de host azul que compraste Si compraste Blue Hose, lo conseguiste incluido. Hacer buen uso de ella. No te arrepentirás. De acuerdo, verle la próxima conferencia. 14. UI de diseño móvil: Muy bien, amigos míos, sigamos adelante y hagamos la interfaz de usuario Absolutamente hermosa para todas las personas que visitan nuestro sitio web en su móvil. De acuerdo, entonces lo primero que vamos a seguir adelante y hacerlo ha cambiado el tamaño de nuestro logo porque recordamos de antes que era demasiado grande. Estamos recibiendo dos filas cuando llegó al menú y al logo. Entonces lo que voy a hacer es hacer clic en personalizado aquí arriba, y luego voy a dar clic aquí arriba, lo que me va a llevar a encabezado y luego logo. Ahí vamos. Y ahora voy a seguir adelante y ver cómo se ve el sitio web en nuestro celular escribe Hago clic aquí abajo abajo, y podemos ver que estamos teniendo este tema, ¿ verdad? Por lo que el logotipo es demasiado grande. El menú se pone en la fila debajo y obtenemos todo este espacio desperdiciado y todo el espacio es absolutamente presiones cuando se trata de todo, pero aún más. Algunos celulares, porque las pantallas son tan pequeñas. Entonces como se puede ver en el escritorio, este tamaño es en realidad 280. Y si me mudo aquí al celular. También puedes bajar ahí. Esto también va a ser en 280. Pero eso va a ser demasiado grande para nosotros. Entonces vamos a seguir adelante y cambiar esto un poco. Se puede ver que si soy un 280 como antes es demasiado grande. Vamos a bajar. Nos vamos a ir. Ahí vamos. Entonces vamos con, digamos, 200. Ahora podemos ver que tenemos son nuestro logo y nuestro menú lado a lado. Y estamos ahorrando tanto espacio. Ahora, mira, mira esto una vez más. Si aumento conseguimos todo este espacio desperdiciado, retrocede a 200 luciendo mucho mejor. Entonces estoy súper contento con esto. Simplemente voy a seguir adelante y dar click en Publicar. Ahí vamos. Ahora volvamos a volver a L un mentor. Muy bien, chicos, que están de vuelta en l. Un Mansour. Y lo primero que voy a seguir adelante y hacer es bajar al fondo otra vez, clic en un modo responsive y cambiarlo al modo móvil. Ahí vamos. Y estoy súper contento con esto ahora mismo con el logo y el menú se ve perfecto. Incluso podemos hacer click en el menú. Veamos cómo se ve esto. Se ve realmente bonito. Para ser honesto, eso me encanta. Entonces vamos a seguir adelante y hacer algunos cambios aquí, como podemos ver ahora mismo que creo que este texto aquí mismo necesita un poco más espacio. Voy a seguir adelante y cambiar eso. Entonces voy a dar clic aquí, y luego voy a pasar al estilo, y vamos a pasar a la tipografía, y luego vamos a movernos hacia abajo a la altura de línea justo aquí, y sólo vamos a seguir adelante y expandir esto un poco poco. Algo así. Ahí vamos. Se puede ver que está creciendo. Están intercambiando toda la interfaz. A lo mejor eso es un poco mucho. Ahí vamos. Por lo que aún queremos tener en cuenta estas cosas que tenemos el botón aprender más que es fácil acceso, que es realmente, realmente bonito y oh, tan importante. Al mismo tiempo, el menú se ha vuelto un poco más difícil de alcanzar porque, recuerden, el pulgar no sube tan fácilmente por ahí. Pero aquí, hay que tomar la decisión. Vas a tener el menú fácil de alcanzar, y eso va a costar como, 15% de la pantalla. En mi opinión, eso no vale absolutamente la pena. Por lo que es mucho mejor poner el menú un poco más alto y darles más del contenido . ¿ Verdad? Entonces ahí vamos. Ahora hay algo más de espacio entre aquí. Eso me gusta, tal vez incluso un poco menos. En realidad, la altura de la línea puede ser un poco más. Ahí está nuestro punto dulce. Ahí vamos. Entonces me voy a desplazar hacia abajo y ver si hay algo más de lo que no soy un gran fan. Entonces podemos ver aquí, por ejemplo, que este texto se está poniendo bastante apretado en posición vertical, pero sigue siendo información muy importante. Entonces lo que me gustaría hacer es cambiar el look de toda esta sección. Entonces voy a seguir adelante y dar clic en la sección de edición aquí, y voy a seguir adelante y quitar algunos del relleno porque se puede ver que aquí hay mucho espacio desperdiciado. Aquí es mucho espacio desperdiciado, y eso se veía muy bien en el escritorio, pero eso no se ve tan bonito en el celular. Eso es solo desperdiciar espacio de presión. Entonces lo que voy a seguir adelante y hacer es revisar cuánto del relleno está en realidad arriba aquí en este momento para que podamos mantener este relleno el espacio entre las diferentes secciones, pero luego quitamos el relleno a los lados. De acuerdo, Entonces para hacer eso, voy a dar click en el relleno y luego ir al escritorio y podemos ver que se dice a 50 . Y lo que eso significa es que estos a pesar de que no hay números, estos también se establecen automáticamente en 50. Es así como funciona el Modo Automático Móvil Responsivo. Simplemente establece los mismos números. Ahora, el sitio web es hermoso, incluso en un celular, pero se tuerce completamente optimizado. Entonces lo que voy a hacer es desvincular estos valores y luego voy a dejar el top en 50 así . Por lo que todavía tenemos la misma cantidad de espacio yendo a quitar así a esa Siria. Y entonces sólo voy a dar clic y escribir uno aquí dentro y uno aquí, uno aquí dentro. Ahora, esto ya se ve mucho mejor, pero sigo pensando que el relleno es un poco demasiado aquí para el celular. Entonces voy a seguir adelante y disminuir eso para digamos que 25 podría verse un poco mejor. Entonces si bajamos y miramos la parte superior, podemos ver que esto es lo mejor. En realidad, aparece aquí arriba en la parte superior, y esto me está gustando. Entonces te metes en toda esta pantalla, correcto, y nosotros bajamos este texto abajo. Ahora, hay dos cosas que podemos hacer. O podemos dejar esto de la manera que es y podemos conseguir. Este es el mejor y más toma en nuestro teléfono. O en realidad podemos aumentar el tamaño de este fondo ahora desplazándose hacia abajo. En realidad estoy muy contento con esto. Se puede ver que aquí hay mucho menos espacio desperdiciado, y aún tenemos esta maravillosa cita todavía aquí. Ahora, todavía voy a querer cubrir todo esto por encima de la sección de pliegue con este fondo, Así que voy a pasar por aquí, clic en la sección y luego pasar a la altura mínima, ¿ verdad? Y voy a estar aumentando un poco así como así. Ahí vamos. Por lo que ahora podemos ver que está cubriendo todo el primer partidor. Ahora, esto está afectando al resto de los decide. Ahora quizá queramos volver aquí a esta toma, ir a la tipografía y cambiar un poco la altura de la línea. Ahí vamos, luciendo mejor y tal vez un poco más de espacio entre estas columnas. ¿ Verdad? Entonces pasemos al estilo aquí arriba y pasemos a la tipografía y juguemos un poco con las alturas de línea. Ahí vamos. Algo así. Entonces esto está empezando a verse realmente bien en este momento. Podría querer usar incluso poco apagado más. Ahí vamos. Las cartas fáciles de hacer de negocios te muestran cómo. De acuerdo, ahora, si miramos el fondo, podemos ver que la luna realmente está encubriendo. Eso toma un poco. Lo que podríamos estar haciendo es cambiar la posición fuera de fondo también para ver si obtenemos una mejor mirada. Pero en realidad estoy bastante contento con esto. Entonces vamos a seguir adelante y desplazarnos hacia abajo y podemos ver que el pelo de la cita sigue luciendo realmente bien. Ahora estamos removidos el espacio en el medio. En realidad, agregamos un poco mucho aquí tal vez, pero creo que es bueno. También va a depender de la resolución del celular. Entonces vamos a desplazarnos hacia abajo. Dice, consigue hacks de marketing digital gratis, ¿verdad? Consigue los hacks de marketing perezosos. Y esto realmente se ve realmente bien ya. Ahora, hay un par de cosas que quizá quieras cambiar. Ahora, solo haciendo clic aquí tipo de actualizado esta parte. Están ocurriendo cambios porque nos estamos moviendo alrededor de los diferentes bits. Y me gusta este gran momento que tenemos este valor completo de $99 justo aquí. Date de alta abajo, y te lo enviaremos. Está bien. ve realmente bien. Súper feliz por esto. Lo que yo podría querer hacer, porque ahora la tenemos de vuelta, que es bastante oscura, puesta en contra de nuestras tomas oscuras, que funciona realmente bien aquí arriba. Pero no tan bien aquí abajo. Por ejemplo, podríamos querer realmente hacer esta parte audaz. ¿ Verdad? Entonces solo voy a entrar aquí, voy a seleccionar esto, y voy a hacerlo audaz. Entonces ahora es un poco más fácil de leer y de ver, y estoy cavando ahí este diseño. Vamos, y esta forma se ve super bonita. Sabemos que en realidad es uno al lado del otro en el escritorio en la versión móvil allá abajo , donde sabemos también que el pulgar llegará fácilmente para hacer clic en mi primera noche en el correo electrónico y también llegar fácilmente a hacer clic. Envíame el hackeo. Entonces esto en realidad es realmente buen diseño? Sí. Vamos a seguir adelante y desplazarse hacia abajo y estos aires se ven absolutamente espantosos. Esto es Esto no es bueno. Y esto es por el relleno que estamos usando en el relleno. Tienen mucho sentido en el escritorio. Se ven hermosos en el escritorio, pero no se traducen bien a la versión de celular. Entonces lo que voy a hacer aquí es empezar a editar estos un poco. Entonces voy a empezar dando clic en la edición, la sección aquí arriba, y empezar a jugar un poco con la patty. Voy a pasar a avanzado. Y ahora estamos en el modo celular. Y primero necesitamos sacudir lo que el relleno actualmente está en el escritorio y podemos ver que está configurado en 70. ¿ Verdad? Está bien. Está fijado en 17. Ahora, vamos a pasar. Volver al celular. 70 podría ser un poco excesivo aquí, así que voy a sólo estos una vez más porque sí quiero el relleno en la parte superior. Y voy a poner eso en 50. O vamos con 20. Vamos con Vamos con 40 esta vez. De acuerdo, entonces vamos a establecer esto antes. También iban a cambiar un poco este tamaño, así que ahora se ve mejor para estos. Podríamos querer ponerlos en uno. Podríamos ver que se cambian ellos mismos cuando estamos vinculados. Por lo que estos en realidad se empezaron a corregirse un poco. Si nos desplazamos hacia abajo, podemos ver que estamos obteniendo un curso que cubre toda la pantalla a la vez. Y honestamente, chicos, esto se ve bastante bonito. Esto es bastante sólido. Entonces todo lo que realmente necesitaba hacer y con este traseros y también. Entonces todo lo que realmente necesitaba hacer era on link esto y eso cambió el relleno para la versión de celular y todo se ve mucho mejor ya. Entonces definitivamente estoy cavando esto ahora. Lo que podríamos hacer es o debemos hacer, incluso se cambia. El titular aquí The Header porque se ve absolutamente espantoso y lo que vamos a empezar cambiando es el tamaño porque no se ven bien en este tamaño en este momento. Entonces sigamos adelante y juguemos un poco con esto. ¿ Querías tener una fila o dos Ahora? Yo quería estar al tanto, como esos cursos más vendidos. Entonces ahora va a tener mucho más sentido, cierto, porque puedes leerlo y hay menos espacio entre estos, y eso se ve mucho mejor. Prefiero ir con 50 o 70 en el relleno cuando se trata de escritorio alrededor de 22 14. Cuando se trata de Mobile depende completamente del diseño, pero aquí creo que se ve realmente bien así. Entonces tenemos los cursos más vendidos, y luego vamos a tener el curso está rodando así. Los botones o hay un curso a la vez. Tenemos un poco de espacio a los lados, pero esto es sólo una buena parte fuera. El diseño está buscando magnificencia desplazar hacia abajo. Tenemos la vista, todos los cursos que está cubriendo más o menos toda la pantalla y luego abajo tenían la política de privacidad en términos y condiciones. Entonces, chicos, ahora mismo estoy realmente contento con este diseño, ¿ verdad? Esto se ve realmente bien. Realmente agradable. Hemos cambiado principalmente el espaciado entre las letras y el relleno. Entonces, cuando se trata de romper tu diseño, normalmente va a ser el relleno. Y esto va a ser muy individual para tu página web. ¿ Qué opinas? Se ve bien, etcétera. Ahora lo estoy haciendo de manera muy intuitiva, lo que significa que no hay ningún plan detrás de lo que estoy haciendo. O mejor dicho, no hay preparación a lo que estoy haciendo. Simplemente estoy decidiendo a lo que creo que se ve bien y pregunté, voy y sigo firmando la página web. Puede que vuelva y haga algunos cambios, pero ahora mismo creo que esto se ve realmente bien. Tenemos el libre en su propia fila, que creo que se ve bastante bonito. Pero lo que también podríamos hacer se cambió este encabezado, ir a la tipografía de estilo y jugar un poco con el tamaño, por ejemplo, se va a quedar bien si están en tres asado. ¿ Qué tal dos rosas, dos rosas demasiado pequeñas, tres filas Se ve bien, pero en realidad creo que esto podría ser un poco mejor. Entonces los voy a mantener en tres filas así. Se irían, y esto me está gustando mucho. Entonces, chicos, así es como lo hacen. Todo lo que tienes que hacer es en primer lugar, si tienes un problema con el menú, si tienes un problema con el menú, haz lo que hicimos al inicio del curso, luego pasa a L. Un mentor, baja al modo responsive y cambia a móvil. Y luego las cosas primarias que vas a querer cambiar nuestro deseo, el espaciado entre letras, espaciado entre las letras como hicimos al principio aquí va a ser a este tamaño fuera de las tomas, los encabezados, etcétera, y tres el relleno. Ahora el relleno es un gran breaker off hermosos diseños. Entonces cuando se vincula el relleno sólo va a cambiar todo decidir a lo grande. Entonces estoy muy contento con el de este tipo. Y ahora, no te preocupes, esto no va a estar afectando en absoluto el diseño de tu escritorio. Lo que sucede en modo celular se queda en modo celular. OK, los motivos móviles para el modo móvil y el escritorio son para el escritorio, ¿no? Entonces nada ha cambiado aquí. Todavía tenemos esta bonita hermosa. Este signo. Lo que vamos a seguir adelante y hacer ahora es pasar a la siguiente conferencia. Vamos a hablar del diseño de la tableta. ¿ De acuerdo? cual también es muy importante hacer. Pero, con mucho, los primarios son de escritorio y celular, con un énfasis extra en el celular. Porque más de la mitad de tu tráfico estará viniendo de ahí. Si tiene alguna pregunta, estará en la Q y A así ver en la próxima conferencia, chicos. 15. Diseño de tabletas UX: De acuerdo, chicos, hablemos de la tableta diseñada para la experiencia del usuario. Entonces en la siguiente conferencia, vamos a seguir adelante y enfocarnos en la tableta diseñada para el uso o interfaz. Pero lo primero es lo primero. ¿ Qué tiene de especial una tableta para firmar? Bueno, como lo conocemos, Tablet se ve así de ahora. Hacen común tamaño de pantalla variable que podemos tener tabletas realmente pequeñas. Podemos tener tabletas realmente grandes. Podemos tener verticales, y podemos tener tabletas horizontales. Lo que es interesante saber, sin embargo, diferencia de los otros dispositivos como Mobile es en general y escritorio es que tienen dos modos muy comunes apagado usándolos. Ahora. El 1er 1 en realidad se llama la orientación del retrato, y es cuando lo estás manteniendo en este tipo de modo vertical como vemos en la imagen . este momento, la segunda forma que también se puede estar usando es ponerlo a un lado así, y a esto se le llama la orientación paisajística. Y esto también es muy importante saber, porque dependiendo de cómo estén usando su tableta, eso va a afectar el diseño fuera de tu página web. Ahora vale la pena saber que cuando se trata de usuarios móviles. Alrededor de 90 piensan que es el 93% de todos los usuarios realmente lo usan en el modo retrato, lo que significa que mantienen el teléfono en posición vertical con una mano así. Ahora, cuando se trata de las tabletas, las puntuaciones son un poco diferentes. En primer lugar, cuanto más pequeña es la tableta, más probable es que se use en modo retrato, correcto, correcto, por lo que cuanto más grande se pone la pantalla entonces, más comentada, es que la gente la use en un orientación paisajística. Ahora hay dos fabricantes comunes. Eso es androide, ¿verdad? Las versiones android de las tabletas y luego tenemos Apple y manzanas tienden a ser mucho más grandes en general que los androides. Por lo que los usuarios de Apple son los únicos usuarios que en realidad usan más paisaje que el retrato . Pero aquí está la salvedad, chicos que más por mucho el más hábito siendo soldar en realidad tabletas android. Por lo que eso significa también que el modo más común apagado usando su tableta es el modo retrato. Entonces vamos a tener esto en cuenta para nuestro diseño ahora. En Lee, 4% de descuento en el tráfico a un sitio web proviene de la tableta vale la pena saber que cuando la gente calcula su tráfico móvil. Generalmente incluyen el tráfico de tabletas en la encuesta móvil, ¿no? Por lo que la conferencia anterior que pasamos con el tráfico móvil que normalmente va a tener incluida la tableta. Pero el tráfico de tabletas es general es tan pequeño que no hace una gran diferencia sigue siendo más de la mitad de todo el tráfico. Es usar el móvil, es decir, tu celular en lugar de solo las tabletas o el escritorio. Pero nunca había visto un estudio que alguna vez demostrara que más del 10% del tráfico valía tabletas . Por lo que sabemos que una porción muy diminuta del tráfico a su sitio web general provienen de la tableta. Pero aquí es donde se pone muy interesante porque tienen el doble tiempo de retención en tabletas en comparación con el derecho del Mobil. Y eso tiene sentido porque las personas que van a un sitio web en sus celulares están mucho más inclinadas a estar buscando algo que se desplaza y luego volver. Por lo que las tasas de rebote son mucho más altas en móviles que en tabletas, generalmente en tabletas. En realidad la gente está buscando entretenimiento o quieren leer algo. Están más asentados. Lo que me lleva al siguiente punto también, que es que el 60% de todas las personas que usan una tableta en realidad montan su tableta ¿ verdad? Eso significa que ponen su tableta en algo para que puedan usar ambas manos en el otro 40%. Todavía van a contemplar la tableta y luego usar su mano mayor para estar usando el Talbot y desplazándose y haciendo clic etcétera. Entonces eso significa que alrededor del 100% de todos los usuarios de tabletas usaban ambas manos. Y eso tiene mucho sentido considerando el tamaño de estas cosas. Pero esto es bueno para nosotros saberlo, porque eso significa que a diferencia de los celulares, gente va a tener un momento más fácil para llegar a todos los lugares de la pantalla donde está en un celular. Va a haber lugares más fáciles y difíciles a los que llegar. Esto no quiere decir que tengas alcance completamente libre con los diseños. Todavía van a ser más a menos que sean accesibles. Esto señaliza donde pones tu llamada a botones de acción donde pones tu información importante , etcétera con el fin de optimizar tu sitio web para la conversión en celulares, en tabletas y en escritorio, son los tres diferentes dispositivos e interfaces y, por supuesto, experiencias de usuario. Ahora, con una tableta, a diferencia de un celular, en realidad tienes mucho más espacio, ¿ verdad? Pero lo único que hay que tener en común aquí que es un error muy común cuando se trata experiencia de usuario. Este cartel para tablet es que la gente pone demasiada basura en su página web. Para este diseño, menos es aún más. Ahora Tienes que tener mucho cuidado cuando te estás enfocando en la experiencia del usuario y interfaz de usuario para un celular, porque no tienes tanta base aquí. Las historias de manera diferente en realidad tienen un poco más de espacio, pero es fácil poner demasiada basura en la pantalla, consiguiendo una sobrecarga de contenido e información. Mantenlo limpio, mantenlo realmente bonito y limpio y piénsalo como una parte más accesible de un celular . Pero aún necesitas que se vea diferente y se vea bien, Pero no lo desordenes. No lo abarrotes. No pongas demasiadas cosas innecesarias. Manténgalo limpio, manténgalo accesible y prioriza tu contenido. Y por último, pesar de que la mayoría fuera de los usos se utilizan en la orientación del retrato, lo que significa que lo mantienen vertical en sus tabletas cuando lo están usando, todavía hay que asegurarse de que ¿da cuenta del paisaje orientación? Y lo que quiero decir con eso es que, por ejemplo, podrías pensar que crear una lista como esta es una buena idea porque se ve muy bien . Puedes desplazarte por la lista con tu contenido y sí se ve bien. Ahora, el problema con esta lista es que cuando pasas de un modo retrato al modo paisaje, simplemente ya no se ve tan bonito. Podemos ver que hay mucho desperdicio de espacio a la derecha que o va a ser un lleno de nada o B se va a llenar con un montón de contenido que sólo va a ser sobrecarga de contenido. Entonces este tipo de lista, el letrero simplemente no va a funcionar ahora. Si usamos otro diseño un diseño de bloques clásico, por ejemplo, donde tienes tu gran contenido en el frente y luego tienes piezas más pequeñas abajo con, por ejemplo, tus publicaciones recientes con tus artículos con tutoriales o tus productos, sea lo que sea a ti ofreciendo, va a quedar realmente bien en un modo paisaje correcto, porque lo podemos ver muy bien ahí en la pantalla también. Y si lo volteas a retrato, todavía va a quedar muy bien. Simplemente va a verse un poco diferente. Sólo va a general, si es un poco más y ser un poco más pequeño, pero todavía va a quedar muy bien, y quizá quieras cambiar el letrero. Ahí está bien. Entonces en lugar de tener seis productos diferentes pop up, tal vez sólo cuando muestro seis, porque quieres hacerlos más grandes, etcétera. Pero el punto es, debes asegurarte de que cuentas el modo paisaje solicitado. Bueno, entonces no utilices el diseño de lista. Ahora pasemos a la siguiente conferencia, y vamos a adaptar nuestro sitio web para tablets, pesar de que es sólo el 4% del tráfico, 4% cuando estás teniendo miles y miles de visitantes, eso se va a hacer grande, especialmente cuando sabemos que hemos duplicado la retención en la página web. Para esos usuarios, y la retención que sabemos significa cuánto tiempo se está quedando la gente y de manera interesante los usuarios móviles. Prefieren quedarse unos cuatro minutos en promedio, mientras que los usuarios de tabletas ahí pasan a quedarse dos arriba hacia los ocho minutos y por encima de estadísticas muy interesantes. Entonces pasemos a la siguiente conferencia y empecemos a diseñar para tabletas. 16. UI de diseño de la tableta: Muy bien, chicos. Entonces en esta conferencia, vamos a seguir adelante y enfocarnos en el diseño del usuario en nuestra página principal y sitio web para tabletas . De acuerdo, entonces ya conoces el simulacro. Vamos a usar elemental. Vamos a seguir adelante y bajar al modo responsive y hacer clic en Tablet. Y aquí estamos Ahora, no me voy a enloquecer en este. Voy a ser muy intuitivo. Y en realidad no se mezcla demasiado si no es necesario. Porque recuerda, vamos a tener un montón de páginas para estar optimizando y para estar diseñando, sobre todo para escritorio y muy especialmente para móvil y tablet fuera de curso. Quieres que se vea bien, pero aún 4% de descuento en tu tráfico, ¿ verdad? Entonces haz que se vea bien, pero no te vuelvas loco aquí por el diseño. No hacer mayores en los menores es mi opinión. Entonces sigamos adelante y echemos un vistazo a esto. Ahora, en realidad estoy bastante contento con este. Yo sí disfruto el diseño. Estamos llegando directo al grano. Al principio, tenemos que aprender más. Tenemos la siguiente sección apareciendo. No hay nada que yo intuitivamente realmente quiera cambiar. Entonces voy a desplazarme hacia abajo y echar un vistazo a la muñeca. Creo que esto se ve realmente bien y bonito a ahora éste. No soy tan grande como fan de. Podemos ver que aquí está pasando mucho espacio. Podemos ver que Aquí está pasando mucho espacio, así que para mí, no hace demasiado espacio. Lo que voy a seguir adelante y hacer es realmente escuchar el tamaño de esta imagen de fondo. Ahora bien, creo que es realmente bonito y hermoso porque está cubriendo toda la pantalla así. Pero sigo pensando que hay un poco demasiado espacio entre las secciones. Entonces voy a seguir adelante y hacer clic aquí arriba, y luego me voy a pasar al estilo. Ahí vamos. Y luego voy a seguir adelante y pasarme a sentar después de quedarme en el layout, Más bien, y voy a empezar a jugar con la altura mínima. Correcto. Entonces voy a seguir adelante y ver qué se ve bien, Algo así. Ahí vamos. Entonces ahora cuando nos desplazamos por esto, podemos ver que no está cubriendo toda la pantalla como lo hacía antes, cual es realmente hermoso. Un especial en escritorio y en móvil, en mi opinión. Pero también tenemos que dar cuenta del si estamos usando el modo retrato o el modo paisaje Ahora, quiero ser un poco más directo al grano aquí. Entonces a medida que nos desplazamos hacia abajo, en realidad nos movemos hacia arriba. Tenemos el correo abierto que nos movemos o a los cursos más vendidos. Entonces tal vez un poco más grande. Ahí vamos. Entonces no tenemos esta misma loca cantidad de espacio, pero es ahí vamos. OK, ese es el punto dulce. Por lo que no hacer nada para crear para escuchar el texto se ve bien. Todo está mirando de la manera que debería. Realmente feliz por eso. ¿ Ahora qué? También podríamos seguir adelante y hacer como hicimos en la versión móvil es hacer esta parte audaz. ¿ Verdad? Entonces solo vamos a entrar aquí y dar click en la B, hacer que esta parte sea audaz porque estamos en dirección a ella de vuelta aquí. Por lo que esto de repente es más fácil de leer. ¿ De verdad cavando esto tan desplazándose hacia abajo? ¿ Tendrías nuestros cursos aquí mismo? Bueno, se ve bastante bonito, para ser honesto. Ahora bien, creo que hay un poco demasiado blanco pasando alrededor de estos. Entonces voy a seguir adelante y quitar el relleno para los blancos, que está apareciendo en las columnas. Entonces lo que voy a hacer es hacer clic en un par para la edición y edición de esta columna, y luego me voy a pasar para avanzar aquí. Y ahora, para poder editar correctamente esto, lo que tengo que hacer es saber cuáles son los tamaños originales orgánicamente vienen escritorio aquí y podemos ver que el relleno es de 50 ¿verdad? Pateando sus 50. Entonces volvamos a la tableta. Si escribo 50 nada va a pasar realmente porque ese es el original. Simplemente no aparece aquí. Ahora, probablemente voy a querer usar alrededor de la mitad, así que voy a escribir 25 algo así. Por lo que no toma tanto espacio que fueron ir. A mí me gusta ese diseño, así que sólo voy a dar clic en este. Ve a avanzar, pasa al relleno y escribe 25 aquí. hincha. Haz lo mismo aquí. Por aquí. Acolchado avanzado 25. Ahí vamos. Un poco más limpio. Estoy cavando este look mucho más. Agradable. Directo al punto. Ahora preferiría que hubiera un poco más de espacio entre estos cursos. Entonces lo que voy a seguir adelante y hacer es en realidad aumentar el margen entre los cursos y la forma más fácil de hacer eso realmente. Para ser honesto, se pulsa aquí para editar la columna media. Voy a ir a avanzar, y luego voy a revisar su regional. Ese margen es de 30. Está bien, sé que eso va a volver. Asegúrate de que sigo aquí. Y ahora voy a escribir algo así como seguro 50 50. Podría ser bueno. De acuerdo, tal vez hasta 70. Ahí vamos. Entonces creo que 70. Bueno, tal vez eso se acabó haciéndolo un poco. Voy a hacer 50 así. Yo creo que esto se ve bastante bonito. Por lo que pasa un poco más de espacio. Y además, esta caja se está haciendo un poco más pequeña, así que voy a aplicar eso a todas las columnas. Van Van Va a margen derecho 50. Y yo voy a escribir el margen aquí también. Cincuenta, estoy golpeando a dos pájaros de un tiro. Esta terrible expresión, por cierto. Y estoy haciendo un poco más de espacio en el medio mientras también hago esto más pequeño. Entonces estoy cavando esto. Creo que esto se ve muy bien. Creo que ahí necesita directamente al grano. Soy un gran fan de esto. Se ve muy bonito para ser honesto y orgulloso de verlo. Por lo que esta ha sido mi tablet diseñada para la interfaz de usuario. Ahora te toca a ti cómo decidas hacer tu decisión. Se trata de un completamente individual. Sólo ten en mente la experiencia del usuario, correcto, porque van a voltear esto. Se va a ver diferente, pero no estamos usando lista. Por ejemplo, esto todavía va a quedar bien. Esto todavía va a quedar bien con los ratones. Tenlos en la misma fila. Ya veremos. Pero de todos modos, nada va a parecer demasiado loco porque hemos tenido en cuenta el diseño. Ahora, lo último que quiero mostrarles es que si pasas a una tableta para firmar, o tal vez incluso a un diseño móvil, lo que podría pasar a veces es que el si estás usando múltiples columnas lo haría en una sección podrían cambiar de lugar. Ahora, no hay nada realmente a la vista fuera de esta columna, cierto, Porque si recuerdas, cuando estábamos en el aborto de disco, en realidad estábamos usando un extra llámalos aquí para poner esto más a la izquierda. Por lo que este columnista vacío y eso es perfecto para escritorio. Si vas a la tableta, solo pone abajo aquí. De acuerdo, Ahora, porque estamos usando una tableta y se usaron en la capacidad de respuesta del celular. ¿ Estos son pila? ¿ Verdad? Podemos ver que se apilan porque esto está en la parte superior. Esto está en la parte inferior. Entonces si teníamos algún contenido aquí, sólo voy a mostrar aquí, digamos que teníamos este texto aquí, pero se estaban apilando en el orden equivocado, ¿ verdad? Esto no nos gustó. Todo lo que necesitábamos hacer para apilar esto correctamente es ir a editar sección un par y luego pasar a avanzado y luego abajo en responsive aquí. Y hay algo que dice columnas inversas para la tableta esta vez. Entonces si estarías sintiendo estos fuera, entonces estarían revertiendo para la tableta y para el móvil. ¿ Verdad? Entonces ahora podemos ver que éste en realidad está encima. Este está por debajo, y todo lo que necesitábamos hacer es simplemente revertir estos y ponerlos a menudo van a cambiar de nuevo a su posición original. Y de nuevo, esto se debe a que la capacidad de respuesta va a apilar mucho de tu contenido, que se ve hermoso, para ser honesto, diseño muy fluido. Nos ayuda mucho, pero no siempre se apilan de la manera que queremos. Gran trabajo chicos. Ahora sabemos de la experiencia de usuario e interfaz de usuario para escritorio, para Mobil y para tabletas. Es hora de seguir adelante y empezar a editar y diseñar más páginas en nuestro sitio web. Y ahora vamos a empezar a usar plantillas y explorar cómo podemos personalizarlas para crear páginas más fáciles, más rápidas y fuera de curso y hacerlas lucir absolutamente impresionantes. Entonces ver en la siguiente conferencia, chicos.