La Gran Mortandad: Súper truco hacker SEO, WordPress y PHP

La velocidad de carga de las webs en los dispositivos móviles siempre se resiente un poco; claro, no es lo mismo un ordenador de escritorio que un smartphone. ¿Tienes una web que va lenta en los smartphones? Una buena forma de comenzar tu investigación es con PageSpeed Insights de Google, así obtendrás algunas pistas sobre los motivos que hace que tu web sea tan lenta como el caballo del malo de las películas del Oeste.

Ingredientes

  • Conocimientos básicos de PHP
  • Un poco de CSS media queries
  • Tienes que saber montar un child theme en WorPress

Ingredientes

¿Por qué es un tip SEO?

Es un tip SEO porque aprenderás a acelerar la velocidad de carga de tu WordPress en los smartphones. Y ya sabes que a más velocidad, mejor para el SEO.

¿Cómo puedo montar un child theme en WordPress?

En Internet ya hay un montón de recursos que explican cómo puedes montar un tema hijo para WordPress, así que a continuación te dejo algunos enlaces para que investigues un poco por tu cuenta.

Por qué este post se llama La Gran Mortandad

¿Has oído hablar alguna vez de la Gran Mortandad? Se trata de una extinción masiva que sucedió en nuestro planeta Tierra hace unos 250 millones de años, con la que se extinguieron el 95% de las especies del planeta.

Pues bien, con este truco van a desaparecer de las SERP tus competidores SEO que no saben qué es un if PHP, ni han oído hablar de los while. Cuando quieran darse cuenta, se verán fosilizados en Internet, pidiendo ayuda a Chicote, pero tú estarás en la primera SERP de Google.

Dinosaurios SEO

Quiero saber el truco…

Bueno, sin más preámbulos, ahora mismo voy a compartir contigo el truco del almendruco. La idea es la siguiente.

Resulta que tienes una plantilla WordPress con una barra lateral derecha bastante pesada, con muchos widgets; por poner algunos ejemplos: un Twitter timeline, un montón de botones sociales, un plugin bastante pesado, etc. Sin embargo, dicha barra no se muestra en los dispositivos móviles.

En consecuencia, para agilizar la velocidad de carga de los smartphones, vamos a cargar la barra derecha solo en las versiones de escritorio y en los tablets; los smartphones no cargarán esa barra lateral derecha tan pesada, que es como un dinosaurio de lenta.

Te explico el truco...

Explicación del tip

Las media queries de CSS están muy bien, pero uno de los inconvenientes que presentan es que el servidor tiene que enviar todo el HTML, el CSS y el JavaScript a todos los dispositivos por igual, sin distinción, y luego estos, con lo que reciben, se encargan ellos mismos de mostrarse correctamente en la pantalla.

Por lo tanto, muchas veces los smartphones recibirán exactamente la misma información que los desktops, pero como la velocidad a la que operan es significativamente más lenta, la velocidad de carga se ve afectada.

Para entender bien cómo funcionan las media queries, y qué alternativas existen, te recomiendo que eches un vistazo a este hilo de debate de Google titulado Recommendations for building smartphone-optimized websites. Tiene ya tres años, pero el debate sigue abierto por miles y miles de desarrolladores de todo el mundo que comparten ahí sus experiencias y su know-how.

Otro recurso imprescindible es la Guía para móviles dirigidas a webmasters, de Google.

Personalizando nuestro child theme de WordPress

Entonces lo que vamos a hacer en nuestro tema hijo es crear una carpeta vendor, como muestra la siguiente figura.

Personalizar tema hijo de WordPress

Allí instalaremos la clase PHP Mobile Detect, para poder saber en el server qué tipo de dispositivo está llevando a cabo las solicitudes, y poder servir contenido diferente a los smartphones, tablets y desktops desde el servidor.

Luego, justo al comienzo del script sidebar.php, preguntaremos qué tipo de dispositivo está accediendo a nuestro WordPress, y si es un smartphone, entonces no ejecutaremos ninguna lógica para pintar la barra lateral derecha.

O dicho de otra forma, en vez de limitarnos a servir toda la barra y luego esconderla con las media queries, sencillamente no calculamos ni servimos ningún widget: Twitter timeline, plugins que tengas instalados en la barra derecha, etc.

¡Espero que el tip de hoy te sirva de ayuda y lo compartas con tus amig@s!

0 comentarios

¿Me dejas un comentario? ¡Gracias!

Deja un comentario

Los campos obligatorios están marcados con *