Speed ​​up WordPress site

Speed ​​check

You measure the site loading time and get recommendations for speeding up using the PageSpeed ​​Insights tool. We will look at 3 simple steps that are going to reduce the load time of your WordPress site.

Async JavaScript Plugin

The plugin is available at https://www.wordpress.org/plugins/async-javascript.

Render-blocking Javascript prevents your content loading until the javascript has finished loading. This can impact on your page loading speed.

Async JavaScript gives you full control of which scripts to add an ‘async’ or ‘defer’ attribute to or to exclude to help increase the performance of your WordPress website.

The picture below from the source shows the difference between async, defeat and none modes very well. I recommend activating async. If there are problems with the site, then activate defer.

After installing the plugin, in the WordPress control panel, go to Settings -> Async JavaScript. In the Enable Async JavaScript section, put the checkbox of the same name. In the Quick Settings section, select the mode. Next, save the settings.

Autoptimize Plugin

The plugin developed by the the same developer as Async JavaScript. It is available at https://wordpress.org/plugins/autoptimize.

Plugin capabilities are:

Aggregate, minify and cache scripts and styles; injects CSS in the page head by default, inline critical CSS; defer the aggregated full CSS; moves and defers scripts to the footer and minifies HTML; optimize and lazy-load images, optimize Google Fonts, async non-aggregated JavaScript, remove WordPress core emoji cruft and more.

Autoptimize plugin description

After installing the plugin, in the WordPress dashboard, go to Settings -> Autoptimize. In the JavaScript Options section, check the Optimize JavaScript Code checkbox. In the CSS Options section, check the Optimize CSS Code. Next, save the settings.

Data compression

Data compression allows you to reduce the size of the transmitted data by more than 2 times. The option is enabled on the server side. Installation process depends on server you using. It can be Apache or Nginx.

Apache Server

Go to the directory with the installed WordPress distribution on the hosting, add the following to the .htaccess file:

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

Nginx

The following must be added to the nginx.conf file:

gzip on;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

No access to WordPress files

In this case, you need to ask the hosting provider to enable GZIP data compression for WordPress.

Check data compression enabled

Now, we can verify that compression is enabled by using this tool: https://www.giftofspeed.com/gzip-test.

Telegram channel

If you still have any questions, feel free to ask me in the comments under this article or write me at promark33@gmail.com.

If I saved your day, you can support me 🤝

Leave a Reply

Your email address will not be published. Required fields are marked *