10 Optimizaciones SEO de Accelerated Mobile Pages (AMP)

Experto SEO y posicionamiento WEB

Accelerated Mobile Pages (AMP), es una iniciativa destinada a mejorar la experiencia del usuario cuando navega con un dispositivo móvil (tablet/smartphone). Es una iniciativa open source.

Se basa en mejorar la velocidad de descarga de las páginas, minimizando los recursos que necesitará el dispositivo, tanto a nivel de CPU, como de memoria, como del ancho de banda de Internet.

 

La máxima de AMP es que, ante todo, una página AMP ha de ser rápida, de ahí viene lo de “Accelerated“. Y para esto hemos de evitar todo aquello que la haga lenta.

Esto quiere decir que que hemos de suprimir todo aquello que pueda ralentizar la visualización de una página web AMP, y para ello no nos queda más remedio que prescindir de algunos elementos y técnicas que usábamos hasta hoy.

 

Todos los SEO sabemos que la velocidad de carga de una página web es uno de los factores importantes de posicionamiento web en el SERP de Google. Y algunos sabemos que este factor es muchísimo más importante cuando estamos orientados al ‘mobile‘.

Podemos seguir algunas de las directrices AMP para realizar optimizaciones SEO on-page en nuestras páginas web y mejorar su posicionamiento web.

Técnicas SEO usando AMP para POSICIONAMIENTO WEB

  1. Scripts externos asíncronos.
    Todos los javascripts que no estén en el mismo servidor de la página, se han de cargar de manera asíncrona. Esto evita el bloqueo del renderizado de la página hasta que se hayan cargado e interpretado todos los scripts.
  2. Descarga asíncrona de contenido externo.
    Al igual que en el anterior caso para evitar el bloqueo del renderizado la carga de contenido mediante <frame />, <iframe />, <embed />, como vídeos, audios, páginas externas, se ha de hacer de manera asíncrona.
    Hemos de de vigila especialmente los “document.write” que usualmente sirven para cargar estos elementos dinámicamente.
  3. Dimensiones predefinidas.
    Hemos de indicar las dimensiones exactas para cada elemento HTML posicionable o con dimensiones, para cada <img />, <div />, etc. Ya sea usándo los atributos width/height o mediante el “style=’width: px; height: px;’“.
    De esta manera el dibujado de la página se puede hacer sin tener que esperar a cargar los contenidos para obtener su tamaño.
  4. Una sola petición por página.
    Cada petición al servidor web gasta tiempo adicional, así que pondremos en línea los estilos CSS, el código Javascript, fonts, etc.
    Esto usualmente lo conseguiremos con plugins de WPO que se encargan de insertar cada <script /> o <style /> en la página que lo necesita.
  5. Optimizar el CSS y el Javascript.
    Hemos de cargar para cada página solo los estilos CSS y clases Javascript necesarias para dicha página, y además compactando su código.
  6. Ocultar la visualización incompleta.
    Hasta que tengamos todos los elementos a visualizar cargados hemos de ocultar con un <body style=”opacity: 0″> la página. Esto es especialmente importante para los tipos de letra que hemos de cargar.
  7. Reducir el número de re-cálculos de estilo.
    Evitar los efectos que cambian el tamaño de los elementos o fuerzan algún tipo de desplazamiento (scroll) del elemento o de la pantalla.
    O la manipulación del DOM añadiendo o quitando nodos, cambiando estilos, y de nuevo mantener una vigilancia por los “document.write” y las cargas por AJAX.
  8. Eliminar efectos que no se puedan realizar por la GPU
    Aquellos efectos mediante funciones a medida, mosaico, circulares, etc, sustituirlos por efectos menos espectaculares pero que requieran de menos cálculos en la CPU y ahorran memoria, al estar realizados por la GPU usando su buffer de ventana, como son “transform” y “opacity”.
  9. Cargar recursos según su uso.
    Haciendo que los javascript y CSS que se usan en la parte superior de la pantalla (cabecera e inicio de body) estén disponibles antes que los que van a cargarse más abajo (final del body y pié de página).
    Dar prioridad de carga a los elementos más importantes.
  10. Perseguir un efecto de Carga Instantánea.
    El objetivo de toda estas optimizaciones es el de conseguir que el usuario que está visualizando la página en un dispositivo “mobile” tenga la sensación de que la página web carga de manera instantánea.

El objetivo de todas estas optimizaciones WPO son para lograr un

Efecto de Carga Instantánea

que tendrá un efecto secundario, el de hacer una carga y visualización más rápida de la página, y por tanto, una mejora del posicionamiento SEO on-page para dicha página.

Dejar un comentario

Para comentar has de leer y aceptar la Política de privacidad.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.