Optimización de Sitios Web

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Que tal amigos de la blogosfera, hoy en día hacer una página es más rápido que antes gracias a las herramientas de publicación y editores de contenidos que facilitan este proceso, sin embargo, un factor que siempre debe tomarse en cuenta es: ¿qué tan rápida es la carga de nuestro sitio web?

Aquí les dejo algunas recomendaciones para optimizar la carga de su sitio web

Reducir la cantidad de peticiones HTTP

Por cada imagen, hojas de estilos, scripts que se tengan en tu página web, el navegador realiza una petición al servidor para descargar dicho contenido,  como buena práctica se puede:

  • Usar CSS Sprites: Combinar iconos y pequeñas imagines en una sola imagen y mediante CSS utilizar las coordenadas de cada elemento como una imagen de fondo
  • Combinar los Scripts: Luego de haber definido que librerías y plugins javascript se van a utilizar, se puede crear un master file llamado vendor.js y combinar todo este código en un solo archivo.
  • Cache: Poder indicarle al navegador cuando un recurso expira y este debe solicitar uno nuevo.

Redes de Distribución de Contenidos (CDN)

La distancia desde donde se hace la solicitud hasta donde el servidor se encuentra localizado juega un papel importante en el tiempo de respuesta, se recomienda el uso de CDN para las imágenes y scripts que no cambian con frecuencia. En el siguiente en enlace podran encontrar una lista de CDN gratuitos que pueden utilizar para optimizar la carga de su sitio web http://www.wpexplorer.com/free-cdn-services-for-wordpress/

Compresión Gzip

Es de buena práctica comprimir los documentos HTML, hojas de estilos y scripts asociados utilizando Gzip, no se recomienda la compresión de imágenes, documentos de Word, PDF, SWF y otros formatos que no son tipo texto. Google nos explica como funciona la compresión en Gzip https://developers.google.com/speed/articles/gzip

Estructura del Documento HTML

Seguir las siguientes recomendaciones pueden tener un impacto positivo en la carga de nuestra página

  • Colocar las hojas de estilos al principio del documento
  • Colocar los scripts al final
  • Evitar el uso de CSS en línea al igual que Javascript
  • Evitar la inclusión de scripts duplicados
  • Evitar el uso de expresiones en CSS
  • Utilizar la versión de código mínima de los scripts

Este post toma como referencia el libro High Performance Web Sites de Steve Souders http://stevesouders.com/hpws/

Entradas relacionadas
WordPress Linting Hero Image
Tips

WordPress Linting

El uso de linting nos ayuda a mantener el estándar en nuestro código fuente, forzando al programador o grupo de programadores a seguir ciertas reglas preestablecidas, unificando de esta manera la legibilidad del mismo.

Leer Más >>
ES6
WEB

Promesas ES6

Las promesas son objetos que retornan un valor en el futuro. Debido a la manera asíncrona que funciona JavaScript, se pueden seguir ejecutando el código sin necesidad de esperar que otro proceso termine.

Leer Más >>
Visual Studio Code Plugins
Tips

Visual Studio Code Plugins

Visual Studio Code es un editor de código fuente altamente configurable que puede ser instalado tanto para Windows como Linux y macOS. Dentro de sus características esta el soporte para control de versiones, diferentes herramientas de depuración e instalar plugins de terceros.

Leer Más >>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *