Blog de Imagen y Web para empresas

Tfno: 629 333 654

Sígueme en Facebook | Google+ | Linkedin

Cómo aumentar la velocidad de carga de una web (II)

Autor: admin. Publicado el 23 Mayo, 2016. Categorías: Diseño web

Como mejorar la velocidad de carga de tus páginas web

En el post anterior hablaba sobre los primeros pasos que di para mejorar la velocidad de mis páginas web. A modo de resumen y como repaso, el aspecto más importante es la contratación de un hosting (alojamiento web) bien optimizado y con garantías de buenos resultados. Lo demás consiste en reducir el tamaño de cada página de tu sitio web para aumentar la velocidad de carga. Para ello comenzaba dando consejos sobre los “themes” de los CMS y los plugins.

Ahora continuaré mostrándote técnicas para optimizar la velocidad de tu web. Te diré qué plugins me han ayudado y uno que no. Ofreceré mi opinión sobre las consultas a la base de datos. Te enseñaré a optimizar el peso de tus imágenes sin perder calidad, con un simple click y sin tener que pasar por Photoshop u otros similares y soluciones a otros elementos multimedia. Te haré una lista de las tipografías que no consumirán recursos de tu servidor ni añadirán peso al total y otras técnicas que aún no he probado.

Comencemos.

Plugins que me han ayudado a mejorar la velocidad de carga de mi sitio web

Como soy diseñador y no técnico, no puedo emitir valoraciones muy especializadas y detalladas, pero te voy a aconsejar los plugins para WordPress con los que a mí me ha ido bien para aumentar la velocidad de carga de mi sitio web.

Resultan casi inevitables los plugins de caché. La caché es un tipo de memoria en la que se almacena la información de cada página, de forma que queda memorizada y cuando un usuario solicite dicha página, el servidor tira de la caché y no consume los recursos de llamadas a archivos ni consultas, por lo que supone un ahorro de tiempo considerable y una mejora en la velocidad de carga de tu web.

Plugins de caché como WP Super Cache van muy bien, aunque para mí el mejor es W3 Total Cache. Quizá parezca más complejo al tener más opciones, entre ellas las de minificar y agrupar CSS, javascript y HTML, pero hace su trabajo de p… madre. Eso sí, a veces da problemas con ciertas configuraciones de servidores. Consulta antes de utilizarlo con tu hosting.

WP-Optimize también es muy útil porque elimina filas innecesarias de algunas tablas de WordPress. WordPress no es el CMS más eficiente. Ha triunfado porque es uno de los más manejables y sencillos. Una de las razones es que agrupa todas las revisiones de posts, páginas y entradas personalizadas en la misma tabla, por lo que una consulta a una web con mucho contenido puede resultar infernal. WP-Optimize elimina las revisiones y otra basurilla, dejando tan sólo las versiones finales de los posts, páginas, etc., haciendo más rápidas las consultas y, por tanto, mejorando la velocidad de carga de tus páginas web..

Un plugin que no me ofreció la velocidad prometida

Fue Autoptimize. W3 Total Cache da problemas con los servidores de Webempresa, así que ellos recomiendan WP Super Cache, que no ofrece opciones para minificar. Autoptimize sí. Y lo hace bastante bien. No tengo quejas en ese aspecto. Sin embargo, esperaba un ligero aumento en la velocidad de carga de mis páginas. Pero cuando lo tenía instalado y funcionando, me ralentizaba la carga entre 200 y 300 ms. Activé y desactivé la minificación de Javascript, que a veces puede dar problemas, y seguía igual (según las mediciones en Pingdom). No es mucho, pero ya puestos a ganar velocidad de carga, lo borré. Total, prefería perder unos pocos puntos en Google PageSpeed Insights a ralentizar un pelín la carga de mi web.

Reducir el número de consultas a la base de datos

En WordPress y otros CMS se realizan varias consultas a la base de datos al cargar una sola página. Cada tema, widget, header, menú, footer o plugin hace consultas MySQL. A todo ello sumar la carga correspondiente de contenido en la página en sí.

Donde se suelen realizar más consultas es la página de inicio, en la que es frecuente ofrecer un resumen de muchos aspectos que encontrarán ampliados en páginas internas, que, además, nos viene muy bien para el SEO.

