People want stuff to load instantly. Waiting sucks and customers will be forced to through tomatoes at the screen if you make them wait. We believe that fast loading web pages is the sign of a quality website, and a considerate company that does not allow a customer of theirs to wait.
This article will explore load speed principles on the frontend as well as the backend of your website.
- Avoid using a cheap server. Cheap overcrowded servers are a sure fire way to ensure your site loads slowly on the front and backend. Timeout errors are common on overcrowded shared hosting servers where everyone is fighting for minimal resources. The timeouts and 17 second load times are the result of the server being exhausted of resources. One solution is to try our recommended WordPress host Flywheel. Flywheel users docker containers which ensures the resources on the server are evenly distributed. So you will not suffer from “noisy neighbours” with flywheel. Switching to Flywheel will also ensure your backend loads fast.
- If load speed still continues to be an issue on the backend then you may have to deactivate each plugin one by one to find the plugin causing the slowdown in the backend. You may also be missing some assets in the backend. Missing assets can increase the load time as WordPress can often stall the loading in order to search for the assets. Check the browser console with developer tools for missing assets.
- If load speed still continues to be an issue on the frontend or backend you may be trying to load too much data. In this case you will want to inspect query monitor to see how many queries are being performed. If too many queries are being performed you may need a developer to look deeper into the issue to find out the root cause and perhaps design a better way of accessing the data. Or if budget is not an issue consider using a dedicated host or quality controlled VPS.
- Avoid using page builders such as Visual Composer, Elementor and Divi. Using such page builders is a sure way to bloat your site with excessive html code and scripts. This is not to say you cannot have a fast loading site with a page builder. In fact most page builders boost about their page load speed on the frontend, but never mention the load speed of the backend. The page builders usually do perform impressive load speeds in tools like Google Page Speed, Pingdom and Gmetrix when they are used wisely, without using too many additional plugins and on an uncrowded server or VPS. However, Your Divi/Elementor/VC site will is more likely to struggle when viewed in less than perfect conditions, like on a crowded shared server for instance.
- As mentioned earlier, Avoid using too many plugins. Plugins often add additional javascripts and css files to the header of your site. Every time a new script or css file is added to your site it loads a little slower. As each call to a script is an individual http request. Each http request takes time to load and this can prevent or “block” the website from loading in a desirable time. Remember, people don’t like to wait for coffee and they don’t want to wait for your page to load.
- Avoid using hero banner slideshows on your homepage. Large banner images can potentially block the rest of the page from loading more important content. hero slideshow banners often require many assets to function, these assets all need to be loaded before the slideshow and then rest of the homepage can load. The Hero slideshows can seriously slow down your initial page load speed on your most important page too (your homepage). Worse yet, the banners may be important but the user may not even look at all the banners and content hidden beyond the first slide. If your content in these banners is essential, consider placing this content in a less hidden position on the homepage. Also Consider setting up activity tracking in google analytics to ensure your audience is viewing these slides.
- Avoid using icon fonts. Icon fonts are great for convenience but they lost popularity years ago in favour of SVG due to the poor load speed of the icon fonts compared to the instant load speed of inline svgs.
- Use image srcset to serve up the right image size on the right device. This is what you do instead of the “one size fits all approach”. Basically you give each image on your site 3 or more versions, all different sizes and the browser chooses which image it should display.
- Use inline SVG’s for your logo and icons. Inline svgs don’t require a http requests the browser simply renders the code instantly.
- Use WP Rocket plugin link to speed up your website with a plugin.
- Minimise your html, css, and javascript files. You can use WP Rocket to do this if your site has already been built. On the other hand, any good web developer will tell you that file optimisation is built into the the development workflow. This is where tools like Grunt, Gulp and Webpack come into the picture. these tools are used to do all the minification and concatenation every time a development file is saved.
- Use Webpack. Webpack is a “static module bundler” that is used as part of a professional development workflow. Webpack is used to build in speed and performance from the start of the build rather then installing a “sophisticated band-aid” style fix with WP Rocket on top of the build. The Webpack approach has a higher success rate as the file optimisation features of WP Rocket can easily result in website conflicts. If conflicts arise then you maybe forced into a painful debugging process or be forced to remove file optimisations which will result in slower then desired website load speeds https://docs.wp-rocket.me/article/19-resolving-issues-with-file-optimization. On the other hand the Webpack approach will always result in error free file optimisation for every web build project.
We love building speed optimized custom designed and built Webpack powered WordPress websites for great companies who are doing awesome stuff. Contact us and let’s get started today.