[EXP] WPO como factor de posicionamiento orgánico natural

[popobcn]

Buenas,

Hoy con motivo de un cambio de arquitectura integral de uno de mis sitios web, me he liado al trapo con el WPO del mismo, dado que los tiempos de carga y la optimización de entrega de los diferentes elementos que forman las distintas páginas ocasionan que se carguen muchas, pero muchas imágenes y en algunos casos con claras dependencias de JS para aplicar efectos y animaciones.

En resumen, tenemos los siguientes valores:

Entorno de producción
Móvil: 71 / 100 - Ordenador: 89 / 100

Entorno de integración
Móvil: 98 / 100 - Ordenador: 99 / 100

Como se puede apreciar, el cambio ha sido sumamente significativo de cara a dispositivos móviles y la realidad es que no he tenido que romperme mucho los cuernos para pasar del 71 al 98 sobre 100... pero quizás sea mejor abrir un post independiente al respecto de los cambios a realizar para tener un WPO ajustado casi al máximo dentro de la prueba de Google PageSpeed.

Podríamos llegar a rascar 1 punto más a la versión móvil, pero me niego rotundamente a perder ni un solo minuto más de mi vida a darle vueltas a sistemas complejos de compresión y/o generación de sets de imágenes para las diferentes resoluciones... así que un 98 sobre 100 esta más que genial para la edad que tengo

¿Cúal es la variación real del tiempo de carga?

Esta y no otra debería de ser la pregunta y no la mera medición del test de velocidad de Google PageSpeed y la verdad es que el cambio resulta muy significativo.

Entorno de producción
Tiempo: 1.23s

Entorno de integración
Tiempo: 463ms

De hecho, este tiempo de carga podría llegar a reducirse un poco más si no aplazáramos la entrega de algunos ficheros CSS, pero nos vamos a limitar exclusivamente a centrarnos en los valores de WPO sugeridos por Google como validos.

* Las pruebas de tiempo de carga se han efectuado por medio de PINGDOM con servers en "matalascañas del norte", vamos a un charco y medio de distancia del origen de los usuarios en España, dato que puede resultar irrelevante para muchos, pero que en realidad es crucial dado que si mis usuarios son de España el tiempo de carga será significativamente inferior al pasar por menos nodos.

Definición de los entornos de trabajo

Explicaré un poco la diferencia entre producción e integración para aquellos que se hayan perdido o simplemente para refrescar la memoria para aquellos que han tenido la oportunidad de trabajar con servicios y entregas de actualizaciones para grandes empresas:

• El entorno de producción es aquel que se encuentra visible de cara a los usuarios finales, o sea el que ven también los motores de búsqueda.
  
• El entorno de integración esta definido dentro del mismo servidor o en un servidor de idénticas características técnicas en el que se efectúan todos los cambios y puestas a punto antes de que den el salto en el entorno de producción, de esta manera los cambios que verán la luz siempre salen a la primera ( o casí xD)

Desde mi paso por cierta multinacional española de la cual no quiero acordarme, por norma general siempre defino estos dos entornos en cada servidor, con el fin de que los cambios sean más directos y los mismos funcionen a la primera por estar establecidos desde un principio en un mismo entorno con las mismas características. Igual parece rebuscado, pero os recomiendo esta forma de trabajo, sobretodo si tenéis un proyecto con gran volumen de visitantes.

Escenario de la prueba WPO

Hace ya largo tiempo que el SEO Offpage lo tengo más que abandonado, de hecho totalmente olvidado por motivos estrictamente experimentales; por lo que tras ya unos 3 meses sin meter ni un solo enlace artificial al proyecto podemos estar ante un escenario muy interesante para ver las repercusiones directas relacionadas con una optimización de WPO tan radical como la que va ha experimentar el sitio.

Como puntos de control tengo ya dos escenarios acotados en los cuales las posiciones no han sufrido grandes variaciones, así que podremos efectuar un seguimiento - a medio plazo - interesante sobre uno de los factores de posicionamiento más olvidados por muchos.