Mi recomendación para optimizar la velocidad de tu sitio web es incluir sólo los widget, menús, plugins y campos precisos. Ni más, ni menos. No es bueno para la mejora de la velocidad de un sitio web añadir elementos superfluos por el simple placer de tenerlos.

Según los tipos de contenidos que queramos ofrecer, muchas veces nos convendrá más una consulta MySQL que descargue un texto largo, que varias consultas para mostrar tres campos en la página de inicio. Quiero decir con esto que si puedes maquetar todos esos contenidos cuando crees la página en el editor de WordPress u otro CMS, mejor. Si no es posible y es imprescindible mostrar esos campos, como un avance de los últimos posts, tira de consultas sin dudarlo, pero procura usar el mínimo de consultas posibles y utiliza las funciones nativas de WordPress.

Optimizar el peso y el tamaño de las imágenes

Si quieres mejorar la velocidad de carga de tus páginas web, debes saber que los elementos multimedia son los que más peso añadirán a la carga de cada página web. Los elementos multimedia más utilizados en las web son las imágenes y fotografías. Las usaremos como elemento gráfico junto a un párrafo, como fondo de páginas, logotipos, iconos, sliders, etc.. La verdad es que una buena fotografía en una buena maquetación gustará a la mayoría y serán totalmente imprescindibles cuando tienes un comercio electrónico, un catálogo o un porfolio. Así que, para aumentar en lo posible la velocidad de carga de tu web toca optimizar las imágenes y las fotografías, reduciendo su peso sin afectar a la calidad percibida.

El tamaño importa

Lo primero es exportar cada imagen con las dimensiones más cercanas a las cajas donde será utilizada. La puñeta viene cuando ha de ser una imagen responsive o con el tamaño apropiado para verse correctamente en pantallas retina. Entonces, elegir el tamaño mínimo posible más adecuado para cada caso, normalmente en torno a 768px de ancho.

Y el peso también

Si eres diseñador o fotógrafo, Photoshop y otros editores ofrecen herramientas como “Guardar para web”, donde podemos modificar algunos parámetros y nos dirá cuanto baja el peso y podemos observar si esa reducción afecta a la calidad visual percibida o no gracias a las previsualizaciones que ofrece. Decir que para iconos o ilustraciones con colores planos, sin degradados, pesan menos los archivos gif y png. Para fotografías o degradados, jpg.

Con los jpg podemos decidir el nivel de compresión. Para mí, por debajo del 60% entramos en la zona de riesgo y habrá que trabajar características como Desenfocar o Halo para disimular los artefactos que se irán creando. Por cierto, para subir a una web elegir siempre los jpg progresivos.

Con los gif y los png-8 podemos reducir el número de colores. Muchas veces el usuario aceptará de buen grado la imagen porque no ha visto el original para compararla. Pero cuidado, si acortamos demasiado, comenzará a verse mal y a cambiar muchos colores. Fíjate siempre en la previsualización. También podemos ajustar Tramado, Halo, Ajuste a web y Menos Calidad para reducir más el peso.

Con los png-24, ideales para degradados y transparencias, tendremos menos opciones de reducir el tamaño.

En todos estos casos, nos ayudará un poco no incluir los metadatos.

Herramientas web para optimizar imágenes fácilmente

Pero, ¿y si no quieres abrir Photoshop? Pues hay algunas soluciones web gratuitas muy eficaces en cuanto a la reducción de peso sin pérdida de calidad aparente o percibida como Compressor.io y Compressjpeg.com, entre otras. Son tan fáciles de usar como arrastrar la imagen a optimizar a un campo, esperar unos segundos y descargarte la imagen optimizada.

Compressor.io es especialmente buena y podemos elegir entre dos niveles de compresión y los tipos de archivo jpg, gif, png y svg, pero está limitada a una imagen por vez. Luego ofrece varias formas para guardar la imagen comprimida: descarga, guardar en Drive, etc..

Compressjpeg.com podemos subir de una vez hasta 20 archivos. Además, acepta jpg, png y pdf, aunque no gif. También nos permite hacer conversiones entre tipos de archivos. Eso sí, no podemos seleccionar el nivel de compresión.

Ambas herramientas web nos incluirá alguna palabra al final del nombre de cada archivo, por lo que tendremos que borrarlas a mano, pero el trabajo que hacen es tan bueno que se han convertido en habituales en mi trabajo.

