¿Desea buscar en todas las categorías o en esta categoría?
Una vez que termina de desarrollar su sitio web y lo hace público a través de un dominio, podrá comenzar a ver datos estadísticos que indican el desempeño del mismo.
Google Analytics es una de las herramientas que provee información sobre su sitio web, es muy poderosa y no es difícil de instalar. A través de PageSpeed Insights Google Analytics puede realizar un análisis del desempeño del sitio web en cuanto a su velocidad de carga y respuestas para distintos dispositivos. Esta herramienta nos provee una calificación de la velocidad de cada página en nuestro sitio sobre 100, y además nos da sugerencias sobre cómo mejorar los aspectos de nuestras páginas que están generando problemas. Solucionar estas sugerencias nos ayuda a mejorar la experiencia de usuario de los visitantes de nuestros sitios, optimizando la velocidad de carga.
Se recomienda ampliamente verificar y solucionar estas sugerencias; sin embargo, tenga en cuenta que son solo sugerencias y es posible que no pueda solucionar absolutamente todas. En general, una calificación alrededor de los 90 en PageSpeed es un excelente valor e indica que la velocidad y usabilidad de esa página es bastante óptima.
Este es el método largo, pero más recomendable si quiere sacar provecho de las ventajas de Google Analytics. Comencemos por lo más básico.
Una vez que tenga Analytics habilitado para su sitio web, ingrese en las estadísticas de Analytics para el dominio en cuestión y navegue en el menú izquierdo hasta la siguiente opción: Comportamiento -> Velocidad del sitio -> Sugerencias de velocidad. Allí podrá observar una tabla con datos de cada una de las páginas en su sitio web:
Para ver las sugerencias de velocidad asociadas con una página particular haga clic en N Total donde N representa el número de sugerencias para esa página específica:
En este ejemplo podemos ver que la calificación de velocidad de esta página en particular es 75/100. No está mal, pero para que la experiencia de usuario sea óptima tenemos que mejorarla, al final de esta guía tendrá las herramientas para hacerlo. Como se mencionó antes, un buen valor debería ser cercano a 90/100.
Este método es mucho más sencillo; sin embargo, tendría que comprobar las páginas que conforman su sitio web una a una.
Ingrese al sitio web de PageSpeed Insights de Google.
La ventaja de este método es que podemos analizar cualquier página web sin necesidad de ser el propietario. Para hacerlo, simplemente escriba la dirección URL de la página en cuestión y presione Analizar. Por ejemplo, comprobemos las sugerencias de velocidad para www.wikipedia.org:
Inmediatamente, se mostrarán las sugerencias de velocidad para la página web consultada. Podrá ver una calificación y sus sugerencias asociadas para equipos móviles o para ordenadores:
¡Esto es todo!, ahora exploraremos algunas de las sugerencias de velocidad más comunes y le daremos recomendaciones para solucionarlas.
El ejemplo a continuación es un caso típico de un sitio web no optimizado, que requiere ciertas mejoras que no son muy complicadas de aplicar, pero que al final mejoran la experiencia de usuario sustancialmente:
Recomendamos comenzar con las sugerencias mostradas bajo "Elementos que debes corregir". Estas reglas están afectando la carga de su sitio web negativamente y debe hacer un esfuerzo para solucionarlas. Luego pase a la lista de "Elementos que puede plantearse corregir", estos problemas no son tan urgentes, pero pueden ayudar a mejorar la velocidad y el funcionamiento de su sitio web.
Aunque abajo enumeramos algunas soluciones para los problemas sugeridos por PageSpeed, la propia herramienta PageSpeed nos provee un enlace sumamente conveniente: con un solo clic podemos descargar un archivo .zip con todo el contenido optimizado para nuestra página.
Este enlace se encuentra al final de la lista de sugerencias, e indica algo similar a lo siguiente: Descarga los recursos de imagen, JavaScript y CSS optimizados para esta página. Haga clic sobre este enlace y se descargará el archivo compreso al cual hicimos referencia:
De nada nos sirve una imagen de 1920 x 1080 píxeles si visualizaremos nuestro sitio web en la pantalla de un dispositivo móvil simple. De esto se trata la optimización y el diseño responsive de su sitio web.
Le recomendamos utilizar media queries en su código HTML para que su sitio responda a distinto tamaños de pantalla, de este modo, solo se cargarán las imágenes que mejor se adapten al dispositivo. Es conveniente que en un dispositivo móvil, con pantallas más pequeñas y recursos de red más reducidos, se carguen imágenes más pequeñas y por lo tanto más ligeras.
Hay formas de automatizar los procesos para la generación de estas imágenes, por ejemplo, puede utilizar el ejecutador de tareas de JavaScript Grunt.
También puede utilizar alguna de las siguientes herramientas en línea para comprimir sus imágenes:
Si su sitio web está bajo algún CMS, puede probar utilizando algún plugin para la optimización de imágenes. No abuse del uso de plugins en su sitio, ya que esto siempre termina ralentizando aún más su sitio web, seleccione solo los plugins que sean absolutamente necesarios. Considere el uso de los siguientes plugins de optimización de imágenes si tiene un sitio en WordPress:
Si usted no configura el uso de caché en su sitio web, el navegador utilizado tiene que solicitar los recursos estáticos (como imágenes o códigos css/javascript) cada vez que abre dicha página. Esto es completamente ineficiente, ya que se solicitan los mismos recursos una y otra vez. Lo recomendado, es configurar el uso del caché del navegador; para hacerlo considere lo siguiente:
Si no utiliza un CMS y tiene acceso al código fuente de su sitio web
El primer recurso estático que tenemos que eliminar es la descarga local de archivos correspondientes a librerías como bootstrap o jQuery. Para esto, lo ideal es utilizar una red de entrega de contenidos o CDN (Content Delivery Network, por sus siglas en inglés). Puede utilizar las CDN de Google o Microsoft.
Una vez que seleccione su CDN, busque el enlace que se corresponda con la versión del recurso que utiliza su sitio web y cambie el enlace de la solicitud estática de dicho recurso en el <head> de cada una de las páginas de su sitio web. Por ejemplo, para usar el CDN de Microsoft para descargar la librería de jQuery —versión 2.1.4— sustituya la llamada a jQuery con el siguiente fragmento de código:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script>
// Si el CDN especificado no esá disponible entonces solicitaremos el recurso almacenado en nuestro servidor, sustituya la ruta especificada en "src" por la ruta real de su archivo
(window.jQuery || document.write('<script src="Scripts/jquery-2.1.4.min.js"><\/script>'));
</script>
Hay una inmensa posibilidad de que su navegador ya haya descargado estas librerías desde un CDN como Google o Microsoft; por lo tanto, cuando deba abrir su página, este recurso ya estará almacenado en caché y no tendrá que volver a descargarlo, disminuyendo la velocidad y la latencia causada por solicitudes http sucesivas.
Luego, debe especificar el uso de caché para recursos como imágenes (archivos con extensión png, jpg, svg, jpeg, gif, ico) y archivos con código JavaScript (.js) o CSS (.css). Para hacerlo siga las siguientes instrucciones:
Instrucciones para servidor web Apache
Ingrese en su cuenta de cPanel utilizando las credenciales adecuadas —o acceda a sus archivos vía FTP/SSH y salte al paso 6—.
En la sección "ARCHIVOS", haga clic en el ícono Administrador de archivos.
Haga clic en el engranaje en la parte superior derecha del administrador de archivos para acceder a la configuración.
Asegúrese que la opción Mostrar archivos ocultos (dotfiles) esté seleccionada.
Luego haga clic en go.
Busque el archivo .htaccess, generalmente en el directorio raíz de su sitio web (public_html).
¡Si no puede ver el archivo .htaccess en el directorio raíz del sitio web, entonces deberá crear uno!
A continuación se muestran algunos ejemplos para especificar el uso de caché a través del archivo .htaccess. La explicación detallada del uso de la expiración de recursos no se aborda en esta guía:
## CONFIGURACIÓN PARA EL USO DE CACHÉ ESPECIFICANDO EL TIEMPO DE EXPIRACIÓN DEL RECURSO SEGÚN EL TIPO DE ARCHIVO ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access plus 1 month"
</IfModule>
Este primer ejemplo se especifica el tiempo de expiración de cada recurso almacenado en caché, así el caché de imágenes se actualizará cada año y el caché de código CSS o HTML se actualizará cada mes. Aquí otro ejemplo más genérico en el cual utilizamos la directiva ExpiresDefault para especificar un tiempo de expiración general para todos los recursos en caché:
## TODOS LOS RECURSOS ESPECIFICADOS SON ALMACENADOS EN CACHÉ Y EXPIRAN A LOS 30 DÍAS, EN ESE MOMENTO SE VOLVERÁN A SOLICITAR ##
<ifmodule mod_expires.c>
<filesmatch ".(jpg|JPG|gif|GIF|png|css|ico)$">
ExpiresActive on
ExpiresDefault "access plus 30 day"
</filesmatch>
</ifmodule>
Instrucciones si usa Ngnix como servidor web
Diríjase al archivo de configuración de su virtual host utilizando el administrador de archivos de cPanel o el acceso vía SSH/FTP. Por ejemplo: /etc/nginx/sites-available/ejemplo.com, y agregue las siguientes líneas para especificar el almacenamiento en caché con expiración de 1 mes:
location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ {
expires 1M;
add_header Cache-Control "public, no-transform";
}
Esta es una de las sugerencias de velocidad más complicadas de solucionar —e irónicamente de las más comunes— porque requiere cierto conocimiento técnico para solventar su problema particular. Una de las razones más comunes del bloqueo de visualización es el uso de fuentes externas, lo cual puede bloquear temporalmente parte de la renderización del sitio web. Otros archivos CSS o JavaScript también pueden bloquear la visualización correcta de su página web.
Si utiliza WordPress hay un plugin que podría ayudarlo con este problema. Instale y habilite el Autopmize. Luego ingrese a los ajustes y deshabilite la opción "Force JavaScript in " y habilite la casilla "Inline all CSS".
El otro problema que puede surgir es el de la carga de fuentes de texto externas. Recuerde que el código HTML se carga línea a línea, por lo tanto, si usted hace una petición a una fuente de texto externa en el <head> ... </head> de su código HTML, entonces estará generando una latencia en la carga del resto del contenido.
Digamos que nuestro sitio web requiere las siguientes dos fuentes de Google Fonts:
<link href='https://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
Para evitar el bloqueo CSS en la parte superior de la página tenemos que hacer esa petición al final de nuestra página, justo antes de la etiqueta de cierre </body>. Sin embargo, hacerlo tiene un costo: el texto podría ser invisible por un número X de segundos mientras la fuente se carga (este problema se denomina FOIT por sus siglas en inglés Flash of Invisible Text).
Otra opción es utilizar el Web Font Loader de Google, el cual permite la carga asíncrona de las fuentes a través de un script vía @font-face proporcionando una interfaz común para las fuentes independientemente de dónde provengan. Esta opción es especialmente útil si usted utiliza varias fuentes externas para la carga de las páginas en su sitio web. Para más información visite el repositorio GitHub del proyecto Web Font Loader.
Una vez que establezca el código adecuado, colóquelo en la parte inferior del código HTML antes de la etiqueta </body>. A continuación un ejemplo:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Droid Sans', 'Droid Serif' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
La explicación profunda de esta característica se escapa completamente del alcance de este tutorial, por lo que recomendamos visitar el enlace provisto.
Todos los saltos de línea que tienen nuestros archivos fuente pueden sumar algunos bytes adicionales al tamaño de nuestras páginas. "Minificar" los archivos es simplemente quitar todos los saltos de línea que hacen que nuestros documentos sean legibles, pero que a la hora de ser interpretados por un navegador, no tienen ninguna utilidad. Puede que no parezca demasiado ahorro, pero en dispositivos con conexión limitada, algunos bytes menos mejoran la experiencia de usuario.
Resolver este problema es bastante sencillo, puede hacerlo siguiendo alguna de las siguientes alternativas:
Use alguna herramienta en línea, como minifier.org. Cree una versión reducida de cada uno de sus archivos .css, .html y .js y luego cárguelas a su servidor. Luego tendrá que cambiar las llamadas a dichos recursos por el nuevo archivo minified, por ejemplo cambie la línea:
<link href="css/indexstyle.css" rel="stylesheet" />
Sustituyendo con el nombre del nuevo archivo, que normalmente agregará .min a la extensión:
<link href="css/indexstyle.min.css" rel="stylesheet" />
Otra opción bastante útil —y directa— es utilizar la Estrategia para descargar recursos optimizados directamente desde PageSpeed mencionada arriba. Luego cargue los archivos en su servidor y proceda como se menciona arriba.
Si utiliza WordPress, los plugins W3 Total Caché y Auptopmize a los cuales hicimos referencia anteriormente, poseen herramientas para "Minificar" sus archivos fuente.
Esta regla también es relativamente fácil de solucionar, el plugin W3 Total Caché permite habilitar la compresión y con este tendrá el problema solucionado sin mayor problema.
Si no utiliza WordPress y debe configurar la compresión de forma manual, siga las instrucciones dependiendo de su servidor web.
Para Apache
Puede configurar su archivo .htaccess para habilitar la compresión de todos los archivos de su sitio web. Siga algunas de las alternativas a las que hicimos mención para acceder a los archivos en su servidor y agregue las siguientes líneas al archivo .htaccess:
<IfModule mod_deflate.c>
# Las líneas a continuación habilitan la comprensión para archivos HTML, CSS, JavaScript, texto plano, XML y fuentes
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
Para Ngnix
En caso de que utilice Ngnix como servidor web, navegue hasta su archivo de configuración nginx.conf y agregue el siguiente segmento de código para habilitar la compresión vía gzip en sus archivos:
gzip on;
gzipcomplevel 2;
gziphttpversion 1.0;
gzipproxied any;
gzipminlength 1100;
gzipbuffers 16 8k;
gziptypes text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzipdisable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;
¡Hemos terminado! En esta guía exploramos únicamente las sugerencias de velocidad más comunes de PageSpeed, existen otras reglas que pueden aparecer, pero es probable que pueda mejorar la calificación de velocidad de las páginas de su sitio web siguiendo las recomendaciones expuestas aquí.
Para complementar la información aquí presentada puede consultar los siguientes recursos. Aunque este material es provisto esperando que sea útil, tome en cuenta que no podemos certificar su actualidad o precisión.
