¡Feliz navidad afable lector! ¡Feliz navidad educada lectora! Con Papa Noel trasnochado y secuestrado en mi habitación y los reyes a la vuelta de la esquina en B30 no paramos…
Hoy charlamos del Page Speed. ¿Es útil para posicionamiento web en buscadores? ¿Realmente mide la velocidad de tu página? Quédate… el día de hoy tenemos un posicionamiento web en buscadores-artículo divertido 😄
Lo vamos a redactar en un tono absolutamente atrevido por ser las datas que son. Mas ya antes que nada… ¡dale al play!
Índice del artículo
En el último post del año traigo al que es uno de mis mejores amigos a día de el día de hoy.
En este momento, por circunstancias de la vida, muchas veces mis mejores amigos acostumbran a ser también las personas con más talento dentro de sus disciplinas o bien como poco muy buenos… son realmente buenos y podría decir que todos configuran el
equipo B30.
Jaime Sempere ha sido programador de HP y de varias startups con gran capital en el ecosistema emprendedor español.
Del mismo modo, es alguien con quien conecto pues tiene exactamente la misma manía que yo, tan insana como romántica: think big o bien lo que es lo mismo…
piensa en grande.
Está creando un Content Management System que competirá con el mismísimo Wordpress (aunque él afirme que no y pese a las incontables discusiones que hemos tenido sobre ese tema): Mishell.
Fue el creador del pluginjunto conmigo, el que pusimos gratis a disposición de toda la comunidad.
En terminante, es capaz de hacer que el código «hable», algo que constato cuando voy a verlo a su piso de soltero en Zaragoza y miro sus monitores, hasta arriba de numeritos que no alcanzo a entender, sobre una mesa llena de Redbulls vacíos y alguna copa de Baileys a medio acabar por mi parte.
Código es poesía. Sempere… dales caña en el último post del calendario dos mil dieciocho de Blogger3.0.
¡Nos vemos a la vuelta lector!
Nadie lo sabe, mas una vez tuve que salvar al Universo. Recolecté las cinco gemas del infinito, surqué dos galaxias, negocié con Estela Plateada y también imploré ante Galactus del otro lado del agujero negro de una supernova.
Pues bien, todo aquello no fue nada en comparación con la tarea que tengo hoy entre manos:
escribir sobre el Page Speed.
Y tú querido lector, lo sé (de la misma manera que supe cómo hacer reír a Galactus – y salvar al universo – con un simple chiste de Gila), no paras de preguntarte cosas cómo:
Bueno, pues dale un sorbito a la botella de ron, arremángate y coge el bisturí que nos toca diseccionar al Page Speed.
Empezando por la última, servidor, además de artista libre, estrella malograda del rock and roll y un amante irregular con momentos de auténtico genio mezclados con otros de mediocridad, también guarda en el armario un traje de programador, justo a la vera de las mallas de Spiderman.
Si has utilizado el plugin, posiblemente habrás visto mi nombre por ahí junto al imitador más grande de Dani Martin que se está perdiendo España (si quieres sacarle los colores a Dean, puedes preguntarle por esto abajo en los comentarios).
Pero ya antes, déjame adelantarte. No, amigo, no hay nada como las bolas de dragón.
Como pequeño aparejador de Matrix, me agrada que haya belleza en el código. Que sea simple, fácil, como un jardín Zen en el que cada cosa está donde debe estar y hace lo que debe hacer.
Por eso, creo que puedo comprender un poco al incomprendido Google Page Speed de algún modo… lo que no desea decir que no sea consciente de la enorme importancia desaforada y errónea que se le da a día de hoy.
Con los dos puntos de vista contrapuestos presentes… voy a aportar mi opinión como programador parafílico de los bits.
¿Preparado para saber lo que desea Google? Lo único que Google te solicita, es una pequeña, pequeña cosa de nada:
–
Todo.
(Ves cómo las bolas de dragón irían muy bien aquí).
Google tiene una idea (acertada mas algo alejada de la realidad) de cómo tendría que ser la página perfecta, en términos de optimización (ojo, hablamos de optimización y no de velocidad ).
➔ El Page Speed no te señala verdaderamente la velocidad cuantitativa de tu página . No. Nones. No. Repito no. Para el del fondo de la clase. Que no. Para los que vengan al día siguiente y se les haya olvidado lo que dimos ayer. Que no.
Lo que te afirma el Page Speed es el grado de mejora que tiene tu página respecto a esa versión ‘perfecta e idealista’ que podría ser tu página.
En otras palabras, si tu página
saca un 80en Page Speed, no significa necesariamente que sea más lenta que una que
ha sacado 90, sino tienes más margen para la mejora en lo que se refiere a optimar tu página.
Tu página podría sacar un cien y otra página de noventa aún podría ganarte en velocidad como Flash de MARVEL con sobredosis de Redbull.
Y no solo eso. Sus criterios para determinar la puntuación, en ocasiones son un tanto absurdos (ver más adelante el caso desgranado de dinosaurioss.com). posicionamiento seo en zaragoza /p>
Pero no me creas solo a mí. Los mismos chicos del muy conocido complemento WP-Rocket, escribieron un buen artículo () donde con atrapas incluidas mostraban esta gran incongruencia:
A continuación, te dejo una atrapa extraída del artículo en cuestión.
Señalar, además, que el lugar rápido aún pesa más que el lento (casi 900Kbs frente a 431kb), con lo que su velocidad aún tiene más mérito en tanto que carga el doble de contenido. Mira cómo aún así Google le da una mala puntuación:
Sitio rápido con mala puntuación (izquierda) versus sitio lento con buena puntuación (derecha)
Para no soltarte rollos, te he preparado unas tarjetas a código para que puedas consultar rápidamente los criterios más sonados de Page Speed.
Las tarjetas señalan 4 puntos:
Y como chascarrillo te contaré más adelante, cómo el tema de haberme currado estas tarjetas (las diseñé y programé expreso para este blog post) me hicieron provocar una pifia con la que pasé más tensión que cuando Galactus me miraba con ojos tiernos.
Aquí, algunos de los ejemplos más comunes por los que Google Speed intentará sacarte los colores.
Haz clic en«
rotar» sobre las tarjetas para tener información más completa.
Significado:Eliminar los saltos de línea y espacios de los ficheros CSS y de JS resultando ficheros de tamaño más liviano
Deberías ‘minificar’ tus archivos siempre y cuando puedas, tu página web funcionará igualmente bien, usando archivos más pequeños
Rotar
Importancia:Media-baja
Facilidad de implementar:Fácil mas en algunos casos puede presentarte inconvenientes de visualización.
Plugins:WP Rocket, W3 Total Cache
Volver
Significado:Es un método de comprimir tus archivos (además de minificarlos) a fin de que ocupen menos, y por ende tu página cargue antes.
Rotar
Importancia:Media-baja
Facilidad de implementar:Cualquier servidor de el día de hoy en día podrá servir archivos GZIP, para ello puedes alterar el .htaccess o bien utilizar plugins
Plugins:WP Rocket, W3 Total Cache, WP Fastest Cache…
Volver
Significado:Bueno, creo que se autoexplica, ¿no? No seas gañán/gañana y toda vez que subas imágenes a WordPress comprímelas.
Rotar
Importancia:Alta. Puedes ahorrar mucho comprimiendo adecuadamente las imágenes.
Facilidad de implementar:Simplemente ya antes de subir una imagen, comprímela. Te invito a la herramienta on line y gratuita
Plugins:Como opción alternativa a TinyPng (que te la recomiendo frente a instalar más plugins), te dejo.
Volver
Significado:Se refiere a cargar los CSS críticos a fin de que tu página se vea bien primero, y postergar los que no sean críticos, para así no bloquear la carga de tu página.
Rotar
Importancia:Baja
Facilidad de implementar:Complicado. Es un poco utopía intentar conseguir algo así si el tema no está hecho a la medida para esto.
Plugins:El plugin WP-Rocket sí que me llegó a hacer este punto bien en un blog sin mayor inconveniente. No sé qué clase de magia negra usará, mas lo hizo bastante bien.
Volver
Significado:Esto es lo mismo que hablábamos con los archivos CSS, pero para los archivos de JavaScript. Es decir, desplazar archivos que se cargan en el header, al final de tu página, para que no bloqueen la carga.
Rotar
Importancia:Baja
Facilidad de implementar:Lo mismo que en el punto precedente, no es sencillo decidir o saber qué archivos JavaScript son precisos en el ‘header’ y cuáles puedes cargar más adelante.
Plugins:Nuevamente el plugin WP-Rocket se comportó bastante bien en este punto en una de las pruebas que hice en un weblog.
Volver
Significado:Lo que hace la caché es que cuando una persona navegue por tu weblog, no tenga que regresar a cargar los archivos comunes de varias páginas, y emplear una versión anteriormente guardada de ese archivo (básicamente serán ficheros JavaScript y CSS)
Rotar
Importancia:Baja
«A poco que uses algún plugin con recursos externos, te vas a localizar este error. No siempre y en todo momento puedes precisar la caché de navegador (scripts externos). Así que solo queda resignarse y hacer oídos sordos»
Si incluso así quieres intentarlo
Volver
Ahora, incluso el análisis del Page Speed, te sugiere que emplees formatos de ‘nueva generación’ como JPEG dos mil, JPEG XR y WebP. Pero ya basta de charla técnica, hablaremos de Romuald, de Dean y de Amazon. Que sí hombre, que sé que sin un poco de salseo os dormís.
Disclaimer: La narración que sigue a continuación es pura ficción y cualquier semejante con la realidad es pura coincidencia.
Los 3 encapuchados con túnica se reunieron en el lugar acordado, a la hora señalada, bajo la tenue luz de unas candelas al filo de consumirse. Ni móviles, ni nombres, ni nada que sirviera para registrar aquella reunión en las sombras, como dictaban las normas.
Con gestos ceremoniosos, hicieron el saludo que les identificaba como miembros de aquella secta cuyo nombre no se puede pronunciar.
–
No puedes hacer eso, hermano lector. – afirmó el encapuchado con voz aterciopelada y pausada.
– ¿No queréis que la gente sepa la verdad? ¿No sois los que lucháis contra el sistema y por despertar a la gente?
– Claro que sí, mas no a costa de dispararnos en el pie. ¿Recuerdas que aún estás en período de prueba, hermano? – su voz contrastaba con la de sus vídeos histriónicos. Era calmada y también hipnótica, al mismo tiempo que firme.
– Siempre me gustó el peligro. Y la verdad. Dejarme llevarla a más gente. Dejarme enseñar vuestras vergüenzas para persuadirles de una vez. A fin de que despierten, se olviden del Page Speed, y se centren en otras cosas más importantes, como batallar por sus sueños y un buen enlazado interno.
Los 2 interpelados cruzaron miradas por un instante, en el que parecieron decirse todo. Finalmente acordaron:
– Está bien, mas no olvides que estás a prueba. A ver cómo sale esto. Si luego tenemos inconvenientes, habrá consecuencias.
Y ambos se alejaron del lugar con exactamente el mismo sigilo con el que habían llegado.
El aspirante (que ahora lucía una media sonrisa maquiavélica) se quedó en la penumbra, frotándose las manos pensando «mah, pero qué post más rico y salsero voy a escribir»
Recuerdo cuando Romuald Fons (le debo una entrevista, caballero, cuando deje al Whiskey, el tabaco y las señoritas que cobran por horas, palabra de borracho) presentaba su plantilla Orbital, en la que llegó a enseñar un
Page Speed 100 de 100.
¿100 de cien con Wordpress? Mis respetos, hermano. Creo que lograr un cien de 100 con Wordpress es bastante jodido (detalles más adelante – pero qué manera más zafia de generarte intriga y no soltarte, eh amigo lector -).
Pero si vas, por poner un ejemplo, a su página de aves exóticas, te puedes localizar esto:
Y ahí la tienes, igualmente
posicionada en primer lugarpara muchas de sus palabras clave con gran volumen de búsqueda.
¿Es Romuald tonto? ¿Es Orbital una mierda? ¿Van todos los perros buenos al cielo? No. Ni muchísimo menos. Y sí (junto con los caballitos ponys y los osos amorosos).
Estoy seguro de que Romuald -si quisiese- podría subir esa puntuación hasta un 100 o casi un cien, mas simplemente creo que no se ha preocupado aquí (y para mala suerte de él, lo hemos cogido).
Ha pasado un tanto del Page Speed,
centrándose en las cosas que realmente importanpara posicionar una página.
Lo como me recuerda el caso de otro posicionamiento SEO quizá todavía «aún más guapo» que Romuald Fons.
Me estoy refiriendo a ese monstruo de las SERPS. A esa fiera de las keywords. A ese bestia parda del enlazado interno. Al crack del Inbound Marketing. Un gigante, que digo un gigante, un titán, un semi dios, un hijo bastardo fruto de una salvaje orgía entre SemRush, Ahrefs y Sixtrix… el gran… Dean Romero.
Ahí estaba (y ahí sigue) Dinosaurioss.com con perfección posicionada. Adjunto la atrapa de SemRush del mismo:
Posicionando una web sin preocuparnos del Page Speed
Resulta que todo ese trabajo de posicionamiento lo hizo Dean, sin tocar, ni preocuparse lo más mínimo sobre el Page Speed.
Cuando Dean se propuso sacar en venta exactamente la misma plantilla que había construido a medida para ese nicho, nos pusimos a mirar el Page Speed y sorpresa, sorpresa… sacaba unos 40 y pocos puntos en el Page Speed.
Actualmente, tras instalar y ajustar el plugin WP-Rocket (para aplicar
lazy loadingde imágenes y minificación de CSS y Javascript), hemos conseguido subirla hasta un 78:
Y según Google Page Speed estos son nuestros cuatro pecados capitales cometidos para no llegar al 100:
Te los desgrano (y prácticamente desmonto) uno por uno. Atento a lo tiquismiquis y tocapelotas que puede ser el Page Speed:
Aún no es algo banal el empleo de webP en WordPressy, a mi juicio, hasta que Wordpress no incluya soporte nativo del formato, mas sobre todo, hasta que la mayoría de los navegadores no sean compatibles, creo que es mejor por el momento no hacer experimentos con el formato.
Aún no es algo banal el empleo de webP en WordPressy, a mi parecer, hasta que WordPress no incluya soporte nativo del formato, pero sobre todo, hasta el momento en que la mayoría de los navegadores no sean compatibles, creo que es mejor por el momento no hacer ensayos con el formato.
No quería dejar de mencionar a Amazon (este no acudió a la reunión nocturna de la secta, mas nos puso un fax diciendo que adelante con sacar sus vergüenzas también).
El gigante Amazon, con posiblemente una de las mejores infraestructuras informáticas de todo el mundo (no en vano, la revende como servicios en la nube) saca un ‘impresionante’
33.
Y tú quejándote de que no llegas a 100
¿Hacen falta más comentarios? Si a Amazon no le quita el sueño su Page Speed… ¿por qué te lo va a quitar a ti?
Déjame contarte mi metida de pata y un momento de agobio infinito que pasé mientras que escribía este blog post.
Cuando empecé el post, estuve diseñando y programando las tarjetas rotatorias que has visto al comienzo.
Parte del trabajo consistía en ajustar el CSS, para eso utilicé la posibilidad que te da WP para añadir un CSS personalizado. Fíjate en la pinta que tiene el botón para guardar los cambios:
Ese «bonito» botón de «Publicar»
El proceso consistía en ir haciendo ajustes continuamente y pulsando el botón para guardar. Adicionalmente, algunas veces también guardaba el borrador del artículo.
Básicamente el proceso era: ajuste del CSS, pulso en publicar. Toquecillo en el post guardo boceto. Así mil veces.
Recuerdo que el día anterior (ya antes de ponerme con las tarjetas), mientras escribía el comienzo del post, estuve pensando:
«ostia, como le dé a Publicar blog post en lugar de Guardar boceto la puedo liar parda».
¡Adivina qué pasó! Que en algún momento, en el ajuste número doscientos, mi mente ya solo veía botones azules para publicar, y ¡plas!.. Ciertamente, la líe parda y le di a publicar al blog post (este post) en borrador y sin formato alguno casi.
50 minutos estuvo publicado en la portada de Blogger3cero, un artículo sin imagen asociada, con un título de mierda temporal y con divagaciones de un pseudo escritor borracho que aún buscaba y experimentaba con el tono del artículo.
Cuando me di cuenta: sudores fríos, los huevos en la garganta, y una risa de ido me atacaron a la vez. Pensé «bueno no pasa nada, porque se haya visto un ratillo, además la mayoría de gente entra a artículos, ya antes que en la home… bla bla».
A los 5 minutos (cuando ya lo había puesto nuevamente en boceto) me llega un Whatsapp de Dean «
¿qué has hecho loco?«. «Están compartiendo por Twitter tu blog post sin terminar…» (ahí ya los huevos me hicieron en la garganta ‘ding, ding, ding!’).
Captura de mi liada parda en su esplendor
Afortunadamente, no me echaron de la secta y todo quedo en una buena metidita de pata de servidor sin mayor daño (salvo mi subida de tensión y un pensamiento de «pero qué burro eres» que aplaqué con media botella Jack Daniels).
Todo esto tuvo una buena cosa.
Un lector del weblog (David Joven, con una web muy guapa a propósito), dejó un comentario avisando del fallo.
Intercambié un par de correos con él para comentarle que sí, que trabajo con monos con ballestas en mi casa y uno había disparado una flecha en todo el botón de «Publicar» sin querer.
Y me comentó
algo interesante sobre el alojamiento de Raiola.
Resulta que habían migrado el software de sus servidores a un servidor más veloz (LiteSpeed frente al clásico Apache), para progresar las velocidades de carga (puedes leer más de esto en el enlace adjuntado al final del post).
Con esto, la propia página de David, había pasado de 80 a 95 en mobile y de 95 a 100 en Desktop (me comentó que por medio del complemento Autoptimize ya había logrado buenas puntuaciones en el Page Speed).
Así que este apartado es también para felicitar a Raiola por sus esfuerzos en tener unos servidores rápidos que satisfagan las necesidades de sus clientes del servicio.
Nota de Dean: comentario singular para Alvarito de Raiola Networks, que debe venir a verme a la capital española ya, ¡vuelve cabrón! Y a Martín de Raiola, que da a favorito en Twitter a cosas que no debería xD
Más allá de que Raiola pueda decir «que tío más salado» y me envíen un buen Whiskey (Álvaro, japonés si puede ser, por favor), no guardo ninguna relación con ellos ni nada similar, pero al César lo que es del César.
La anécdota es cien por ciento real, y creo que pegaba bien como chiste y prueba de que
tu hosting también puede influir en el Page Speed. Además, ya que lo pasé mal, así me resarzo, le doy sentido al momento de agobio máximum infinito y todo acaba teniendo sentido, y cuadrando como un puzzle cósmico.
Me vais a perdonar, mas jamás fui demasiado bueno con el copy de los subtítulos…
El problema de intentar optimizar y exprimir a fondo el Page Speed con una plataforma como Wordpress es (entre otros muchos)
su arquitectura de plugins.
Los complementos van añadiendo archivos JavaScript y CSS según estén programados. Esto te puede llevar a inconvenientes a la hora de (como hemos hablado) minificar o tratar de postergar la carga de estos ficheros.
Y ahí está uno de los problemas principales a los que te enfrentarás si te obsesionas con alcanzar el 100 del Page Speed con tu página de WordPress. Será difícil que llegues al cien sin ‘
romper algo‘ por el camino.
Mi consejo (caso de que desees jugar un poco a progresar tu Page Speed) es que pruebes algunos de los complementos mencionados. Te dejo una pequeña lista a continuación:
Muchas veces se achaca un mal Page Speed a una plantilla. Mas como has podido ver a lo largo de todo el artículo, la plantilla llega hasta donde llega. Prosperar tu Page Speed, casi siempre y en todo momento será cuestión de complementos .
¿Cuál es la oración cliché más repetida por los marketers después de la de «aportar valor» (arcada)?
Pues la de
«dame tu dinero a fin de que yo pueda vivir la vida de mis sueños», digo… «
foco,
foco,
foco«. ¿Te suena?
El Page Speed es una métrica con la que la gente se obsesiona, y sus efectos en el momento de posicionar, parecen bastante intrascendentes.
En la sección final tienes varios artículos.
Entiendo que a todos nos agrada tenerla cuanto más larga mejor. Por eso nos obsesionamos con esa métrica.
Y lo peor, es que al final, olvidarás «el foco»: el centrarte en cosas de tu web que importan un millón de veces más para posicionar una web que tener un Page Speed de 100 (trabajar los contenidos, la navegación/usabilidad, un buen enlazado interno… vamos todo lo que haga que el visitante continúe más rato en tu página).
Así que mi consejo es, si realmente decides ponerte a ajustar tu Page Speed, tómate como mucho una hora o bien 2 de tu tiempo, con una cerveza al lado, mientras que pruebas ciertos plugins, aprendes a configurarlos y juegas un poco a manosear aquí y allá a ver qué efecto van provocando.
Un placer, señores y señoras, y jamás me dejen de danzar
rock&roles:.
Jaime Sempere.
###
Créditos Blogger3.0 2018
Agradecimientos a todos y cada uno de los que habéis hecho mi trabajo posible este 2018: Merced a mi equipo B30, a Raquel Cabalga, a Marián, mi AV, a Jony Ive, mi asociado de Adsense, a Mijael, socio de Amazon, a mi letrado y amigo Raúl Florido, Edu Coromina, Pablo Suizo, Pedro, Indale y Marcos, mis traffickers, Raquel y Laura, mis articulistas estandarte, Ana Miller, mi hermano pequeño Emilio García, Sánchez podcaster, Óscar Fernández, Mihaela jefa editora de B30 y mi mejor amiga, Gaby y Jorge, buenos programadores y mejores asociados y amigos, Borja Aranda, Jaime Sempere, por soportar el mayor golpe de mi vida con sus brazos en el momento en que me derrumbé en el suelo, a todo el mundo de mi WhatsApp que aguantan mis audios todos los días, a mi madre que lee cada entrada de este blog con devoción, mi hermana pequeña, mi can que ya no está, Kovu, te amaré siempre y en todo momento, mi otro can que aún permanece, Maxi, me hace feliz besarte. Javi Pastor por enseñarme tanto en Cádiz, Luis Revuelto, Andrés Kloster, Jony Botello, mi nuevo socio en la agencia de contenidos, Olibot, por enseñarme y motivarme solo con su ejemplo, Guille de HolaSEO, Luis Villanueva por esta siempre ahí para mí, Chuiso, Alex Navarro y Romuald Fons, que entre todos subieron el nivel del campo y me obligaron a ser aún mejor. Marcos Séculi, mi nuevo proyecto de amigo en dos mil diecinueve, Madre SEOperiora, Cilver, mi nuevo diseñador y talento emergente como pocos, a Iván y Edu por confiar en mí para mentorías, Aida, Tere, Pilar, mis amigos de Quédate con el cambio, Lúa, Cova, os quiero de forma atemporal, Charly, Juan de Useo, gracias por nuestro accountability, a todos los profes del membership site en general, Bruno Ramos, Ingeniero posicionamiento web en buscadores, JoseLab, Rupas, Gastre, Jesús León, mi caso de éxito de DTV y espero que pronto amigo, Sas y Pablo, mis 2 mejores amigos de toda la vida compañeros de aventuras, Publisuites, Webpositer, Hotmart, Enlazalia, por aparecer en mi camino. Judith Tiral, por ser tan bonita conmigo, Rocío, por ser sensacional, Mila Coco, Omar de la Fuente, rey en el Norte, Maik Santamorte con el que espero grabar una canción de rap, Ambkor, por haberme integrado en su manada de lobos como uno más, Alex Novás, Jessica Hierro, Bianca y a todos y cada uno de los que me dejo en esta interminable lista, que son muchos.