Cómo conseguir la máxima puntuación posible en Google PageSpeed
Página 1 de 7 123 ... ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 66
  1. #1
    Registro
    21-agosto-2010
    Ubicación
    Barcelona
    Mensajes
    482

    ¡Hola ForoBeta! Con tal de intentar dejar mi granito de arena en el foro, aquí os traigo mi tutorial referente a obtener la máxima puntuación posible en el archiconocido Google PageSpeed Test.
    Antes de comenzar quiero recalcar que hay que tener algún conocimiento mínimo sobre edición de código y dominio de programas básicos, no obstante no considero que se requiera de ningún conocimiento imposible de obtener en unos pocos minutos, por lo que cualquiera es capaz de seguirlo sin ningún tipo de problema.

    Sin más dilaciones, comencemos.




    Compresión de imágenes

    • Herramientas: FileZilla y FileMinimizer
    • Conocimientos: utilización de varios programas a nivel elemental
    • Duración: 1 minuto o menos por imagen


    El primer proceso dentro del tutorial y uno de los más importantes. Consiste en simplemente comprimir al máximo las imágenes de nuestra página web. Para conseguir tal cometido simplemente necesitamos utilizar FileZilla para descargar las imágenes no comprimidas y algún programa para comprimirlas. Yo aconsejo FileMinimizer, es rápido, sencillo y encima dispone de versión gratuita.





    Comprimir archivos HTML, CSS y JavaScript



    Este proceso, al igual que el anterior, consiste en reducir el tamaño de algunos de nuestros archivos, en nuestro caso los archivos HTML, CSS y JavaScript. Para realizar tal cosa simplemente copiamos el contenido original, vamos a la página web propuesta anteriormente (cada una tiene su tipo de archivo), hacemos correr el programa y sustituimos el código antiguo por el nuevo.





    Habilitar compresión con módulo mod_deflate

    • Herramientas: FileZilla y Bloc de Notas
    • Conocimientos: ninguno
    • Duración: 2-3 minutos


    Consiste en simplemente utilizar un módulo de Apache para entregar diferentes tipos de archivos comprimidos. El proceso es simple: el usuario entra a una página web y pide los archivos; el servidor los comprime; el servidor los envía. Para conseguir esto simplemente copia el código siguiente en el archivo .htaccess de tu página web.

    Código:
    <IfModule mod_deflate.c>
     
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/css
     
    BrowserMatch ^Mozilla/4 gzip-only-text/html
     
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
     
    BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
     
    <IfModule mod_headers.c>
    
    Header append Vary User-Agent env=!dont-vary
    
    </IfModule>
     
    </IfModule>
    Para comprobar si el proceso ha sido correcto podéis utilizar WhatsMyIp.org (cortesía de Carlos Arreola)




    Especificar caché

    • Herramientas: FileZilla y Bloc de Notas
    • Conocimientos: ninguno
    • Duración: 2-3 minutos


    Cuando un usuario entra en una página web simplemente descarga un conjunto de archivos, que posteriormente son interpretados por nuestro navegador. Es muy común que estos archivos se repitan entre las diferentes páginas de nuestro sitio, por lo que es interesante que nuestro ordenador guarde estos archivos durante un tiempo para ser utilizados posteriormente. Para realizar este paso, como en el anterior, simplemente copiamos el siguiente código en el archivo .htaccess de nuestra página:

    Código:
    <IfModule mod_expires.c>
    
    ExpiresActive on
     
    ExpiresDefault                          "access plus 1 month"
    ExpiresByType text/cache-manifest       "access plus 0 seconds"
    ExpiresByType text/html                 "access plus 0 seconds"
    ExpiresByType text/xml                  "access plus 0 seconds"
    ExpiresByType application/xml           "access plus 0 seconds"
    ExpiresByType application/json          "access plus 0 seconds"
    ExpiresByType application/rss+xml       "access plus 1 hour"
    ExpiresByType image/x-icon              "access plus 1 week"
    ExpiresByType image/gif                 "access plus 1 month"
    ExpiresByType image/png                 "access plus 1 month"
    ExpiresByType image/jpg                 "access plus 1 month"
    ExpiresByType image/jpeg                "access plus 1 month"
    ExpiresByType video/ogg                 "access plus 1 month"
    ExpiresByType audio/ogg                 "access plus 1 month"
    ExpiresByType video/mp4                 "access plus 1 month"
    ExpiresByType video/webm                "access plus 1 month"
    ExpiresByType text/x-component          "access plus 1 month"
    ExpiresByType font/truetype             "access plus 1 month"
    ExpiresByType font/opentype             "access plus 1 month"
    ExpiresByType application/x-font-woff   "access plus 1 month"
    ExpiresByType image/svg+xml             "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
    ExpiresByType text/css                  "access plus 1 year"
    ExpiresByType application/javascript    "access plus 1 year"
    ExpiresByType text/javascript           "access plus 1 year"
       
    </IfModule>



    Trasladar los archivos .CSS y .JS al final de la página

    • Herramientas: FileZilla y Bloc de Notas
    • Conocimientos: edición básica de código
    • Duración: 2-3 minutos por archivo


    Google considera que los archivos de estilo (CSS) y los scripts (JS) tienen que ser cargados después del HTML, por lo que es recomendable trasladar las instancias a estos hacia el final del código HTML, justo antes del cierre de la etiqueta <BODY>. En el caso de WordPress, lo que deberíamos hacer es buscar en el archivo header.php todos las lineas de código con una estructura tal que así:

    Código:
    <link href="http://www.tudominio.com/XXX.css" rel="stylesheet">
    
    o
    
    <script type="text/javascript" src="http://www.tudominio.com/XXX.js"></script>
    Y trasladarlas al archivo footer.php, justo antes de donde ponga "</body>".




    Configurar ventana gráfica

    • Herramientas: FileZilla y Bloc de Notas
    • Conocimientos: ninguno
    • Duración: 2-3 minutos


    Debido a la baja resolución (o pequeño tamaño) de éstos, los dispositivos móviles y las tabletas tienen que tener su propia versión de cada página web. El diseñador en cuestión tiene dos opciones: o escalar la página a una resolución concreta y que el usuario haga zoom (nada recomendable y muy mal visto por Google) o diseñar la página para que se adapte a todas las resoluciones. Sea como sea, en cualquiera de las dos opciones hay que especificar cual se utiliza, algo que se hace incluyendo la linea siguiente entre las etiquetas <HEAD></HEAD> de nuestra página web (archivo header.php para WordPress):

    Código:
    <meta name=viewport content="width=device-width, initial-scale=1">



    Otros consejos

    Si aplicas todo lo anteriormente explicado tu sitio ya tendrá, garantizados, más de 90 puntos sobre 100. Si quieres llegar hasta 100 será imprescindible que tu servidor tenga un buen tiempo de respuesta, así como evitar redireccionamientos innecesarios (intenta evitarlos).




    Si te ha gustado el tutorial te pediría que me dieras un "Me Gusta", así como que lo compartieras en las redes sociales y con tus amigos. Si tienes cualquier duda, así como si alguno de los pasos te causa algún problema, no dudes en comentarlo en esta entrada.
    Última edición por David103; 25-oct-2015 a las 04:35

  2. #2
    Registro
    18-febrero-2013
    Ubicación
    Chimbote, Perú
    Edad
    23
    Mensajes
    1.322
    Voy a probarlo, gracias por el tutorial.

  3. #3
    Registro
    18-julio-2010
    Ubicación
    Mexico City
    Edad
    36
    Mensajes
    4.332
    el mio de tenerlo en 83 subio a 89 en ordenador, pero en movil quedo igual en 80

  4. #4
    Registro
    02-febrero-2013
    Ubicación
    México
    Edad
    25
    Mensajes
    3.025
    Voy a probarlo en un rato, esta sí es muy buena info

  5. #5
    Registro
    21-agosto-2010
    Ubicación
    Barcelona
    Mensajes
    482
    Seguramente es por el apartado de la ventana gráfica. Tu sitio web no estará adaptado a todos los dispositivos web, por lo que necesitarías que algún diseñador lo adaptara. Si me envías tu página por privado te lo miro más detenidamente.

  6. #6
    Registro
    29-agosto-2010
    Ubicación
    México - Chiapas
    Edad
    28
    Mensajes
    2.775
    Un excelente tutorial que debemos de implementar, gracias.

  7. #7
    Registro
    18-julio-2010
    Ubicación
    Mexico City
    Edad
    36
    Mensajes
    4.332
    mi sitio se ver y esta configurado para todo tipo de dispositivos y resolucion,

  8. #8
    Registro
    27-julio-2012
    Ubicación
    MX
    Mensajes
    5.156
    Alguna forma de bajar todas las imágenes? Son como 500.

  9. #9
    Cita Iniciado por tutorialesp Ver Mensaje
    Alguna forma de bajar todas las imágenes? Son como 500.
    Podrias usar el otro tutorial de optimizar las imágenes

  10. #10
    Bueno el tuto, gracias.

Página 1 de 7 123 ... ÚltimoÚltimo

Temas similares

  1. Mejorar el PageSpeed de Google Developers
    Estuve realizando mejoras a mi página según lo que señalaba el PageSpeed de Google, y logré pasar de 55 puntos en web a 81 pero hay varias cosas que...
    Respuestas: 0
    Último mensaje: 17-may-2014
  2. PageSpeed Service Google
    Buenas, tengo una cuestión sobre este servicio de google que acelera el rendimiento de nuestras webs optimizandolas ... Bueno la cosa, tras...
    Respuestas: 11
    Último mensaje: 19-jun-2013
  3. Google PageSpeed y htaccess
    Hola Betas, Luego de ver el hilo: http://forobeta.com/google/72971-tutorial-construccion-page-speed-google.html Tomé mi .htaccess, el cual se...
    Respuestas: 0
    Último mensaje: 08-abr-2012
  4. PageSpeed de Google sale de Google Labs
    Hola, Les vengo a informar que hace unos días la herramienta de PageSpeed de Google salió de Google Labs para alcanzar su estado de madurez. Ahora...
    Respuestas: 26
    Último mensaje: 20-oct-2011
  5. Como Conseguir Google +
    Hola Amigo, veo que muchos tienen ya su Google +. Pero como conseguirlo. Supuestamente tiene que ser por invitación, pero si es Asi, Alguien...
    Respuestas: 10
    Último mensaje: 01-jul-2011

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •