Diseño web y programación

Con el foco en php, laravel y geolocalización

Configurar el archivo .htaccess del servidor apache para obtener un mejor rendimiento

Configurar el archivo .htaccess del servidor apache para obtener un mejor rendimiento

El servidor Apache, es uno de los más utilizados en Internet, por lo que es de suponer, que nuestro proyecto web, esté alojado en uno de ellos. En este artículo vamos a configurar nuestro servidor, a través del archivo `.htaccess para conseguir el mejor rendimiento posible.

Aprender a configurar Apache es básico para cualquier desarrollador, y sobre todo, aprender a configurar el archivo .htaccess.

Según la wikipedia, el archivo .htaccess es:

Un fichero .htaccess (hypertext access), también conocido como archivo de configuración distribuida, es un fichero especial, popularizado por el Servidor HTTP Apache que permite definir diferentes directivas de configuración para cada directorio (con sus respectivos subdirectorios) sin necesidad de editar el archivo de configuración principal de Apache.

En otras palabras, un archivo que podemos subir al servidor, para cambiar la configuración de apache, en los casos en los que no tenemos permisos para poder modificar apache directamente. Situación que suele ser la habitual en los alojamientos compartidos y los servidores virtuales.

¿Y que podemos modificar desde nuestro archivo .htaccess?

Pues la verdad, es que una importante cantidad de variables, pero lo más habitual es:

1. Activar el módulo mod_rewrite:

El cual nos permite configurar el mapeado interno de urls del web. Por ejemplo, nos permitiría reescribir las urls siguientes:

//Sin mod_rewrite
www.midominio.com/index.php?articulo=1

//Con mod_rewrite
www.midominio.com/articulo/1

Para activar el módulo, tenemos que hacer lo siguiente:

## Comprueba si está el módulo mod_rewrite
<IfModule mod_rewrite.c> 
    ## Lo activa
    RewriteEngine On
    ## Añade las condiciones de reescritura
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

Aquí puedes encontrar más información sobre el tema: https://httpd.apache.org/docs/current/mod/mod_rewrite.html

2. Autorizamos que las imágenes externas sean cacheadas en nuestro servidor, usando CORS headers:

## Si el módulo  existe
<IfModule mod_setenvif.c>
    ## Si el módulo  existe
    <IfModule mod_headers.c>
        #Definimos el tipo de archivos a cachear
        <FilesMatch ".(gif|png|jpe?g|svg|svgz|ico|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

La cabecera Access-Control-Allow-Origin: http://www.misitio.com, nos permitiría dar acceso a un dominio concreto, en nuestro caso, autorizamos todos.

Podemos hacer lo mismo para autorizar la carga y cacheo de fuentes tipográficas externas:

<IfModule mod_headers.c>
    <FilesMatch ".(ttf|ttc|otf|eot|woff|font.css|css)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

3. Activamos la compresión de archivos para acelerar la carga del web:

## Si el módulo  existe
<IfModule mod_deflate.c>
    ## Activamos la compresión
    SetOutputFilter DEFLATE
    ## Definimos el tipo de archivos a comprimir... todos.
    AddOutputFilterByType DEFLATE application/x-httpd-php text/html text/xml text/plain text/css text/javascript application/javascript application/x-javascript image/jpeg image/jpg image/png image/gif font/ttf font/eot font/otf
</IfModule>

3.1 Otra forma de hacerlo, bastante más completa (pero que no todos los servidores la admiten)

<IfModule mod_deflate.c>
    # Force compression for mangled headers.
    # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html
    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>
    # Compress all output labeled with one of the following MIME-types
    # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
    #  and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
    #  as `AddOutputFilterByType` is still in the core directives).
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE application/atom+xml \
                                      application/javascript \
                                      application/json \
                                      application/rss+xml \
                                      application/vnd.ms-fontobject \
                                      application/x-font-ttf \
                                      application/x-web-app-manifest+json \
                                      application/xhtml+xml \
                                      application/xml \
                                      font/opentype \
                                      image/svg+xml \
                                      image/x-icon \
                                      text/css \
                                      text/html \
                                      text/plain \
                                      text/x-component \
                                      text/xml
    </IfModule>
</IfModule>

4. Protegemos el archivo .htaccess

<Files .htaccess>
        order allow,deny
        deny from all
</Files>

5. Forzamos el cacheo por parte del navegador:

<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|webp|swf)(.gz)?(?.*)?$">
        Header set Expires "Thu, 23 Aug 2222 00:00:00 GMT"
        Header unset ETag
        FileETag None
</FilesMatch>

Para ello, indicamos que los archivos deben cachearse hasta el año 2222....

6. Activar Keep Alive

Permite que el servidor y el navegador se comuniquen y optimicen las peticiones de documentos entre ambos, lo que supone una mejora en la velocidad de carga del web. En resumen, lo que hace es mantener abierta una única comunicación TCP entre ambos, sin necesidad de abrir una nueva cada vez que se realiza una consulta HTTP, como suele suceder cuando no está activa esta directiva.

Para activarla, solo tienes que añadir esto:

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

7. Forzar el modo seguro 'https'

RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

8. Forzar la codificación UTF-8

AddDefaultCharset utf-8
AddCharset utf-8 .atom .css .js .json .rss .vtt .xml

9. Compresión de archivos mediante GZIP

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Para más información sobre el tema...