Cómo mejorar tu velocidad de página con Page Speed de Google

  • Autor Autor Kakkonen
  • Fecha de inicio Fecha de inicio
¿Cómo se hace esto en WordPress?:

ELIMINAR LAS CADENAS DE CONSULTAS DE RECURSOS ESTATICOS:

Nunca usar URL que contengan el carácter "?", como los resultados de búsqueda que ofrece WP normalmente midominio.com/s?=cosa
Hacer clic para expandir...
 
Khan las del htcaccess pero yo no tengo creado ninguno, me gustaría saber como crearlo y donde debería colocarlo.
Muchas gracias
 
Algo interesante es utilizar CDN para algunos recursos, pero sobre todo para frameworks JS he visto mucho ese tema, en particular con Jquery.

La idea se trata básicamente de que en lugar de tener el archivo en tu servidor, se trata de tomarlo de otro externo (por ejemplo, google). Para que se entienda es como el hotlinks de imagenes, solo que tiene una serie de ventajas extras. Por ejemplo, los CDN de JQuery disponibles son los siguientes:

Google Ajax API CDN (Also supports SSL via HTTPS) :
- http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Microsoft CDN (Also supports SSL via HTTPS):
- http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js

jQuery CDN (via Media Temple)
- http://code.jquery.com/jquery-1.7.1.min.js Minified version
- http://code.jquery.com/jquery-1.7.1.js Source version

Estas son algunas de las ventajas:

  • Ahorro de ancho de banda propio.
  • Varios sitios pueden compartir el mismo recurso en el CDN, por lo que hay la posibilidad de que el cliente al llegar a tu página ya tenga en el caché una copia del recurso y por lo tanto no hace falta volver a pedirla. Esta es la ventaja más grande para archivos que son comunes a muchos sitios diferentes (como JQuery)
  • Los CDN tienen servidores en todo el mundo, por lo que la descarga del recurso se va a hacer desde la localización más cercana del usuario (y por lo tanto más rápido).

Hay un par de ventajas más, pero son un poco más técnicas y no aportan demasiado al menos que tengas un sitio con varios millones de visitas al día.

Saludos
 
Para optimizar las imagenes recomiendo que usen Enlace eliminado o un plugin de wordpress que usa smush it WordPress › WP Smush.it « WordPress Plugins cada que subes una imagen a la carpeta upload te la comprime de forma automatica o utilizar la version optimizada que te ofrece google page speed, la que dice See optimized version.
 
Excelente, se agradece mucho!

No lo abandones Bro, es un aportazo 😉
 
Gracias amigo!
 
seguimos con este tutorial?
 
Interesante, que página usáis para comprobar la puntuación de la web? Saludos
 
nbrown dijo:
Gracias! Es que usaba whorank pero hace ya algún tiempo que lo pusieron de pago :topsy_turvy:
Hacer clic para expandir...

Ja Ja Ja. Si, lo hacen casi todos. Crean una buena herramienta, dejan que nos acostumbremos a ella, y luego ZAZ!! :greedy_dollars::greedy_dollars::greedy_dollars:
 
Esta puntuación es buena en Page Speed Online?

The page ANDROID ZONE got an overall PageSpeed Score of 89 (out of 100). Learn more
 
Cuando programamos si bien lo esencial es que el código que haces funcione correctamente y sin errores, pero hay un factor muy importante ¿El código programado es realmente optimo? ¿Cuanto de memoria RAM consume? , ¿cuanto recursos de procesador consume? y ¿cuando tarda en ejecutarse?

Para optimizar una web al máximo hay que empezar desde la raíz, desde analizar linea por linea el código PHP, CSS, HTML y javascript , en este caso mostrare una buena practica que se suele usar con Javascript, y especialmente cuando se trabaja con jQuery.

Utiliza variables para almacenar información de un elemento y hacer cambios sobre él.

Este sería un ejemplo de código no optimizado:

HTML: 
$('#lista li).bind('click', function() { 

$(this).css('border', '3px dashed yellow'); 
$(this).css('background-color', 'orange');
 $(this).fadeIn('slow');
 
});

¿Vieron la cantidad de referencias a this?
Porque no hacer mejor esto y evitamos hacer muchas referencias al objeto, ojo cada vez que se hace una referencia, Javascript busca el elemento en todo el arbol DOM de la página.

HTML: 
$('#lista li).bind('click', function() { 

var lista= $(this);

lista.css('border', '3px dashed yellow'); 
lista.css('background-color', 'orange');
lista.fadeIn('slow');

});

O incluso aun mas optimizado.

HTML: 
$('#lista li).bind('click', function() { 

var lista= $(this);

lista.css('border', '3px dashed yellow')
.css('background-color', 'orange')
.fadeIn('slow');

});

Si bien el tiempo es insignificante, pero aveces depende de milisegundos para que un visitante cierre tu pagina.

PD:
Un tip mas: Evita tener imágenes con links rotos o referencias a css , js inexistentes. << El navegador hace muchos intentos a tratar de descargar una imagen , no para hasta que este le de un error 404 >> esto significa que mientras no haya respuesta el navegador no procederá a descargar los demás contenidos de la web.

Por ejemplo:
Crea un documento HTML añade con imágenes y texto la librería jQuery desde la API de Google y cárgalo en localhost ¿Wouu carga muy rapido? . Ahora desconectate de Internet y prueba cargar nuevamente la página. Pues la carga va ser muy lenta ya que se va esperar un lapso de tiempo hasta que el navegador detecte que no existe ese archivo y luego proceda a cargar el resto.

PDD: Para servicios garantizo PageSpeed hasta 98% 😛 ?spam?
 
Última edición:
Aguas con:

UTILIZAR PREFERENTEMENTE RECURSOS ASINCRONOS

Puedes ocultar sin querer contenido a los buscadores
 
Me suscribo a este tema que me parece muy interesante. Gracias por el aporte
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

J
Cómo mejorar la velocidad de mi página
Respuestas
4
Visitas
292
jensync82
J
C
¿Cómo mejorar la velocidad de mi página según PageSpeed?
Respuestas
10
Visitas
768
Chuecos10
Chuecos10
Q
¿Cómo mejorar la velocidad del sitio web con Google Pagespeed Insights?
Respuestas
4
Visitas
394
Wizard
Wizard
SEOUruguay
Cómo mejorar la velocidad de carga de una página web utilizando CSS
Respuestas
5
Visitas
759
bwayne01
B
D
¿Cómo mejorar la velocidad de carga de mi web?
Respuestas
1
Visitas
427
Juanitapregunta
Juanitapregunta
Atrás
Arriba