En aquest article us ensenyarem a optimitzar llocs web basats en WordPress en servidors Plesk. Si teniu qualsevol altre tauler de control, aquest article també us serà útil: només cal adaptar la configuració d'Apache o Nginx. Abans de començar, introduirem alguns conceptes que farem servir al llarg d'aquest article, amb exemples.
- Memòria cau del navegador serveix per evitar que es descarregui repetidament un mateix fitxer. Per exemple, el logotip del nostre lloc web acostuma a ser el mateix a totes les pàgines. Si el desem a la memòria cau del navegador de l'usuari, evitarem que l'hagi de descarregar cada vegada que visiti una pàgina del nostre lloc web.
- Memòria cau del servidor WordPress funciona amb PHP i MySQL. Cada vegada que visitem un lloc web, s'executen consultes a la base de dades i després es processen amb PHP. Tot això requereix un cert temps. Amb la memòria cau del servidor, generem fitxers estàtics per evitar repetir aquestes consultes a la base de dades i el processament amb PHP.
- Compressió Gzip consisteix a comprimir fitxers per reduir-ne la mida. El navegador els descomprimirà directament.
- Minificació consisteix a eliminar els caràcters innecessaris dels fitxers HTML, CSS o JS. Això en redueix la mida i fa que es carreguin més ràpidament.
Aquest article s'ha elaborat amb un servidor sense visites, de manera que els temps de càrrega no milloren gaire, però sí que ho fa l'optimització. Cal tenir en compte que no és el mateix una visita simultània que 10 o 50: el servidor serà cada vegada més lent de manera exponencial. Per tant, qualsevol petit detall compta. No és el mateix que el vostre lloc web ocupi 600 KB i carregui 21 fitxers que que ocupi 375 KB i carregui 15 fitxers. El nombre de fitxers dependrà del nombre de connectors que hi tinguem instal·lats.
Per optimitzar Nginx, entrarem al tauler de Plesk i anirem a la subscripció que volem optimitzar. A sitios web y dominios trobarem l'opció "Configuración de Apache y Nginx". Al final de tot trobarem la configuració de Nginx. Marcarem les caselles "Modo proxy" i "Procesamiento inteligente de archivos estáticos" i a "Directivas adicionales de Nginx" introduirem el següent:
location ~* ^.+.(xml|ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
etag on;
if_modified_since exact;
add_header Pragma "public";
add_header Cache-Control "max-age=31536000, public";
}
gzip on;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_proxied any;
gzip_comp_level 5;
gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml;
gzip_vary on;Ara ja tindrem Apache configurat per utilitzar la memòria cau del navegador i la compressió Gzip.
Per optimitzar Apache, entrarem al tauler de Plesk i anirem a la subscripció que volem optimitzar. A sitios web y dominios trobarem l'opció “Configuración de Apache y Nginx“, i a “Directivas adicionales de Apache HTTP y HTTPS” introduirem el següent:
<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
# Corregeix errors dels navegadors (només cal per a navegadors molt antics)
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>
<IfModule mod_expires.c>
ExpiresActive On
FileETag None
ExpiresDefault "access plus 14 days"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "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/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType text/css "now plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/html "access plus 1 days"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz|html)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>Ara ja tindrem Nginx configurat per utilitzar la memòria cau del navegador i la compressió Gzip.
Optimitzar WordPress
Ara que ja tenim Nginx o Apache optimitzat, només ens queda optimitzar WordPress. Per fer-ho, utilitzarem els connectors següents:
- WP Super Cache Versió 1.6.2 | Per Automattic. Ens permet crear una memòria cau del servidor.
- Autoptimize Versió 2.3.4 | Per Frank Goossens. Ens permet minificar fitxers.
Un cop instal·lats, anirem a la configuració dels connectors i els configurarem segons aquestes captures de pantalla:
Aquí us deixem unes captures de pantalla de llocs web que comproven la nostra optimització. És normal que el temps de càrrega sigui molt superior, ja que aquests llocs web estan allotjats en servidors fora d'Espanya.
Ho heu provat? Deixeu-nos els vostres comentaris! 🙂
Nota: les optimitzacions de Nginx i Apache s'han obtingut de la base de coneixement de Plesk.com. Podeu ajustar els valors segons les vostres necessitats.