Menú


Mejorar la velocidad web

Actualmente nadie quiere una web lenta. Mejorar al máximo la velocidad web, es uno de los punto más importante para un buen posicionamiento en buscadores.Como mejorar la velocidad web de su página, como mejorar el rendimiento de una web y superar con nota los informes de pingdom, de pagespeed inshigts o lighthouse report. Varios son los factores que ayudan a mejorar la velocidad de carga de una página Web

Tiempo de respuesta del servidor

Este punto no depende directamente de nosotros como creadores Web, pero si es nuestra responsabilidad procurar que el servidor con el que trabajamos tenga unas prestaciones que nos ofrezca un tiempo de respuesta óptimo. Desde aquí no vamos a recomendar a ningún proveedor de servicios a no ser que nos paguen claro.

Haced una búsqueda por internet y la mayoría de los que salen deberían servir. Nosotros tenemos servidores en varios proveedores, la mayor parte en España, por un tema de logística, propagación y comunicación. Aunque por el mismo motivo también disponemos de alguno en Estados Unidos. Estamos satisfechos de todos ellos. La razón de tener varios son las siguientes:

  • Protección ante caídas, si un servidor cae, no afecta a todas las webs, solo lo hace a las webs del servidor caído. Si su caída se prolonga demasiado, podemos hacer un backup temporal de sus webs en otro que si funcione.
  • Comparación precios/servicios: Nos permite controlar la relación calidad precio de los servicios y productos ofrecidos y tomar las decisiones necesarias que más convengan a nuestra empresa.
  • IP: Nos permite tener varias direcciones IP distintas. A veces tener varias webs de una misma temática saliendo desde la misma IP puede suponer un problema para Google. Lo mejor es distribuirlas entre varias direcciones IP.

Un consejo que os damos para poder adecuar el servidor a nuestras necesidades, es que contrateis un servidor exclusivo para vosotros y a poder ser administrado. De esta manera es vuestro proveedor el que se encarga de mantener la máquina al día, de actualizar el software y las aplicaciones a las últimas versiones estables. Además podréis instalar paquetes y recursos que podáis necesitar para vuestros proyectos.

Siempre hay quien querrá llevar el mantenimiento de su propio servidor, pero cada uno debe saber a qué destinar su tiempo y lo más importante, donde este tiempo es más productivo.

Os dejamos una serie de proveedores para que los consulteis:

ETag o entity tag (etiqueta de entidad en español)

Es un parámetro que forma parte de la cabecera del protocolo HTTP y básicamente sirve para la validación de la cache. Para determinar si el contenido de una url ha cambiado o no.

Como solucionar eTags o entity tags

Serve Static Content From A Cookieless Domain

Aquí el problema está en que una vez un servidor configure una cookie (Galleta) para un dominio concreto, todas las siguientes peticiones HTTP que se realicen incluirán esa o esas coockies. Este envío de información adicional supone un coste en tiempo que, lógicamente, aumenta según el número de galletas que configuremos. Exiten varias soluciones al respecto, algunas de ellas, yo creo que todas, con la entrada del protocolo HTTP/2 ya no tendrán demasiado sentido.

Como solucionar Serve Static Content From A Cookieless Domain

Reducir de peticiones internas

En este punto nuestra misión es reducir a lo imprescindible el número de peticiones internas que realiza nuestra página web. En caso de no poder reducirlas más, contemplar la posibilidad de hacerlo al final de la página o en diferido. Las peticiones internas, engloban toda llamada a otros archivos (css,js,imagenes,fonts...) y también, consultas a la base de datos. Ver apartados Carga de archivos css y js (Eliminate render-blocking resources) y Peticiones a la base de datos

Como solucionar y reducir el número de peticiones internas

Reducción de peticiones externas (Reduce DNS Lookups)

Toda llamada a un archivo o imagen que esté fuera de nuestro dominio, es una llamada externa. Y por lo tanto un gasto temporal a reducir. Hay que intentar reducir este número a 0. En el siguinte enlace os explicamos como.

En este apartado también trataremos los enlaces a páginas externas. Como marcarlos para que no afecten al rendimiento de nuestra Web.

Como solucionar y reducir el número de peticiones externas

 

Minificación de css y js (Minify ccs y js)

La minificación de archivos trata de reducir al máximo el peso de estos para que afecten los menos posible en la carga de la página web. Aunque principalmente trata sobre los archivos de estilo .css y los javascript .js la podríamos hacer extensible a los .html y a todos aquellos que se puedan editar.

Como solucionar la Minificación de css y js (Minify ccs y js) y otros archivos

Cache (Specify a Cache Validator)

Como a estas alturas todo el mundo ya sabrá, la cache es un memoria interna de los ordenadores que se encarga de cargar, archivos ya visitados previamente y que en un principio no han sufrido cambio alguno. De esta manera, se ahorra mucho tiempo de carga y conexión pues imágenes, estilos y otros recursos se cargan en local. Configurar de forma óptima esta memoria puede mejorar mucho los resultados.

Como mejorar las prestaciones de la cache

 

Carga de archivos css y js (Eliminate render-blocking resources)

Como optimizar la carga de los archivos .css y .js es uno de los actuales quebraderos de cabeza de todo programador web. Aquí os explicaremos todos los trucos y acciones que podéis hacer para conseguir los mejores resultados.

Este punto resulta especialmente tedioso en los CMS o ecommerce como prestashop, magento, wordpress... Sobretodo si los sobrecargamos de módulos, plugins y demás sin cuidar la construcción del código.

Como mejorar la Carga de archivos css y js (Eliminate render-blocking resources)

Optimización de imágenes: Peso y resolución