Inicio de la prueba WPO

Hoy, lo más tardar por la tarde / noche. Aún me estoy peleando con un par de cuestiones estéticas que no me terminan de convencer y revisando con la calma que se merece la carga secuencial asincrónica de imágenes en listados pesados.

Como la frecuencia de actualización del sitio en cuestión es elevada (múltiples ocasiones a lo largo de 24h) yo establecería una o dos semanas para apreciar si o no algún tipo de posible variación en la clasificación de los resultados, principalmente porque la experiencia de los usuarios será notablemente más positiva al no experimentar demoras de 1s en el tiempo de carga de las páginas y poder gozar con alegría e ilusión de cargas prácticamente instantáneas de las páginas solicitadas.

Saludos

[RBZ]

Interesante como todos los experimentos que haces, en este tengo mucho interés por ver los resultados. Si vas a sacar los datos de las Herramientas de Google sería bueno que hicieras un seguimiento diferenciado para pc y móvil (supongo que ya lo has pensado, comento por si acaso).

P.D: si alguno anda despistado WPO = Web Performance Optimization (yo lo añadiría al principio, al menos una vez).

[javy7v]

Me interesa mucho yo estoy intentando mejorar la puntuación de mi sitio web en lo de Google Page Insights ya que tengo un 59 en movil y un 74 en PC :S

He metido el tema de cache en el httaccess y lo ha tenido en cuenta y webs como Pingdom me puntuan 91/100 pero en Google no.

Me pone solo como grave a mejorar que haga compresión por gzip pero he leido que no todos los usuarios lo podran ver bien ? No estoy muy seguro...

[popobcn]

Como veo que han surgido unas cuantas dudas al respecto de como mejorar si o si la velocidad de carga voy a poner - más o menos - los cambios más significativos que he realizado:

Habilitar compresión / Especificar caché de navegador

Aquí es posiblemente donde nos vamos a entretener más, principalmente porque dependiendo de los modulos activos en nuestro servidor podremos o no emplear algunos para mejorar el tratamiento del cache.

Yo como soy hombre de campo y me gustan las cosas sencillas y no darle la razón a todo a Google en vez de emplear expires.c he usado headers.c, principalmente por costumbre:

Código:

#Compresión de archivos js,css,html y php en la entrega

<IfModule mod_deflate.c>
    <filesMatch "\.(js|css|html|php)$">
        SetOutputFilter DEFLATE
    </filesMatch>
</IfModule>

#Especificar cache y tiempo por tipo de archivos
<IfModule mod_headers.c>
Header set Connection keep-alive

# Cache-control headers
    # 2 HOURS
    #<filesMatch "*">
        Header set Cache-Control "max-age=7200, must-revalidate"
    #</filesMatch>

    # 480 weeks - 290304000
    # 2 WEEKS
    <filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|swf|css)$">
        Header set Cache-Control "max-age=1209600, public"
    </filesMatch>

    # 2 DAYS
    <filesMatch "\.(xml|txt)$">
        Header set Cache-Control "max-age=172800, public, must-revalidate"
    </filesMatch>

    # 2 HOURS
    <filesMatch "\.(html|htm)$">
        Header set Cache-Control "max-age=7200, must-revalidate"
    </filesMatch>

    <FilesMatch "\.(gif|jpg|png|ico|css|js|pdf|txt)$">
        Header append Cache-Control "public"
    </FilesMatch>
</IfModule>

Se puede mejorar mucho más el código, pero la verdad es que en mi caso particular no ha sido necesario darle muchas más vueltas.

2. Prioriza el contenido visible

En este punto es cuando nos adentramos en lo que realmente podemos considerar una optimización onsite o una auditoria WPO interna de los diferentes elementos que requiere nuestro sitio para cargar, maquetar y mostrar nuestros páginas.

