Última actualización –
sitio Web de la velocidad es un aspecto crucial de la la página de SEO todo el mundo puede controlar. Su objetivo es ser
interactivo en menores de 3
segundos, incluso en un teléfono básico, a través de una conexión 3G.
sin Embargo, la mayoría de los sitios web tienen muchos pedidos y grandes cargas de este límite de tiempo o de presupuesto no puede ser alcanzado. En
de hecho, el promedio de la página web se lleva a 22 segundos de carga, de acuerdo a Google de la investigación.
Pero lo que si te dijera que hay una manera de descargar o incluso evitar la carga de la página activos hasta que se necesitan?
Esto puede dar a su sitio web una clara ventaja sobre su competencia, ya que no sólo va a Google como sus páginas
lo mejor será que tus visitantes!
La buena noticia es que se requiere un poco de JavaScript y esfuerzo intencional para la actualización de su sitio.
Y Google
Equipo de búsqueda es todo por esta técnica, llamado \’carga diferida\’.
Google breve guía menciona tres principales puntos:
El truco es no ocultar el contenido que usted necesita indexado de Google. Así, han publicado este útil, pero fino de guía.
también han publicado un guía sobre el uso de Intersección de Observador a la carga perezosa imágenes y videos hasta
están a la vista.
Para el promedio de los sitios web que son de uso compartido de contenido, como un blog o sitios de marketing, la carga diferida es bastante simple. Pero para
aplicaciones web, esto puede ser más complejo, y voy a bucear en algunas de las técnicas que uso para cargar el código según sea necesario para
asegúrese de mis aplicaciones son rápidas y sensibles.
voy a revisar los puntos que Google ofrece y dar algunos consejos y ejemplos de mi propia experiencia en el uso de
IntersectionObserver y un poco sobre cómo la Historia de la API de obras.
La carga diferida directrices de la paloma de la cola con su reciente orientación alrededor sola página
aplicaciones y SEO debido a que es una buena técnica para mejorar su sitio web, la experiencia de usuario.
Para obtener más complejas aplicaciones web me va a tocar una técnica para cargar scripts en la demanda, en lugar de la parte delantera, que mantiene
la página de la representación.
Perezoso-Carga de Contenido Escenarios
Antes de agregar perezoso-capacidad de carga de su sitio, debe de inventario de lo que los activos de su carga de las páginas y determinar
¿qué es necesario para que la experiencia inicial y lo que puede ser cargado una vez que el usuario comienza a leer o interactuar con
el contenido.
Deje que me vaya de nuevo a mis dos principal de sitio web escenarios, contenido y aplicación, ya que el contenido de las necesidades varían, pero tienen
superposición.
en Primer lugar, un contenido o de las ventas, enfocado sitio web. Por simplicidad, me acaba de llamar un blog. Estos sitios suelen necesitar
HTML, CSS, JavaScript, imágenes y fuentes personalizadas. También tienden a ser los sitios que quieras sin tráfico orgánico de
Google, lo que significa que el SEO es importante.
aparte de hacer que la página carga más rápido que usted necesita para asegurarse de que el contenido sea accesible para el motor de búsqueda de araña,
que no se ejecuta JavaScript o desplácese a la página de la unidad de carga diferida de contenido.
Contenido puede referirse a los medios de comunicación, código o copia (texto y marcado).
las Imágenes y los Videos son archivos de gran tamaño. Aplazar su carga tiene una inmediata repercusión positiva en la página de carga
tiempo.
JavaScript, CSS, HTML y las Fuentes son necesarias para hacer las páginas. Pero los Scripts y CSS puede ser su mayor
los cuellos de botella para un rápido tiempo de la primera interacción. Retrasar su carga hace que su contenido esté disponible mucho
antes.
a Veces usted quiere retrasar la carga de contenido de la página y copia. Sólo asegúrese de que si es importante para el SEO es
disponible para las arañas.
Para ello voy a mostrar cómo utilizar IntersectionObserver para cargar activos como las imágenes y videos que desplazarse en
vista. Pero antes de hacer eso, necesitamos configurar el marcado para hacer que las imágenes y vídeos indexables.
el Complejo de las aplicaciones web pueden ser un poco más delicada, porque se apoyan más la lógica de la aplicación. Esto significa que
requieren más archivos de JavaScript. Cuando estos archivos se cargan los asuntos. Mientras que usted puede utilizar para IntersectionObserver
esto, su aplicación necesita una buena técnica para cargar dinámicamente los scripts necesarios. Más adelante en este artículo voy a
darte!
Manejo Perezoso Cargado de Imágenes
Mientras que Google y Bing puede ejecutar su página de JavaScript, que no es una prioridad. Asimismo, no se intenta
desplácese por la página para activar cosas como IntersectionObserver.
Esto significa que su perezoso contenido cargado bien podría no existir.
Al principio, usted puede no considerar esto una gran cosa, pero la imagen de SEO puede ser un factor clave para ayudar a usted mejor clasificación de
las búsquedas. Además, la imagen de las búsquedas pueden ser una fuente oculta de adicional de tráfico orgánico.
El secreto para hacer de su contenido araña accesible que se \”esconden\” detrás de una etiqueta \”noscript\”.
sé que hay una gran cantidad de código en el ejemplo, pero voy a ir más de los datos de atributos en la sección siguiente.
Lo que yo quiero que usted se concentre en el que ahora es el elemento noscript. Dentro de este elemento tradicional es un elemento IMG con
el src valor establecido para el tamaño de imagen grande.
Ahora la búsqueda de las arañas de la carga de la imagen y el índice para usted.
La etiqueta noscript es una semántica mecanismo para decirle al navegador, a sólo representar el contenido en el interior del elemento, si la
navegador (agente de usuario) no soporta JavaScript. La mayoría de los visitantes tener JavaScript activado, así que no
activar la imagen que se carga inicialmente. Pero como se verá en breve se hará cuando el no-noscript imagen es visible.
Ahora vamos a sumergirse en cómo utilizar IntersectionObserver.
¿Qué es IntersectionObserver?
Una relativamente nueva del explorador de API, IntersectionObserver es compatible con todos los navegadores modernos y hay una estable polyfil
usted puede cargar dinámicamente para aquellos que no lo hacen.
Esta API, se desencadena una devolución de llamada cuando los elementos de destino venga a la vista. Esta devolución de llamada le permite ejecutar el código, que en
nuestro escenario es para cargar elementos según sea necesario.
Este es un API simple, pero hay un par de piezas que usted necesita para comprender.
en Primer lugar cómo crear un IntersectionObserver:
crear un nuevo IntersectionObserver objeto por el paso de un método de devolución de llamada y un objeto de configuración. Voy a cubrir
la devolución de llamada más tarde.
La configuración de los parámetros de decirle a el observador que tan cerca de la parte visible de la ventanilla de un elemento debe ser observado
antes de activar el método de devolución de llamada. El rootMargin valor especifica cuánto margen vertical y horizontalmente
el elemento puede ser.
En mi ejemplo le digo al observador para activar la devolución de llamada cuando la vieron elemento está dentro de los 50 pixeles verticales de
el área de visualización. Me puse horizontal a 0, ya que rara vez utilizan el desplazamiento horizontal.
La devolución de llamada de fuego dentro de 100ms debido a que el umbral se establece en 0,1 segundos.
he simplificado el \’observar\’ método aquí, pero normalmente puedo seleccionar todos los elementos de un cierto tipo y lazo sobre la
resultados. Aquí sólo estoy mostrando una sola imagen.
Cada elemento desea que este observador reloj debe agregarse por separado. Esta es la razón por la que me bucle en los resultados, debido a que
cada imagen, video o lo que sea necesario para agregar explícitamente.
El método de devolución de llamada es la lógica que se dispara cuando la vieron elemento viene a la vista.
El método de devolución de llamada que recibe dos parámetros, los objetivos que desencadena la devolución de llamada (en teoría más que uno
puede satisfacer sus umbrales en el mismo tiempo) y una referencia a la real observador.
Las entradas son análogas a las de su típico controlador de eventos evento en función de objeto. Para acceder a la real del elemento DOM que
referencia de la entrada del valor objetivo. El objeto también tiene isIntersecting y intersectionRatio propiedades que se pueden utilizar
para determinar si desea que actúan sobre el elemento o no.
En este ejemplo yo \’tirón\’ de los datos de los atributos de su imagen correspondiente atributo, lo que hace que la imagen a procesar.
Porque yo siempre uso sensible de las imágenes que necesita para voltear los datos srcset, data-src y los datos de los tamaños de los atributos.
hasta ahora, he utilizado esta técnica con imágenes, videos y mapas en diferentes sitios.
Si usted se está preguntando lo hago con todas mis imágenes, incluso los prestados \”por encima de la tapa\’. Mientras que hay una ligera
el retraso en la representación de imágenes que no tiene un gran impacto en mi UX. El contenido principal se carga super-rápido, especialmente
en el móvil.
Las imágenes que se cargan porque el IntersectionObserver para estas encima de la tapa de los elementos está satisfecho y
activa inmediatamente. No requiere que la imagen se desplaza a la vista.
Hablando de desplazamiento a la vista, continuo desplazamiento funcionalidad también puede ser facilitado mediante IntersectionObserver.
Paginación/Continuo Desplazamiento
Algunos de los interesantes orientación de Google que ha llamado mi atención últimamente es cómo lidiar con la paginación de las listas y
continuo desplazamiento experiencias.
en Primer lugar, en continuo desplazamiento.
Esto se ha convertido en una táctica común en las noticias de los sitios relacionados en el último par de años. Aquí es donde usted se desplaza hacia abajo una
artículo y como llegar a la parte inferior de un nuevo artículo en el que se representa. Esta técnica fue realmente nació fuera de los medios sociales
como Twitter y Facebook que permite desplazarse a través de post tras post hasta que esté bien después de su hora de acostarse.
Usted puede utilizar IntersectionObserver para ver un elemento, quizás el último párrafo o dos para saber cuando el lector
está terminando el artículo. Como esos inferior de los elementos de desplazamiento en vista de que usted puede utilizar fetch para obtener el siguiente artículo y
añadir a continuación del artículo actual. Usted también desea utilizar la API de historia, que voy a cubrir a la brevedad,
actualización de la URL.
El otro escenario es la lista de índices, como puedo configurar mi blog páginas del índice. Cada página muestra los 20 tarjetas o
entradas de blog. En la parte inferior hay un \” estándar de paginación sección con enlaces a las páginas anterior y siguiente
por el número.
En el continuo desplazamiento escenario de Google no se disparará el próximo artículo. Así que acaba de ser conscientes de esto.
en Lugar de eso puede que desee de la lista de artículos relacionados, como puedo hacer en este sitio, debajo del artículo. Si usted realmente desea un
navegación continua experiencia puede ocultar los artículos relacionados detrás de un elemento noscript utilizando la técnica que
se describe anteriormente.
Para la búsqueda de Google sugieren crear una gran página con todos los enlaces que se indican. Puede utilizar una etiqueta canónica a punto para
esta primera página de cada página de índice. De esta manera Google no voy a tratar de indexar estas páginas, que ofrecen poco real
valor de búsqueda se refiere.
el Uso de la API de Historia
La Historia de la API y no tengo una gran historia, aceptar que es un poco la lengua en la mejilla, pero cierto. Yo, personalmente, he
no utilizar esta API ya que mi primera experiencia con esta API, hace casi 7 años, fueron terribles.
Últimamente he estado pensando de nuevo ya que Google la ha recomendado en varias de las últimas orientaciones artículo. Y he
para admitir esta segunda vez se siente \”mejor\” y útil.
yo no\’ contaminar con mi experiencia inicial, pero la cobertura de lo que significa hoy en día.
he mencionado a utilizar en el continuo desplazamiento de la sección debido a que Google recomienda utilizar en este escenario. Pero si
usted está conduciendo sola página de experiencias de aplicación también debe utilizar esta API.
=> Insertar de la barra de direcciones gráfico
La principal ventaja que ofrece es la capacidad para cambiar la dirección URL en la barra de direcciones sin la activación de un servidor
solicitud que hace un completo recarga de la página. Funciona como el hash fragmento de la técnica, sino que utiliza un compartible
Dirección URL.
En el ejemplo de código se puede ver la historia pushState método tiene tres parámetros: el estado, el nombre y la dirección URL. Para nuestro
a los efectos de que podría pasar null para los dos primeros parámetros, la dirección URL es la importancia del valor.
Cambiar la URL aquí cambia la dirección URL en la barra de direcciones, pero, como he mencionado no cause una solicitud para el servidor.
En un continuo desplazamiento escenario que tendría que hacer una llamada AJAX en el fondo e inyectar el código HTML resultante en la
DOM, justo debajo del actual artículo o elemento. Después de cambiar la dirección URL que el usuario podrá ver la dirección real a la nueva
artículo y si comparten la URL será un enlace directo a la página del artículo.
asegúrese de que la URL que se pasa el método pushState es el vínculo real con el nuevo artículo!
Usted también querrá asegurarse de que el IntersectionObserver código de devolución de llamada activa una actualización en cualquier momento un elemento de destino ¿
desplácese a la vista activa para cambiar la dirección URL para que coincida con el elemento directo de la página. Por ejemplo, si yo se desplaza hacia arriba en la
página.
a Lo que Google realmente empujando hacia la está usando una URL real, pero un JavaScript impulsado por la URL. En el continuo desplazamiento
escenario cuando la IntersectionObserver desencadenantes puede cargar el nuevo artículo y cambiar la dirección URL de forma dinámica. Ahora
el usuario se vea el nuevo artículo de la URL y podría volver a cargar la página.
Ahora que su Url en la sincronización de Google y verás la URL directa cuando se encuentra enlaces, etc.
los Guiones de Carga Según sea Necesario
Si me conoces sabes que me recomiendan usar como poco de JavaScript como sea posible. Por el contenido de sitios como este me puede
a menudo salirse con la 15kb o menos después de la compresión. Pero las aplicaciones web pueden volar tan rápidamente.
Entonces, ¿cómo mantener exceso de JavaScript de explotar la experiencia de usuario?
en Primer lugar, utilice sólo lo que realmente necesita. Por ejemplo, Netflix cortar el promedio de tiempo de render 50% después de la eliminación de Reaccionar de su front-end y
limita al procesamiento del lado del servidor (SSR).
Pero, ¿qué acerca de aquellos tiempos donde usted necesita una unidad a la biblioteca de su experiencia en la aplicación?
Carga cuando es necesario y sólo cuando son necesarias.
Esto requiere un poco de delicadeza, pero también puede hacer que su experiencia de usuario mucho mejor, lo que debería mejorar la satisfacción del cliente y
de retención, mientras que la reducción de la mesa de ayuda de llamadas.
¿Quién no quiere que los Kpi?!
yo uso esta técnica para cargar todos mis scripts, yo lo llamo el inicio de la experiencia. Pero se puede extender a la carga perezosa
los guiones de la demanda.
Aquí está el script, y no, yo no la cree, la Chrome equipo originalmente compartido:
he reducido a sólo cómo cargar la IntersectionObserver polyfil ya que he revisado en este artículo. Pero el truco
es para crear una matriz de secuencias de comandos que desea cargar con cada uno de ellos en un plazo razonable en el fin de gestionar las dependencias.
Nota: la secuencia de comandos utiliza el Bigote, la notación, por lo tanto el {{{comandos}}}
en la parte superior de la secuencia de comandos para inyectar la página del script de dependencia referencias.
Usted no necesita preocuparse acerca de la carga asíncrona o diferir debido a que estos scripts se cargan en la demanda, que debe ser
después de que el núcleo de contenido es mostrado.
La principal esencia de la lógica aquí es la creación de un elemento de secuencia de comandos para cada secuencia de comandos y anexarlo a la DOM. Una vez
se anexa el navegador carga el script como si fuera parte de la inicial de marcado.
yo uso esta técnica para cargar polyfils si y cuando sean necesarios. Pero puedes utilizar esta técnica para cargar
secuencias de comandos como usuario de la acción dicta. En lugar de un polyfil quizá su aplicación necesita una biblioteca, pero no se hasta que un
cierto criterio se cumple o una acción del usuario se hace.
Ahora, en lugar de retrasar el momento de la primera interacción por 1-5 segundos (o más) se puede descargar de que el rendimiento y la
UX golpear hasta que sea necesario. O tal vez usted utilice esto para cargar scripts cuando el subproceso de interfaz de usuario está inactivo (el usuario no es
activamente haciendo nada) por lo que no interfiere con la experiencia real del usuario.
conclusión
Hay numerosas razones por las que carga diferida contenido de la página le ayuda a crear una mejor experiencia de usuario. El principal
la ventaja es un tiempo más rápido para la interacción o la mejora de la velocidad de la página. Pero la correcta administración de carga diferida puede dar
SEO y UX ventajas también.
Algo que yo no cubierta en el artículo es que usted también puede hacer que tu contenido dinámico más accesible para las personas con
discapacidad mediante el uso de lectores de pantalla.
Google recompensa más rápido las páginas web con mejor ranking, pero sólo si sus arañas pueden acceder a los perezosos contenido. A
ello tendrá correctamente el código de sus páginas para hacer perezoso contenido disponible incluso si JavaScript no está activado,
que es el caso por defecto para las arañas de motor de búsqueda.
Intersección Observador y la Historia de la API se puede utilizar para ayudar a manejar la carga de contenido y elementos según sea necesario
sin romper su experiencia de usuario. Estas herramientas pueden añadir complejidad a su sitio y usted debería comprobar o cerciorarse de
estos cambios no romper la experiencia de usuario.
Así, ayudar a su sitio a perder algo de peso, atraer a más visitantes y ganar un mejor posicionamiento en las búsquedas utilizando perezoso cargado de contenido.
This content was originally published here.