¡Se abre la guerra entre diseñadores y programadores! Como enfocar el tema de las imágenes para una web. Claro esta que cada cual defiende su departamento, pero a la hora de contruir una página, hay que tener en cuenta a quien va dirigida y que se quiere transmitir.

Si el objeto de la web es el diseño, el arte, la belleza.., esta claro que tenemos que jugar con una estética general muy diferente a la de wikipedia por ejemplo. Encontrar el equilibrio entre estética y celeridad no es fácil y siempre es subjetivo. Si finalmente decidimos trabajar con una carga gráfica importante, habrá que mirar otras opciones como la carga diferida o lazy-load

Nosotros, por si las moscas, no nos mojaremos, pero si os diremos como conseguir el máximo rendimiento en la optimización de imágenes. Después allá cada cual.

Como también podréis comprobar en esta web, apostamos por un diseño muy minimalista orientado a destacar el conocimiento y el acceso a él. NO la estética.

Como optimizar imágenes: Peso y resolución

Redirecciones 301

Por Dios! Evitad las redirecciones inútiles y solo usad las necesarias. Una web bien planificada, debería tener como máximo una o dos redirecciones 301. Las del HTTP al HTTPS y poco más.

Si habéis hecho una migración de la página o del dominio, ya es otro cantar, más si se han modificado las urls. Pero entonces se debería planificar la eliminación paulatina de estas redirecciones.

Cada redirección relentiza un poco más la carga de nuestra web. Pingdom o programas de rastreo (Crawlers) como screamingFrog, os ayudarán a detectar estas redirecciones para que valoréis si resolverlas o no. En el enlace siguiente, además de explicaros como evitarlas, también os aconsejaremos si hay que mantenerlas y hasta cuando.

Lenguage de programación

Elegir el lenguaje de programación no deberías de suponer un problema. Actualmente la mayoría de ellos ofrecen las suficientes prestaciones y funcionalidades para hacer un trabajo más que correcto. Lo que si deberíamos de cuidar es como en toda apliación, programar de la forma más optima posible minimizando el uso de recursos.

Lo que si es muy recomendable es programar de forma limpia y a poder ser separando claramente el código. De esta manera la migración a otros lenguajes no debería ser un problema.

La programación de esta web, está hecha en PHP. Si alguien nos pregunta si utilizamos algún framework. Les diré que con el tiempo hemos creado el nuestro propio.

El lenguage de programación, no debería afectar afectar al marketing digital de la web. Si le afecta, buscar otro programador.

Más sobre lenguages de programación web

Optimización del código

Escribir código de forma optimizada es relativamente sencillo. Lo único que hay que hacer es mantener un criterio y unas normas que nos ayuden a seguir un patrón y una coherencia.

Actualmente los lenguajes de programación permiten ser muy descriptivos con los nombres de las variables y las funciones, pero si podemos reducir al máximo el número de carácteres utilizados mucho mejor. Más cuando se trata de archivos con basstantes lineas de código. Por ejemplo, no es lo mismo definir una variable númerica para contar elementos como contadorDeArticulos que como i. En la primera definicion queda mucho más claro lo que significa, pero en el segundo caso, el peso del archivo que contiene es menor. Si multiplicamos este caso por cientos o miles de lineas de codigo, podeis suponer que la diferencia puede ser importante.

Este factor toma especial relevancia, en lenguages como JQuery, js, css o el propio html, pues el peso (Kb) del archivo que los contiene tiene que ser soportado por la carga de la página. Entonce cuanto más ligero mucho mejor. De hecho la acción de minificar tratada en el punto Minificación de css y js(Minify ccs y js) hace eso por nosotros.

Saber más sobre optimización del código.

 

Carga diferida o lazy-load

La carga diferida (defer), también conocida como lazy load, consiste en cargar archivos css, js e imágenes, justo después de la carga del documento html. Esta operación debe llevarse a cabo solo con los ficheros que no sean imprescindibles para la primera carga de la web. Si quieres saber como hacer consulta el siguiente enlace:

Carga de imágenes lazy load y carga diferida.

 

Peticiones a la base de datos

Controlar las peticiones a la base de datos, es una obligación del buen programador. Cada conexión o petición a la base de datos, es un tiempo que podemos reducir. Para ello, no solo hay que programar bien, también hay que dimensionar correctamente la estructura de la base de datos. A veces es mejor sacrificar espacio evitar consultas.

Crear una base de datos, no debería ser menospreciado. Una buena estructura puede facilitar y minimizar de forma importante el acceso a los datos.

En esta página no utilizamos base de datos al uso. En su defecto utilizamos archivos y variable para almacenar los datos que nos interesa. Que como podéis suponer, también los hemos reducido al mínimo.

Más sobre reducción de peticiones a base de datos.

Compresión de archivos

Los servidores pueden comprimir los archivos js, css, html, svg, xml y woff antes de enviarlos para que la página web los descargue. Este tiempo de procesamiento es menor que el que se perdería si se enviará el archivo a tamaño original. Por lo tanto vale la pena realizar la compresión.

Como comprimir archivos antes de enviar.

Carga web font

Para todos aquellos que quieran utilizar las fuentes de Google sin ralentizar la carga de la página, existe solución. Ver también el punto Carga de archivos css y js (Eliminate render-blocking resources) de este mismo artículo.

Como cargar las fuentes de Google sin relentizar la carga de la página.

Script Analitycs

El script de Analytics, es otros de los complementos externos que generan avisos en las aplicaciones que analizan el rendimiento de nuestro site. Si quieres saber como optimizar al máximo su descarga, sigue el enlace inferior. Consulta también el punto Carga de archivos css y js (Eliminate render-blocking resources) de este mismo artículo.

Cargar analytics sin ralientizar la carga de página.

Artículos relacionados