En mi caso, he reducido considerablemente el número de JS empleados y de CSS, hasta donde he podido sin perder los nervios, principalmente porque el uso extendido de librerías comunes como jQuery o estilos como Bootstrap me obligan - que suerte - a tirar de CDN muy rápidos y divertidos.

No obstante, para mejorar notablemente los tiempos de carga y priorizar el contenido visible podemos hacer - en rasgos generales y sin analizar cada caso concreto - las siguientes actividades:

• Posponer entrega de CSS: Incluirlos al final de nuestro código, justo después del cierre de la etiqueta <HTML>
• Posponer carga de JS: Más de lo mismo que lo anterior
• Apunta a los archivos minificados CSS / JS: Cuando tenemos dependencias de librerias externas, enlazar la versión .MIN es una buen alternativa, en caso de que trabajemos con librerias locales (CSS / JS) MEJOR AÚN! Dado que tendremos la posibilidad de unificar todos los ficheros
• Retrasar la carga de imágenes: indispensable en mi caso de ejemplo. Hay plugins muy buenos que pueden solventarte el problema como LAZYLOAD.

Estas, obviamente, son las recomendaciones que nos hace Google... yo en lo particular si tengo archivos CSS grandes y vitales para la presentación de mis contenidos NO DUDO en colocarlos en el HEAD, principalmente porque demorar la entrega de este tipo de archivos si bien nos dará buenas puntuaciones en el PageSpeed de Google en cuestiones pertinentes a la presentación de los contenidos en pantalla puede causar problemas amén de que por norma general - en mis pruebas - en PINGDOM obtendremos mejores respuestas / tiempos de carga si los colocamos en el HEAD.

Así pues, que en vuestra mano lo dejo.

3. Optimizar imágenes

Si o si, este es uno de los elementos que yo personalmente he obviado totalmente. Por otro lado si vuestro sitio tiene imágenes estáticas y las mismas no sufren alteraciones os recomiendo que echéis un vistazo a esta herramienta online:

• http://optimizilla.com/

La verdad, hace maravillas a nivel de compresión y la perdida de calidad es de baja a nula completamente. En lo personal he llegado a comprimir imágenes grandes de más de 2 Mb en poco más de 35 / 40Kb casi sin apreciarse perdidas de calidad.

4. Minificar JS / CSS

Hay miles, pero miles de verdad, de servicios online que te permiten minificar al máximo tus archivos JS y CSS sin que los mismos dejen de funcionar, así que si no estás tirando ya de un servicio CDN ya estás tardando en hacer los deberes y comprimir lo máximo posible todos los ficheros CSS y JS que tengas.

Puede que una diferencia de 1Kb o 4Kb te parezcan absurdas para tu superconexión de FIBRA 300Mb, pero cuando andas por la calle con la cobertura por los suelos y quieres acceder a una página web, agradecerás que hayan hecho los deberes ¿verdad? pues nosotros no podemos ser menos.

Obviamente, para minificar no necesitas NINGÚN PLUGIN!!!! Si no conoces las dependencias de tu sitio, la ubicación de todas sus hojas de estilos y para terminar de redondearlo trabajas con WORDPRESS... pues si, ale... tira y bájate WP MINIFY y ponte a configurarlo como Dios manda! En caso contrario, te recomiendo que lo hagas con tus propias manos tardarás más, pero no tendrás dependencias externas y/o no cargarás un nuevo JS para mejorar los existentes.

5. Unificar JS / CSS

El sentido común llama a nuestras puertas cuando en todas nuestras páginas cargamos siempre las mismas 5 hojas de estilos y los mismos 3 archivos JS, digo que llama a nuestras puertas porque sería de sentido común convertir esos 5 archivos CSS en un único archivo y esos 3 archivos JS en uno único ¿verdad?

¿Parece una chorrada? Puede, pero en vez de realizar 8 peticiones al servidor solo hacemos 2, imagínate si se notará la diferencia cuando vayas andando por la calle con la cobertura por los suelos... bueno, ¡ya sabes!

6. Si no llegas a un 85 / 100 repasa todo de nuevo

Si tras poner en práctica estos 5 puntos de optimización no llegas a tener mediciones de entorno al 85 / 100 en cualquier escenario, toca mirar muy detenidamente que ha pasado con nuestro sentido común, pues seguramente alguna cosa se nos habrá escapado.

Errores que pasan desapercibidos:

• Tiempo de respuesta del servidor: analiza si tu página esta cargando más cosas de las estrictamente necesarias y si las mismas están realmente optimizadas al 100%
• Librerias JS y CSS enlazadas de forma incorrecta: más de lo comentado anteriormente, si por ejemplo usas jquery, fijo, pero de verdad, que el servicio CDN donde estas enlazando esa librería también tiene la versión minificada y con los CSS pasa exactamente lo mismo
• Tu servidor no da para más: también es posible, para que nos vamos a engañar, pero por muy malo que sea el servidor si haces bien los deberes tu página o carga en milisegundos o en menos de 3 segundos... Si no es ese el caso, toca mirar un nuevo alojamiento
• Aléjate de Wordpress: esta mañana temprano he terminado de efectuar una auditoria de WPO a un portal basado en este CMS con ni más ni menos que 59 peticiones ha archivos JS... En serio, de verdad, no es broma... OLVIDATE DE ESE CMS!!!

Poco más que añadir... si eres de los que han caído en las fauces del CMS preferido por los SEOs (o sea, WP xD) no dudes en plantearse seriamente si un desarrollo personalizado podría cubrir tus necesidades, porque con total seguridad la inversión que efectúes te quitará muchos quebraderos de cabeza.

Saludos

[javy7v]

Iniciado por popobcn

Como veo que han surgido unas cuantas dudas al respecto de como mejorar si o si la velocidad de carga voy a poner - más o menos - los cambios más significativos que he realizado:

Habilitar compresión / Especificar caché de navegador

Aquí es posiblemente donde nos vamos a entretener más, principalmente porque dependiendo de los modulos activos en nuestro servidor podremos o no emplear algunos para mejorar el tratamiento del cache.

Yo como soy hombre de campo y me gustan las cosas sencillas y no darle la razón a todo a Google en vez de emplear expires.c he usado headers.c, principalmente por costumbre:

Código:

#Compresión de archivos js,css,html y php en la entrega

<IfModule mod_deflate.c>
    <filesMatch "\.(js|css|html|php)$">
        SetOutputFilter DEFLATE
    </filesMatch>
</IfModule>

#Especificar cache y tiempo por tipo de archivos
<IfModule mod_headers.c>
Header set Connection keep-alive

# Cache-control headers
    # 2 HOURS
    #<filesMatch "*">
        Header set Cache-Control "max-age=7200, must-revalidate"
    #</filesMatch>

    # 480 weeks - 290304000
    # 2 WEEKS
    <filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|swf|css)$">
        Header set Cache-Control "max-age=1209600, public"
    </filesMatch>

    # 2 DAYS
    <filesMatch "\.(xml|txt)$">
        Header set Cache-Control "max-age=172800, public, must-revalidate"
    </filesMatch>

    # 2 HOURS
    <filesMatch "\.(html|htm)$">
        Header set Cache-Control "max-age=7200, must-revalidate"
    </filesMatch>

    <FilesMatch "\.(gif|jpg|png|ico|css|js|pdf|txt)$">
        Header append Cache-Control "public"
    </FilesMatch>
</IfModule>

Se puede mejorar mucho más el código, pero la verdad es que en mi caso particular no ha sido necesario darle muchas más vueltas.

2. Prioriza el contenido visible

En este punto es cuando nos adentramos en lo que realmente podemos considerar una optimización onsite o una auditoria WPO interna de los diferentes elementos que requiere nuestro sitio para cargar, maquetar y mostrar nuestros páginas.

