Mejorar el rendimiento de un sitio web basado en Apache, de forma sencilla.

La velocidad de tu sitio web, o mejor dicho, el tiempo de carga de la página es un factor importante para aumentar su rendimiento y visualizaciones.

Esto no es obtener una clasificación alta en Google, Bing u otros medidores como GTmetrix. Realmente estos medidores de velocidad, solo son prácticos cuando desarrollas la web. A la hora de obtener ganancias, por ejemplo con Adsense no se tienen en cuenta. ¿Acaso piensas que Google penaliza un sitio por el retraso de sus propios scripts de anuncios?.

No se lo cree nadie, tú tampoco deberías.

Aquí lo que sucede es, que la frase «Mejorar el rendimiento de un sitio web», vende mucho entre los blogueros profesionales que solo buscan el beneficio económico. Yo me rio cuando visitas las supuestas páginas que ponen de ejemplo con una puntuación altísima, y observas que son templates vacías, sin ningún contenido, ja, ja. Ni caso, lo ideal es seguir unos códigos de trabajo y conducta optimizados por ti mismo y, no dejarte llevar por todo lo que leas por internet.

Pese a lo dicho, existen ciertas prácticas que son básicas a la hora de obtener una mayor velocidad de tu web. Pero ojo… esto no es cosa de brujería, ni existe ninguna pócima mágica como en Asterix y Obelix, es tan simple como tener conocimientos básicos de tu servidor.

En este artículo veremos como comprimir los archivos de tu web para que corra más rápido, y otros apuntes realmente interesantes y atractivos para una mejor experiencia del usuario final. Comenzamos.

Mejorar el rendimiento de mi web

Mejorar el rendimiento de un sitio web

Cada punto expuesto mejorará la velocidad de tu web de manera considerable.

Habilitar el almacenamiento en la caché del navegador cliente

La caché del navegador almacena los archivos más usados de tu sitio web, en el navegador de los visitantes. Esto es vital, ya que reduce la carga de tu servidor web y reduce el tiempo de carga de los usuarios habituales.

Agrega lo siguiente en tu archivo .htaccess.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Habilitar la compresión Gzip

Gzip es una herramienta que busca y encuentra cadenas similares en un archivo de texto (css y html). Estos archivos son temporalmente sustituidos por otros más ligeros, de forma que el visitante de tu sitio lo reciba más rápido. La compresión Gzip reduce el tamaño de los archivos enviados en un 70%, algo que se nota y mucho.

Puedes copiar y pegar lo siguiente en tu archivo .htaccess, podrás mejorar el rendimiento de manera considerable.

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
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>

Imágenes optimizadas

Recuerda que tus imágenes deben ser lo más pequeñas (en peso) posible. Utiliza formatos de imagen png o jpeg y evita los gif, bmp y tiff, que suelen ser mucho más pesados. Para ayudarte en la tarea, puedes utilizar la función «save for web« de Gimp, o algún plugin en el caso de que uses un CMS como WordPress.

Optimizar imágenes para mejorar el rendimiento

Minimizar las solicitudes HTTP

Cuantas más solicitudes HTTP tengas en tu página, más se eleva el tiempo de carga del sitio. Para reducir la cantidad de solicitudes HTTP, debes combinar los archivos CSS principales, también los Javascript y las imágenes en sprit, para esto ultimo puedes revisar este artículo.

Habilitar KeepAlive

La función KeepAlive permite utilizar la misma conexión TCP para HTTP de manera consecutiva, con el consecuente ahorro de servidor y mejorar el rendimiento de forma considerable. Lo podríamos traducir como una conexión persistente. Su implantación es bien sencilla, copia y pega lo siguiente en tu archivo .htaccess.

<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>

Deshabilitar el enlace externo de imágenes

Más conocido como Hotlinking, una buena forma de mejorar el rendimiento de tu web es evitarlo. El enlace externo de imágenes desde otros sitios es altamente perjudicial para tu sitio, piensa que algún caradura ha recreado tu artículo o imagen en alguna web o foro. Estos visualizan tu imagen en su sitio web, pero el consumo real lo tienes tú.

Para deshabilitar estos enlaces directos de imágenes jpg, jpeg, png o gif, y mejorar el rendimiento, puedes insertar el siguiente código en tu archivo .htaccess. Nosotros, en nuestro ejemplo también metemos una imagen que se enviara, en vez de la solicitada.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?sololinux.es [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ https://e00-elmundo.uecdn.es/assets/multimedia/imagenes/2018/12/12/15446475687216.jpg [NC,R,L]

Otros consejos

Minimizar el HTML, CSS y JavaScript, también es importante. Existen cientos de herramientas que te ayudaran en este proceso, pero básicamente lo que hace es, eliminar espacios adicionales, saltos de línea y sangrías del código. Mejorar el rendimiento.

También conviene colocar los archivos javascript, en el pie de página del sitio. Esto fuerza a los navegadores a que carguen primero el contenido y después los archivos Javascript.

Nota final: Con tan solo seguir este tutorial, debes notar una mejoría considerable a nivel visual de tu sitio web.

Canales de Telegram: Canal SoloLinux – Canal SoloWordpress

Espero que este artículo te sea de utilidad, puedes ayudarnos a mantener el servidor con una donación (paypal), o también colaborar con el simple gesto de compartir nuestros artículos en tu sitio web, blog, foro o redes sociales. Mejorar el rendimiento de un sitio web.