In this article, we will show you how to optimize WordPress websites on Plesk servers. If you use another control panel, this article will also be useful; you just need to adapt the Apache or Nginx configuration. First, we will introduce some concepts that we will use throughout this article, with examples.
- Browser caching prevents files from being downloaded repeatedly. For example, our website's logo is usually the same on every page. Caching it in the user's browser means they will not have to download it again for each page they visit on our website.
- Server caching WordPress uses PHP and MySQL. Every time we visit a website, queries are run against its database and then processed with PHP. All of this takes time. Server caching generates static files to avoid repeating these database queries and PHP processing.
- Gzip compression compresses files to reduce their size. The browser decompresses them automatically.
- Minification removes unnecessary characters from HTML, CSS, or JS files, reducing their size and making them load faster.
This article was prepared using a server with no traffic, so loading times do not improve much, but optimization does. Keep in mind that one concurrent visit is different from 10 or 50: the server will become exponentially slower. Every small detail therefore counts. A website that takes up 600 KB and loads 21 files is different from one that takes up 375 KB and loads 15 files. The number of files will depend on the number of plugins installed.
To optimize Nginx, open the Plesk panel and go to the subscription you want to optimize. Under sitios web y dominios, you will find the "Configuración de Apache y Nginx" option. At the bottom, you will find the Nginx settings. Select the checkboxes "Modo proxy" and "Procesamiento inteligente de archivos estáticos" and enter the following in "Directivas adicionales de Nginx":
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;Apache is now configured to use browser caching and Gzip compression.
To optimize Apache, open the Plesk panel and go to the subscription you want to optimize. Under sitios web y dominios, you will find the “Configuración de Apache y Nginx“ option. Enter the following in “Directivas adicionales de Apache HTTP y HTTPS”:
<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>
<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>Nginx is now configured to use browser caching and Gzip compression.
Optimize WordPress
Now that Nginx or Apache is optimized, all that remains is to optimize WordPress. To do this, we will use the following plugins:
- WP Super Cache Version 1.6.2 | By Automattic. Allows us to set up server caching.
- Autoptimize Version 2.3.4 | By Frank Goossens. Allows us to minify files.
Once installed, open the plugins' settings and configure them as shown in these screenshots:
Here are some screenshots from websites that check our optimization. Much longer loading times are normal because these websites run on servers outside Spain.
Have you tried it? Leave us your comments! 🙂
Note: the Nginx and Apache optimizations were taken from the Plesk.com knowledge base. You can adjust the values to suit your needs.