La velocidad y el rendimiento de su página web son muy importantes para asegurar una buena experiencia para sus clientes. Si su sitio es demasiado lento, no solo va a perder visitantes, sino también clientes potenciales. Los motores de búsqueda como Google utilizan la velocidad de carga de los sitios web como factor importante para el ranking de búsqueda, por lo que a la hora de optimizar su sitio deben tomarlo en consideración. Recuerde que cada milésima de segundo cuenta.
Estas son algunas sugerencias básicas y generales para mejorar el rendimiento de un sitio.
1. Aplazar la carga de contenido en la mayor medida posible
Ajax nos permite crear páginas web que pueden ser actualizadas de forma asincrónica en cualquier momento. Esto significa que en lugar de recargar toda la página cuando un usuario realiza una acción, simplemente podemos actualizar partes de la página.
Vamos a utilizar una galería de imágenes como ejemplo. Los archivos de imágenes son grandes y pesados, y pueden reducir la velocidad de carga de las páginas. En lugar de cargar todas las imágenes cuando un usuario visita la página web, sólo puede mostrar miniaturas de las imágenes y luego, cuando el usuario de clic en ellos, de forma asíncrona puede solicitar las imágenes a tamaño completo desde el servidor web y actualizar la página. De esta manera, si un usuario sólo quiere ver unas cuantas fotos, no tienen que sufrir la espera de cargar todas las imágenes. Este patrón de desarrollo se llama carga diferida.
Utilice Ajax y/o bibliotecas de desarrollo web como jQuery, Prototype y MooTools que poseen herramientas de carga de contenido con Ajax fáciles de implementar.
2. Utilice archivos .JS y .CSS para guardar el código JavaScript y CSS respectivamente
Cuando el usuario carga por primera vez su página web, el navegador cachéa toda su página, como archivos CSS y JavaScript. Así, en lugar de repartir código CSS y JavaScript por todo su sitio, lo mejor es agruparlos en archivos externos.
El uso de código CSS dentro del archivo html o php también aumenta el tiempo de procesamiento de una página web, tener todo agrupado en un archivo CSS permite que el navegador haga menos trabajo al generar la página, puesto que ya conoce todas las reglas de estilo que necesita aplicar.
Como beneficio adicional, el uso externo de JavaScript y CSS hace que el mantenimiento del sitio sea más fácil porque sólo tiene que mantener archivos globales en lugar de código repartidos en varias páginas web.
3. Uso de sistemas de almacenamiento en caché
Si usted cuenta con un sitio que se conecta a la base de datos con el fin de crear el contenido del mismo, es hora de empezar a utilizar un sistema de almacenamiento en caché. Al contar con un sistema de almacenamiento en caché en su sitio web, sólo tiene que crearse el contenido una sola vez en lugar de crear el contenido cada vez que se visita la página por los usuarios. Pero no te preocupes, los sistemas de almacenamiento en caché periódicamente actualizar sus cachés dependiendo de actualizaciones o modificaciones, por lo que incluso paginas en constante cambio (como un blogs con comentarios) puede ser almacenados en caché.
Populares sistemas de gestión de contenidos como WordPress y Drupal poseen características estáticas de almacenamiento en caché que convierten páginas generadas dinámicamente a archivos HTML estáticos para reducir el procesamiento innecesario del servidor. En caso de trabajar con WordPress, echa un vistazo a Súper GT caché. Drupal tiene posee una función de almacenamiento en caché de la página en su core.
PHP tiene extensiones llamadas aceleradores de PHP que optimizan el rendimiento a través de almacenamiento en caché y varios otros métodos, un ejemplo de un acelerador de PHP es APC. Base de datos de almacenamiento en caché mejora el rendimiento y la escalabilidad de sus aplicaciones web mediante la reducción de los trabajos asociados a la base de datos de lectura, escritura y procesos de acceso; memcached, por ejemplo, almacena en caché las consultas de base de datos de uso frecuente.
4. Evite Redimensionamiento de imágenes en HTML
Si una imagen es originalmente 1280×900 px en dimensión, pero es necesario mostrarla en tamaño 400×280 px, debe cambiar el tamaño y volver a guardar la imagen con un editor de imágenes como Photoshop en lugar de utilizar ancho de HTML y atributos de alto (es decir, <img width = “400” height = “280” src = “myimage.jpg” />). Hay que tener en cuenta que una imagen más ancha y/o alta siempre será más grande en tamaño de archivo que una imagen más pequeña.
Recuerde, en lugar de cambiar el tamaño de una imagen utilizando HTML, cambie su tamaño utilizando un editor de imágenes como Photoshop y guárdelo como un archivo nuevo.
5. Es importante no utilizar imágenes para mostrar texto
No sólo el texto de una imagen va a ser inaccesible para los motores de búsqueda y completamente inútil para SEO, sino que también el uso de imágenes para mostrar texto aumenta los tiempos de carga de las páginas web, ya que significa más peso de archivos para descargar.
Si tiene que usar las fuentes personalizadas en su sitio web, aprender acerca de CSS @ font-face para mostrar texto con fuentes personalizadas de manera más eficiente. No hace falta afirmar que debe determinar si la carga de los archivos con las fuentes será más óptimo que tener las imágenes.
6. Optimizar el tamaño de las Imágenes al utilizar el formato de archivo correcto
Al seleccionar el formato de imagen de su sitio web, se puede optimizar el tamaño de los archivos sin perder calidad. Por ejemplo, a menos que necesite transparencia de una imagen (capas alfa) que el formato PNG ofrece, el formato JPG a menudo muestra imágenes fotográficas en tamaños de archivo más pequeños.
Además, hay muchas herramientas que puede utilizar para reducir aún más el peso de archivos de imágenes.
7. Optimizar la forma de escribir código
Mire alrededor de su código fuente. ¿Usted realmente necesita todas las etiquetas que está usando o se puede utilizar CSS para ayudar en su página? Por ejemplo, en lugar de utilizar <h1><em>Su título</em> </h1>, usted puede usar CSS para hacer que sus títulos lleven letra cursiva mediante la propiedad font-style. Escribir código de manera eficiente no sólo reduce el tamaño de los archivos de documentos HTML y CSS, también hace que sea más fácil su mantenimiento.
8. Cargue sus archivos JavaScript al final del documento
Es mejor si usted tiene los scripts de carga al final de la página en lugar de al principio. Permite que el navegador muestre todo antes de empezar con el código JavaScript. Esto hace que sus páginas web se sienta más ágil porque la forma de carga de los archivos JavaScript es que bloquea cualquier cosa debajo hasta que se haya terminado la descarga. Si es posible, ingrese sus archivos de JavaScript justo antes de la etiqueta de cierre <body> en sus documentos HTML.
9. Optimizar el almacenamiento en caché Web
Junto con el uso de sistemas de almacenamiento en caché, debe crear sitios web que utilizan el almacenamiento en caché web tanto como sea posible. Almacenamiento en caché Web es cuando los archivos se almacenan en caché por el navegador web para su uso posterior. Las cosas que los navegadores pueden incluir en caché son los archivos CSS, archivos de JavaScript e imágenes.
Aparte de los aspectos básicos, como poner CSS y el código JavaScript que se utilizan en varias páginas en archivos externos, hay muchas maneras de asegurarse de que usted está cachéando los archivos de la manera más eficiente posible.
