DavidAlvarezDLT
Delta
- Desde
- 21 Ago 2010
- Mensajes
- 541
¡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
- Herramientas: FileZilla, HTMLCompressor.com, CSSCompressor.com y JavaScriptCompressor.com
- Conocimientos: utilización de varios programas a nivel elemental
- Duración: 1 minuto o menos por archivo
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.
Insertar CODE, HTML o PHP:
<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:
Insertar CODE, HTML o PHP:
<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í:
Insertar CODE, HTML o PHP:
<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):
Insertar CODE, HTML o PHP:
<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:
