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

[Kakkonen]

hola betas, bueno la intencion de este tema es ir creando el tutorial con todas las cosas que nos pide Page Speed Google. ya que muchas de las cosas que son para resolver aunque se corrigan no quedan o bien depende de terceros.

Aqui ire colocando y editando en cita lo que puedan aportar. si tienen otras generadas ponerlas para agregarlo aqui.

Recordad que no todos usan wordpress, blogger, vbulletin, etc. ojala sea estructurado al codigo y no al cms

ESPECIFICAR CACHE DE NAVEGADOR

en .htaccess deberán colocar lo siguiente

<ifmodule mod_expires.c>
<filesmatch "\.(jpg|JPG|gif|GIF|png|PNG|css|ico)$">
ExpiresActive on
ExpiresDefault "access plus 31 day"
</filesmatch>
</ifmodule>

como dato este paso mejora 4 puntos. Agradecimientos a rutamex

HABILITAR COMPRESIÓN

en .htaccess deberán colocar la siguiente línea
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

como dato este paso mejora 1 punto. Agradecimientos a ceto

OPTIMIZAR IMÁGENES

APLAZAR EL ANÁLISIS DE JAVASCRIPT

MINIMIZAR REDIRECCIONAMIENTOS

UTILIZAR PREFERENTEMENTE RECURSOS ASINCRONOS

ESPECIFICAR UN VALIDADOR DE CACHE

EVITAR SOLICITUDES INCORRECTAS

MINIFICAR CSS

MINIFICAR JAVASCRIPT

MINIFICAR HTML

OFRECER IMAGENES A ESCALAS

INTRODUCIR RECURSOS CSS EN EL ENCABEZADO DEL DOCUMENTOS

ESPECIFICAR CONJUNTOS DE CARACTERES

ELIMINAR LAS CADENAS DE CONSULTAS DE RECURSOS ESTATICOS

ESPECIFICAR UNA CABECERA VARY CON EL VALOR ACCEPT-ENCODING

 

[webbber]

Lo que he notado de esta herramienta es que muchos de los problemas que se presentan son de lineas de codigo que vienen en las plantillas, por ejmplo de Blogger. Tiempo de cache, codigos javascript, imagenes no optimizadas, etc. Una de las sugerencias comunes es usar css y javascript antes del HEAD.

 

[Kakkonen]

no todo, porque yo tengo mi propio cms php y he notado que hay errores que vienen de recursos externos por ejemplo adsense, analytics, hotwords, facebook, twitter que te piden poner sus propios codigos pero son estos lo que causan lentitud. aunque el mio esta en 91/100 son pequeñas cosas que cambiar

 

[ceto]

Muy buena idea... Mi aporte:

Habilitar compresión (gzip)

¿Qué es?:
Es un metodo por el cual desde el servidor podemos comprimir las peticiones recibida y así disminuir el uso de ancho de banda así como tambien acelerar la carga del sitio.

El metodo de compresión Gzip es uno de los mas populares ya que es soportado por la mayoría de los Browser mas utilizados, incluso IE :witless:

Lo recomendable es comprimir archivos del tipo html, php, css, js mayores a 1kb. en cuanto a los archivos de imagen, supuestamente estos ya estan comprimidos y optimizados por lo cual aplicarles Gzip puede llegar a incrementar el uso de CPU inecesariamente.

Implementación:

La implementación de la compresión Gzip es muy sencilla, solo debemos agregar a nuestro archivo .htacces la siguiente linea de código:

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

 

[Kakkonen]

ya publique tu consejo

 

[webbber]

Como se aplicaria en blogger?

Muy buena idea... Mi aporte:

Habilitar compresión (gzip)

¿Qué es?:
Es un metodo por el cual desde el servidor podemos comprimir las peticiones recibida y así disminuir el uso de ancho de banda así como tambien acelerar la carga del sitio.

El metodo de compresión Gzip es uno de los mas populares ya que es soportado por la mayoría de los Browser mas utilizados, incluso IE :witless:

Lo recomendable es comprimir archivos del tipo html, php, css, js mayores a 1kb. en cuanto a los archivos de imagen, supuestamente estos ya estan comprimidos y optimizados por lo cual aplicarles Gzip puede llegar a incrementar el uso de CPU inecesariamente.

Implementación:

La implementación de la compresión Gzip es muy sencilla, solo debemos agregar a nuestro archivo .htacces la siguiente linea de código:

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

 

[ceto]

Como se aplicaria en blogger?

No se puede, ya que tu no tienes control sobre el servidor, es de Google ! :ambivalence:

 

