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.
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.