Phlox Performance Guideline
In this article, we will explain some tips to improve your website's performance and loading time.
Note
Using a CDN service to serve the external script files will improve the performance drastically.
How do I know what is slowing down my website?
The best specific and simple way of doing this is to open the browser console and monitor the network tab. This is something that is available for all the major browsers. For example, this is the Firefox network tab in the developer tools:
Please note that if your page is already loaded, you need to open the network tab and reload the page in order to see the results.
You can see the name of the resources, their type, their size, their waterfall timing chart and other useful information here.
The first thing to look for here is the initial page request and the time it's taking to receive the response. This is usually the first line of this report.
If the initial request is too slow, then you need to apply some improvements to your server-side, which usually is the Apache webserver.
Upgrade your PHP version to 7.1+
One thing that can be done for this, is to upgrade to the most recent version of PHP e.g. version 7.1+ which has a significant impact on your overall performance and security.
Another thing that can be done from your server-side is to use cache tools. One of the most popular cache tools which we also use on our own servers is the FPM mode. Please refer to the following links for more information on FPM:
For the things mentioned above, you need to be in contact with your host provider.
Other things to consider, are the assets that are loading after the initial request. For example the CSS or JS files or the images on your page.
For images, it's up to you that what kind of images you are using on your pages with what sizes. Obviously editing and optimizing your images before uploading them to your WordPress website will have a better result on your page speed.
Here is an online popular image optimizing service that you can use for optimizing your images:
Also please note that there are already many options for improving performance in Phlox built-in widgets. For example, if you are using the Advanced Image widget on the pages which you are creating with Elementor, you can enable the Preload image option under the Settings tab.
The same option is also available for most of the post related widgets, for example, Grid & Carousel Posts:
Or the Lazyload feature which is also available for some widgets, for example, Modern Gallery:
For other assets like CSS and JavaScript files, the best way to optimize them is by combining and minifying them. And one of the most recommended plugins for this it the Autoptimize. Here is a useful article for configuring Autoptime plugin:
Along with the tips from the top article, we recommend that you adjust two more options in the Extra tab:
Set the Google Fonts option to the Combine and link in head and enable the Remove query strings from static resources option:
Cache plugins
We recommend using one of the following plugins together with Autoptomize.
These plugins create static HTML files and store them on the server’s disk. This allows the webserver to deliver the static HTML files avoiding resource-intensive backend processes from the WordPress core, plugins, and database lookups.
Note
Please remember to only use one of the above plugins. You can choose either and use it together with the Autoptimize plugin.
For a better experience, we recommend configuring the cache plugins as it's demonstrated in the following screenshots:
Cache Enabler:
WP Super Cache:
Leverage Browser Caching
Leverage Browser Caching means storing static files of a website in a visitor browser. And then retrieving them from the browser quickly instead of the server. Actually, it uses to speed up each page of a website. To enable this, you can simply use the following plugin which sets the necessary configuration in the .htaccess file in your WordPress installation after activating the plugin:
Also, there are useful plugins like Query Monitor which can show you which plugin is taking how much of your server resources.
All being said, to determine the real reason for a possible slow page load speed, please do these:
- Upgrade your PHP version to the latest version
- Deactivate all the unnecessary plugins from your website except the Autoptimize
- Reload the page while monitoring the network again
By doing this, we can decide what is going on, on your website and do further steps to make things right.
And the final point to consider is that we are constantly working on improving the Phlox theme and by introducing more options like lazy loading and Ajax functionalities for different widgets and sections of the theme, the overall performance will be even better in the future.