[webbber]

Lo se amigo, pero alguna forma de hacerlo sin el .htaccess?

No se puede, ya que tu no tienes control sobre el servidor, es de Google ! :ambivalence:

 

[Kakkonen]

Lo se amigo, pero alguna forma de hacerlo sin el .htaccess?

esta dificil a no ser que por el template agregues comandos pero como no uso blogger no se si google te permita hacer esos cambios

 

[Echoes]

Dos cosas:
1. cual es la web para medir el page speed?
2. donde meto los códigos que decís son para .htcacces en blogger?



edito: parece que no se puede para blogger, y eso que en el post ponía que serviría para todas las plataformas 🙁

 

[ceto]

En blogger NO se puede emplear compreción Gzip. Ademas supongo que Google ya la debe tener aplicada (o metodo mejor) en sus servidores !!!

 

[Echoes]

En blogger NO se puede emplear compreción Gzip. Ademas supongo que Google ya la debe tener aplicada (o metodo mejor) en sus servidores !!!

Supongo que estará todo aplicado, ya que el google page speed (ya lo he encontrado jeje) me da 90 de 100 sin hacer nada.

 

[Kakkonen]

para blogger hay muchas cosas mejoradas, probablemente algunos estilos en el templae o tamaño de imagenes son las que se prodrian mejorar. yo no tengo ni blogger ni wordpress ya que es una aplicacion propia y tengo 94 pero quiero mejorarlo mas ya que he visto a otros que han llegado al 100

 

[alex84]

Mi sitio tiene 83 😕 como Alta prioridad me pide especificar el cache de recursos externos de Google y AWempire, y en las demas sugerencias tengo recursos de Juicy Ads, creo que no puedo hacer mucho :grumpy:

Gracias por la información :encouragement:

 

[SoloNegocios]

Optimizar Imágenes:

Todas las imágenes tienes que hacer que pesen menos sin perder tanta calidad, puedes hacerlo en Enlace eliminado o si sabes con Fotoshop o Gimp, en WP hay un Plugin que te optimiza las imágenes que subes WordPress › WP Smush.it « WordPress Plugins

Minificar CSS:

Tienes que unir todos los archivos CSS en 1 solo y quitarles todos los espacios y cosas que están de mas, puedes hacerlo en CSS Compressor, Free CSS Compressor and CSS Compression Tool, si usas WP hay muchos Plugins para eso.


Minificar JS:

Lo mismo que Minificar CSS

Minificar HTML:

Debes eliminar todos los espacios y comentarios del HTML

Escalar Imágenes:

Nunca debes escalar las imágenes de esta forma

<img src="http://forobeta.com/google/google/..facebook-messenger-app-disponible-para-todos-los-usuarios-150x150.jpg" alt="Facebook Messenger App" title="Facebook Messenger App" width="350" height="250" >

El width y el height siempre deben tener el tamaño real de la imagen, si colocas uno diferente el navegador la escala y escalar una imagen no es rápido, bueno si lo es pero quita milesimas de segundos valiosas xD

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


Si usas WP el Plugin recomendado es WordPress › W3 Total Cache « WordPress Plugins ya que puede:

Minificar CSS
Minificar JS
Minificar HTML
Usar Gzip
Y más

PD: Es imposible estar en 100% en esta época gracias a los botones sociales (Facebook, Twitter, Google +) y a la publicidad (Adsense, Infoliks), si quitas todo eso es facil llegar a 100% pero hay que estar loco para no colocar publicidad en un sitio xD

 

[Kakkonen]

gracias por los aportes

 

[richi0417]

necesito lo de aplazar javascript porfa no se como hacerlo en wordpress porque ciertos plugin ponen el javascript automaticamente ya tengo todos los del theme pero me faltan los de un plugin

 

[Dhampire]

Tengo una duda desde hace tiempo: en el hoja de estilo, codigo CSS que no esté en uso puede afectar de alguna forma a la pagina o es irrelevante?

 

[Kakkonen]

Tengo una duda desde hace tiempo: en el hoja de estilo, codigo CSS que no esté en uso puede afectar de alguna forma a la pagina o es irrelevante?

si no esta en uso perfectamente puedes eliminarlo, pero si solo son en algunas paginas en esas dejala y en las otras borralas de los meta

 

[Dhampire]

Hablaba en Wordpress.
Supongo que es lo mismo...
Gracias!

si no esta en uso perfectamente puedes eliminarlo, pero si solo son en algunas paginas en esas dejala y en las otras borralas de los meta