Here at Brilliant Directories, we're continuously optimizing the software to make pages load as fast as possible without affecting functionality. As our development team continues to release 100 - 150 new updates each month to add new functionality, make the platform easier to use, and maximize security, we always have an eye on site speed and suggestions.
We have projects on our immediate roadmap that are focused on optimizing database queries and minimizing the server response time to make pages load faster than ever and improve those scores even more. This is an aspect of the software we are always iterating on and will continue to make it a priority moving forward.
Here are some of the strategies we have implemented to optimize the performance of our sites.
What we already do to optimize for speed
- Enable gzip compression on the server-side to decrease the load time of assets.
- Minify all javascript and CSS files hosted on our servers to reduce their size (some externally-hosted libraries provided by Facebook, Google, etc may not be).
- Optimize redirects needed to load pages on a site to require as few as possible.
- Use browser caching to load as few assets as possible on each subsequent visit to the site (explained in the link above).
- Optimize SQL queries and PHP code to reduce server response time as much as possible.
- Every day our development team continues to refactor existing code to optimize for speed, and we have identified further opportunities to defer the loading of javascript libraries to improve page load times even further.
Here is an example of a brand new directory site compared with a high-performing popular site like Amazon.com:
Options to further improve site performance
If a site is experiencing slower performance than expected, there are a few recommendations and things to have in mind.
Let's take the last two sites we compared and add a couple of our demo sites as an example:
To better understand the comparison image here is a breakdown of what each of these sites includes:
Newly Launched Site
This site's homepage has a single static hero image, a Keyword + Location Search, and the About Website / Join Offer homepage widget.
Yellow Pages Demo
In addition to that content, the Newly Launched Site has on the homepage, this site also has the following:
- Streaming Members Homepage widget
All-In-One Demo
In addition to that content, the Newly Launched Site has on the homepage, this site also has the following:
- Streaming Members Homepage widget
- Streaming Top Categories Homepage widget
- Streaming Blog Articles with Sidebar
Important Factors to Consider
These are some of the factors that we should have in mind when analyzing the site loading speed and a few recommendations to improve the scores if needed:
- There will always be a relationship between the size and number of images on a page and the speed in which that page will load. This can be seen in the example above, our all-in-one demo site uses a homepage slider, having several HD images that are rotating instead of just one, like the yellow pages demo to the right will impact the site loading speed. Try to always keep images within the recommended sizes.
- The more features and functionality is present, the longer the page will take to load. Going back to the example above, our all-in-one demo site has more homepage streaming widgets on the homepage than our yellow pages demo site, this will also impact the speed at which this page loads.
- Try adding and removing features or streaming widgets to find the right balance between page load times and the content on the page that fits the needs of the website.
- Check with support to see if the website is using PHP 7 or 5.4. Moving to PHP 7 will help with speed. This is a very seamless transition, if the site's custom widgets are compatible we recommend upgrading to the latest version of PHP.
- If the site is already using PHP 7, there is one more option to optimize the site speed, which is PHP-FPM. PHP-FPM (FastCGI Process Manager) is a web tool used to speed up the performance of a website. It is much faster than traditional CGI-based methods and has the ability to handle tremendous loads simultaneously. This is still in a beta version, but we offer this as an option to test it out.
- We have included an advanced setting called Front-End Optimization: Enable Resource Delivery Via CDN to allow CSS / JS resources that are referenced on all pages to be served from https://www.optimizecdn.com. If set to OFF, the system will use relative paths from the domain, but if turned ON it speeds up the delivery of resources vs. the relative path of the domain name.
To activate the setting go to Settings >> Advanced Settings:Front-End Optimization: Enable Resource Delivery Via CDN
Here is an example of the same newly launched site with the advanced setting Front-End Optimization: Enable Resource Delivery Via CDN turned off, on the left and turned on, on the right:
- Another advanced setting that helps you optimize the loading speed of images is the Front-End Optimization: Use Content Delivery Network (CDN) For Images. This setting allows you to enter a URL to use a service like imagekit.io to serve images from an image CDN with automatic optimization and real-time transformation. Images that are served from a relative path will be updated to include your inputted CDN. For example, an image that is set to /images/logo.png will be served from https://ik.imagekit.io/your-account-id/images/logo.png.
Settings > Advanced Settings:
Front-End Optimization: Use Content Delivery Network (CDN) For Images
Here is an example of the same newly launched site with the advanced setting Front-End Optimization: Use Content Delivery Network (CDN) For Images turned off, on the left and turned on, on the right:
- Finally, another great option is to use CDN like Cloudflare to both, reduce page load time and reduce the bandwidth used by the site.
Mobile Preeloader Advanced Setting
If the advanced setting called Front-End Optimization: Mobile Preloader (front_end_optimization_mobile_preloader) is enabled, the first web page visited from a mobile device will display a brief loading message which helps improve page speed metrics. The loading message will only display one time when the first web page is visited and will not display again while browsing the website from the same device.
An example of how this works can be seen in the GIF down below: