AMP es el proyecto de Google y varios partners (entre los que se encuentra WordPress) para ofrecer a los usuarios páginas ultra rápidas. Son las siglas de Accelerated Mobile Pages, un proyecto que empezó a gestarse en 2015 y que cada vez se está extendiendo más.
Es la alternativa de Google a FIA (Facebook Instant Articles) y Apple News. El usuario es impaciente, quiere el contenido y lo quiere ya, de ahí estas iniciativas para crear «webs» ultra rápidas. Entrecomillo webs, porque realmente estas páginas en principio (a día de hoy) suelen utilizarse únicamente para los artículos y/o noticias.
La filosofía de AMP pasa por desprenderse de muchos elementos. Sin entrar en mucho detalle y generalizando, no se cargan hojas de estilos (el CSS es mínimo y va en línea), se prescinde de casi todo el javascript, tiene un marcado HTML especial, y se alojan en servidores de Google. Es decir, se carga lo mínimo y desde servidores optimizados, por lo tanto el resultado es que la web (el artículo) carga a una velocidad asombrosa.
Disclaimer
Personalmente no me termina de convencer AMP por lo que implica: un nuevo marcado HTML propio de Google, fuera de los estándares de W3C, se cachea en y se sirve desde los servidores de google, pierdes la navegación por el resto del site, etc…
Pero no es menos cierto que en el corto plazo puede darte beneficios en cuanto al posicionamiento en dispositivos móviles y conseguir más tráfico y más visibilidad de tu contenido.
El cortoplacismo que marca nuestra vida más de lo que debería.
Puedes activar AMP en WordPress simplemente instalando el plugin AMP creado por Automattic. De base viene con unas opciones de configuración muy básicas: Color del texto de la cabecera, fondo de cabecera y color de enlaces y esquema de color.
Una vez instalado el plugin simplemente debes esperar a que Google empiece a indexar estas páginas. Pasados unos días podrás observar que aparecen en los resultados de búsqueda desde dispositivos móviles las páginas AMP de tus contenidos
Si pinchas en estos enlaces irás a la página que tiene cacheada Google en sus servidores. No obstante puedes acceder a la URL real de tu sitio, e incluso ver la URL de la versión AMP de tu artículo directamente desde tu sitio. Me explico:
- URL original: https://desarrollowp.com/blog/tutoriales/carga-condicional-js-css-mejorar-rendimiento-la-velocidad-carga/
- Versión AMP en tu sitio: https://desarrollowp.com/blog/tutoriales/carga-condicional-js-css-mejorar-rendimiento-la-velocidad-carga/amp/
- Versión AMP en Google: https://www.google.es/amp/s/desarrollowp.com/blog/tutoriales/carga-condicional-js-css-mejorar-rendimiento-la-velocidad-carga/amp/
AMP es tan minimalista (esa precisamente es su filosofía) que puede resultar incluso un poco soso. Probablemente te gustaría poder personalizar un poco el diseño de estas páginas. Hay plugins que te permiten un poco más de maniobra como PageFrog, pero si lo que realmente quieres es poder adaptarlo un poco o que no sea tan escueto es mejor que lo hagas tu mismo
Personaliza las plantillas por defecto de AMP
Lo primero es que instales el plugin mencionado anteriormente y crees una carpeta llamada amp en la carpeta de tu tema. A continuación copia los archivos que quieras editar y que están en la carpeta templates del plugin a la carpeta que has creado en tu tema.
Para este ejemplo voy a modificar las siguientes plantillas:
- footer.php
- header-bar.php
- single.php
- style.php
Lo siguiente es decirle a WordPress que utilice nuestros archivos que vamos a modificar en lugar de los que están en la carpeta templates del plugin de AMP. Para esto escribiremos en el functions.php:
<?php
// Para detectar si está instalado el plugin. For use on Front End only.
include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
// Comprobamos que el plugin AMP esté activo
if ( is_plugin_active( 'amp/amp.php' ) ) {
define('MY_CUSTOM_AMP_PATH', get_stylesheet_directory().'/amp');
add_filter( 'amp_post_template_file', 'my_custom_amp_templates', 10, 3 );
}
// Incluímos nuestras propias plantillas
function my_custom_amp_templates( $file, $type, $post ) {
if ( 'style' === $type ) {
$file = MY_CUSTOM_AMP_PATH . '/style.php';
}
if ( 'header-bar' === $type ) {
$file = MY_CUSTOM_AMP_PATH . '/header-bar.php';
}
if ( 'footer' === $type ) {
$file = MY_CUSTOM_AMP_PATH . '/footer.php';
}
if ( 'single' === $type ) {
$file = MY_CUSTOM_AMP_PATH . '/single.php';
}
return $file;
}Lo que hacemos primero es comprobar si el plugin AMP está activado. En este caso definimos una constante con la ruta de nuestra carpeta AMP de nuestro tema. Utilizamos el filtro amp_post_template_file para sustituir las rutas de los archivos del plugin por los nuestros personalizados.
Ahora lo único que te quedaría es modificar los archivos footer.php, header-bar.php, single.php y style.php según tus necesidades. Lo único que debes tener en cuenta es que AMP tiene un marcado específico y algunas tags de HTML no están permitidas. Tienes información más detallada de todo esto aquí.
Puede que también te interese