Sin duda, optimizar las imágenes te ayudarán mucho a mejorar la velocidad de carga de tus páginas web, pero hay unos elementos multimedia aún más problemáticos.

¿Y qué pasa con los archivos de vídeo y los audios?

Pues mejor usar tipos de archivo mp4 o webm para vídeo y mp3 para audio. Otra forma es externalizar los vídeos alojándolos en Youtube o Vimeo y los audios en Soundcloud y similares y copiar los iframes que nos facilitan para insertar dichos elementos en nuestro código HTML o editor web.

Las tipografías que no disminuirán la velocidad de carga de tu web

Gracias a servicios como Google Fonts o las nuevas características CSS3 para incluir tipografías como @font-face podemos ofrecer mayor vistosidad con muchos y variados tipos de letra en nuestras páginas web, pero tienen un precio: añadir más peso o tiempo de carga.

Mejorarán la estética. Y lastarán un poco la velocidad de carga de una web. En el caso de Google Fonts hay que sumar el tiempo de llamada a los servidores de Google y la devolución de la fuente. Google lo tiene todo bien optimizado y no perderás mucho más de 200 ms en una tipografía. Pero si usas varias o una familia entera, ese tiempo aumentará bastante. En todo caso, Google te mostrará un cronómetro que marcará el tiempo de carga aproximado cuando elijas varios elementos de una misma familia.

Igual ocurre con el elemento CSS @font-face, al que enlazamos una tipografía guardada en nuestro servidor. Al llamar a un recurso externo, como si fuera una imagen o un archivo, habrá que esperar la carga de dicha tipografía. Usar ttf, eot, woff, etc., supone varias decenas de KB y otra llamada a recursos. Igualmente hay que emplearlas con moderación.

Pero hay una lista de tipografías que son universales que vienen incluidas en casi todos los ordenadores y si el usuario las tiene instaladas en su computadora, el navegador carga la tipografía desde su ordenador y no desde nuestro servidor, aumentando así la velocidad de carga de nuestras páginas. Se llaman Web Safe Font o Fuentes Seguras para Web. Son una grandísima ventaja con una pega muy grande, un limitado número de tipografías y que no son muy agraciadas.

De todas formas, nunca viene mal usar alguna de éstas para textos generales y una de Google Font o incrustada para elementos destacados como cabeceras.

Esta es la lista recomendada por la web W3schools.com:

Con serifa:

  • Georgia, serif
  • "Palatino Linotype", "Book Antiqua", Palatino, serif
  • "Times New Roman", Times, serif

Sans-Serif:

  • Arial, Helvetica, sans-serif
  • "Arial Black", Gadget, sans-serif
  • "Comic Sans MS", cursive, sans-serif
  • Impact, Charcoal, sans-serif
  • "Lucida Sans Unicode", "Lucida Grande", sans-serif
  • Tahoma, Geneva, sans-serif
  • "Trebuchet MS", Helvetica, sans-serif
  • Verdana, Geneva, sans-serif

Monospace Fonts:

  • "Courier New", Courier, monospace
  • "Lucida Console", Monaco, monospace

El uso es simple. En nuestras CSS usamos la propiedad “font-family” dentro de una clase o identificador y añadimos a continuación cualquiera de las líneas anteriores. Si el usuario no tiene la primera tipografía, se pasará a buscar la segunda o una genérica.

Ejemplo de uso:

.clase {
	font-family: Arial, Helvetica, sans-serif;
}

Y eso es todo por ahora

Todos estos pasos, más los descritos en la primera parte de este artículo, son los que tomé para mejorar en casi un segundo la velocidad de carga de mi web. Aún me quedan algunos por probar, pero ya lo iré haciendo.

Uno de ellos, muy interesante por cierto, es el uso de CDN. En resumidas cuentas se trata de alojar los archivos estáticos (imágenes, vídeos, scripts…) en un servidor externo que nos crea una imagen de caché, lo que hará que no tenga que cargar esos archivos y aumente así la velocidad de nuestro sitio web. Aquí lo explican muy bien: https://www.ovh.es/cdn/ventajas.xml

Nada más, espero que os haya sido útil toda esta información y no os haya aburrido mucho. Comentadme vuestras experiencias y enseñadme lo que aún me falta por aprender para seguir mejorando la velocidad de carga de mi web. Gracias a todos. Hasta la próxima.

<< Volver al blog


Deja un comentario

Tu dirección de correo electrónico no será publicada.