En mi caso, he reducido considerablemente el número de JS empleados y de CSS, hasta donde he podido sin perder los nervios, principalmente porque el uso extendido de librerías comunes como jQuery o estilos como Bootstrap me obligan - que suerte - a tirar de CDN muy rápidos y divertidos.

No obstante, para mejorar notablemente los tiempos de carga y priorizar el contenido visible podemos hacer - en rasgos generales y sin analizar cada caso concreto - las siguientes actividades:

• Posponer entrega de CSS: Incluirlos al final de nuestro código, justo después del cierre de la etiqueta <HTML>
• Posponer carga de JS: Más de lo mismo que lo anterior
• Apunta a los archivos minificados CSS / JS: Cuando tenemos dependencias de librerias externas, enlazar la versión .MIN es una buen alternativa, en caso de que trabajemos con librerias locales (CSS / JS) MEJOR AÚN! Dado que tendremos la posibilidad de unificar todos los ficheros
• Retrasar la carga de imágenes: indispensable en mi caso de ejemplo. Hay plugins muy buenos que pueden solventarte el problema como LAZYLOAD.

Estas, obviamente, son las recomendaciones que nos hace Google... yo en lo particular si tengo archivos CSS grandes y vitales para la presentación de mis contenidos NO DUDO en colocarlos en el HEAD, principalmente porque demorar la entrega de este tipo de archivos si bien nos dará buenas puntuaciones en el PageSpeed de Google en cuestiones pertinentes a la presentación de los contenidos en pantalla puede causar problemas amén de que por norma general - en mis pruebas - en PINGDOM obtendremos mejores respuestas / tiempos de carga si los colocamos en el HEAD.

Así pues, que en vuestra mano lo dejo.

3. Optimizar imágenes

Si o si, este es uno de los elementos que yo personalmente he obviado totalmente. Por otro lado si vuestro sitio tiene imágenes estáticas y las mismas no sufren alteraciones os recomiendo que echéis un vistazo a esta herramienta online:

• http://optimizilla.com/

La verdad, hace maravillas a nivel de compresión y la perdida de calidad es de baja a nula completamente. En lo personal he llegado a comprimir imágenes grandes de más de 2 Mb en poco más de 35 / 40Kb casi sin apreciarse perdidas de calidad.

4. Minificar JS / CSS

Hay miles, pero miles de verdad, de servicios online que te permiten minificar al máximo tus archivos JS y CSS sin que los mismos dejen de funcionar, así que si no estás tirando ya de un servicio CDN ya estás tardando en hacer los deberes y comprimir lo máximo posible todos los ficheros CSS y JS que tengas.

Puede que una diferencia de 1Kb o 4Kb te parezcan absurdas para tu superconexión de FIBRA 300Mb, pero cuando andas por la calle con la cobertura por los suelos y quieres acceder a una página web, agradecerás que hayan hecho los deberes ¿verdad? pues nosotros no podemos ser menos.

Obviamente, para minificar no necesitas NINGÚN PLUGIN!!!! Si no conoces las dependencias de tu sitio, la ubicación de todas sus hojas de estilos y para terminar de redondearlo trabajas con WORDPRESS... pues si, ale... tira y bájate WP MINIFY y ponte a configurarlo como Dios manda! En caso contrario, te recomiendo que lo hagas con tus propias manos tardarás más, pero no tendrás dependencias externas y/o no cargarás un nuevo JS para mejorar los existentes.

5. Unificar JS / CSS

El sentido común llama a nuestras puertas cuando en todas nuestras páginas cargamos siempre las mismas 5 hojas de estilos y los mismos 3 archivos JS, digo que llama a nuestras puertas porque sería de sentido común convertir esos 5 archivos CSS en un único archivo y esos 3 archivos JS en uno único ¿verdad?

¿Parece una chorrada? Puede, pero en vez de realizar 8 peticiones al servidor solo hacemos 2, imagínate si se notará la diferencia cuando vayas andando por la calle con la cobertura por los suelos... bueno, ¡ya sabes!

6. Si no llegas a un 85 / 100 repasa todo de nuevo

Si tras poner en práctica estos 5 puntos de optimización no llegas a tener mediciones de entorno al 85 / 100 en cualquier escenario, toca mirar muy detenidamente que ha pasado con nuestro sentido común, pues seguramente alguna cosa se nos habrá escapado.

Errores que pasan desapercibidos:

• Tiempo de respuesta del servidor: analiza si tu página esta cargando más cosas de las estrictamente necesarias y si las mismas están realmente optimizadas al 100%
• Librerias JS y CSS enlazadas de forma incorrecta: más de lo comentado anteriormente, si por ejemplo usas jquery, fijo, pero de verdad, que el servicio CDN donde estas enlazando esa librería también tiene la versión minificada y con los CSS pasa exactamente lo mismo
• Tu servidor no da para más: también es posible, para que nos vamos a engañar, pero por muy malo que sea el servidor si haces bien los deberes tu página o carga en milisegundos o en menos de 3 segundos... Si no es ese el caso, toca mirar un nuevo alojamiento
• Aléjate de Wordpress: esta mañana temprano he terminado de efectuar una auditoria de WPO a un portal basado en este CMS con ni más ni menos que 59 peticiones ha archivos JS... En serio, de verdad, no es broma... OLVIDATE DE ESE CMS!!!

Poco más que añadir... si eres de los que han caído en las fauces del CMS preferido por los SEOs (o sea, WP xD) no dudes en plantearse seriamente si un desarrollo personalizado podría cubrir tus necesidades, porque con total seguridad la inversión que efectúes te quitará muchos quebraderos de cabeza.

Saludos

Me has dejado las cosas mas claras en 1 mensaje que en todas las webs que he visto!

Muchas gracias , estoy ahora mismo en 73 y me falta comprimir unas cuantas imagenes, el css , html y js.

Ya coloque los CSS y JS debajo y si que es cierto que mejora la puntuación aunque no me gusta como carga la web al cargar primero los datos que estilos :S

Espero llegar a 80 mas o menos!

Por cierto decir que consegui en una web activar la compresión GZIP con Arsys pero en otra con 1and1 les llame y basicamente me mandaron a la mierda :) , alguna idea para activar la compresión esta de una manera , al menos de cara al puntuaje de google ?

[popobcn]

Iniciado por javy7v

Me has dejado las cosas mas claras en 1 mensaje que en todas las webs que he visto!

Por eso los foros son foros y los blogs son blogs

Iniciado por javy7v

Ya coloque los CSS y JS debajo y si que es cierto que mejora la puntuación aunque no me gusta como carga la web al cargar primero los datos que estilos :S

Si no te gusta a tí, a tus usuarios MENOS. No hemos de perder el norte en ningún momento, recuerda lo comentado al respecto del sentido común... Si la carga de tus estilos marca una diferencia estética, subelos de nuevo al HEADER

Iniciado por javy7v

Espero llegar a 80 mas o menos!

Sin problemas, si aún tienes pendiente la minificación del JS y del CSS te puedes llevar gratas sorpresas sobre el cambio que puede llegar a experimentar.

Iniciado por javy7v

Por cierto decir que consegui en una web activar la compresión GZIP con Arsys pero en otra con 1and1 les llame y basicamente me mandaron a la mierda :) , alguna idea para activar la compresión esta de una manera , al menos de cara al puntuaje de google ?

El que Google valore positiva o negativamente tu página a nivel de carga en base a una serie de criterios preestablecidos por ellos no quita que tu página cargue si o si en menos de 2s o en un 1s, el objetivo al final será siempre el mismo: que cargue en milésimas de segundo.

Saludos