Website loading speed is a priority for the overall user experience, and it’s also one of the hundreds of SEO ranking factors. Page speed may depends on many different factors, however, following the essential recommended tips will make a significant difference on page loading speed. Here you will find a list of best practices to follow when creating and optimising your website:
Update the Theme and and included plugins
Make sure to update the Theme and pixfort core plugin to the latest version to get all the new features and improvements and bug fixes.
After updating the theme and pixfort core plugin go to Theme options to and click the Save button to refresh theme options values.
To enable updates for Essentials theme, you can check this article:
https://essentials.pixfort.com/knowledge-base/how-to-update-essentials-theme/
Remove unused plugins
Make sure to disable and remove any unused plugins, for example installing WooCommerce without using it include a lot of styling files and scripts into all the pages of the site which will slow down the site.
Also, installing Slider revolution or Master slider add a lot of stylings and scripts into all the pages of the website even if the sliders are not used in the pages.
We recommend you to check and delete all the unused plugins from WordPress admin panel > Plugins.
Reduce image sizes
Images can play a major role in your site speed. They’re often very large files, which can slow down page load times. We highly recommend using appropriately sized images and make sure to compress the large images before uploading them into the page, you can use a tool like tinypng.com where you can upload your images to be compressed the download the compressed version which can you upload and use into your website.
You can also install a plugin directly into WordPress to optimize your current images and the uploaded images, for example, you can check this plugin also by TinyPNG:
Compress JPEG & PNG images
Page load times can be significantly improved by asking visitors to save and reuse the files included in your website.
-
Reduces page load times for repeat visitors
-
Particularly effective on websites where users regularly re-visit the same areas of the website
-
Benefit-cost ratio: high
-
Access needed
You can enable caching on your website in different way, you can use one of the premium plugins to speed up your website, for example you can check WP Rocket plugin which is tested with Essentials to give great results:
WP-Rocket also provides CDN service that can significantly improve your website speed to your international visitors by hosting all your static files on different servers around the world so when a visitor opens your website the assets will be loaded from the closest server to increase loading speed and reduce the load on your main server.
You can also check other free plugins which provide caching options capabilities.
The smaller your files, the faster your pages will load. Compression files is one of the easiest ways to reduce load times, and today, enabling compression with Gzip is considered standard practice.
Gzip is a file format and software application that essentially locates strings of similar code in your text files, then temporarily replaces them to make the files smaller.
Gzip will reduce the size of files sent from your server to increase the speed to which they are transferred to the browser.
-
Reduce sizes of pages by up to 70%
-
Increase page speed
-
Cost-benefit ratio: high
-
Access needed to the .htaccess files or server administration files
This works well with CSS and HTML, because these files typically have repeated code and whitespace.
If you’re not sure if your site has Gzip enabled, you can use www.giftofspeed.com/gzip-test to check. Just enter your site’s URL, and if you have Gzip enabled, you’ll see something like the image below:
If you don’t have Gzip enabled, however, you’ll want to fix this as soon as possible.
Gzip in your .htaccess file. The exact code you need depends on your server but if your site runs on Apache you will need to add the following lines to your .htaccess file:
<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>
To enable compression in NGINX you will need to add the following code to your config file:
gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; # Disable for IE < 6 because there are some known problems gzip_disable "MSIE [1-6].(?!.*SV1)"; # Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6 gzip_vary on;
Disable Gutenberg CSS when not used
If you are not using WordPress Gutenberg editor in a page (especially the homepage) you can disable loading Gutenberg CSS files by default in the page, to do this open the page settings then change the option “Disable Gutenberg CSS from this page” to “Yes”:
Optimize Contact form 7 plugin css file
if you use Contact form 7 plugin on your website you can optimize the plugin css file loading by enqueuing it inside the theme css file to combine the files and fetch it directly in one file instead of multiple standalone requests in the site which may improve pages loading speed, to do this go Theme options > General settings > Advanced >Enqueue Contact form 7 styling inside the theme > On:
Disable the fixed gradient colors
To improve the website performance on some relatively old browsers you can disable the fixed gradient background colors, to do this enable the option “Disable fixed gradients” from Theme options > Layout > Colors: