WordPress Tips
If your site is too slow, you might lose your patience...but more importantly, your money!
Find out in this article:
- The best hosting services (Hint: they are not the big ones GoDaddy, Hostgator and Bluehost!).
- The best and fastest themes that available. Free and paid ones.
- What is a CDN and how can it help you.
- What really makes a website fast.
- How to optimize your website with a full-featured plugin.
We hope you like it.
The article was divided into three parts:
- Why it's important to have a fast website
Where we'll show the main reasons for having a fast website (some are not so obvious) - What really makes a website fast
Here we'll show you the two main components that makes a website fast - How to make your website fast
Finally, step-by-step instructions on how to make your website really fast
So, let's get started!
First...
1. Why is it important to have a fast website?
At first glance, it seems obvious: a fast website saves visitors time and patience.
But to take a deeper look, a fast website will also make you more money.
A slow website makes people give up on using it, sending conversion rates plummeting.
Google has consistently stated that a fast site helps you to rank better.
We don't know exactly the details of the algorithm, but Google's own research has shown that 53% of mobile sites are abandoned altogether if they take longer than 3 seconds to load.
See how the bounce probability is affected by the loading speed:
- For 1 second delay in page load time means 11% loss of page views.
- 70% of customers who report dissatisfaction with website perfromance are less likely to buy from that same site again.
Source: Skilled Research, 2017
Moreover, the survey shows how site load time affects a page's conversion rate:
1 second delay means a 7% reduction in conversions.
Now that you know that a slow website doesn’t just lead to lost of patience and frustration, but losing money as well, let’s understand the two main components of a fast website.
2. What makes a website fast
In addition to having a good internet connection, what makes a website load quickly depends on two components: the quality of the hosting and the quality of the website.
- Hosting quality
The quality of a hosting depends on the quality of the server, the network, and the technologies used in both.
The first is server technologies: if it has RAM, SDD and CPUs of quality, and in good quantity available.
It is also important that your hosting has servers in several locations- especially close to you and your customers.
Virtual private servers or dedicated servers instead overcrowded servers, as happens with many shared hosting services.
For example, Nginx instead of Apache as web server, HTTP2 instead instead of HTTP and one that preferably has a good quality free Contend Delivery Network (CDN) and DNS.
Since WordPress uses PHP language, it’s also a great idea to have the newest version installed.
- Website quality
Quality comes down to a site with clean code created with performance in mind.
The amount of resources a website needs to load makes a huge impact on site performance. Large JavaScript files, video content, heavy CSS files, and high-definition images all add significant weight, or load time, to a webpage.
That’s why it’s important to use a lightweight theme, plugins that use little memory, cache plugin, optimized images, minified scripts, and an upgraded database, at the very least.
Now that you’ve seen the two main components that make a website fast, let’s get down to business and go step-by-step on what to do.
3. How to make your website fast
This section will be in a sequence from the highest average impact on speed of a website to the lowest average impact.
According to our research, the hosting of a website is the main impact factor on the performance of a website. It is possible that just by changing hosting your site will be 100%, 200%, 300% faster than before.
While just installing a cache plugin would hardly have that kind of impact.
See what we're talking about:
So, how to choose a fast hosting service?
There are many sites that do hosting performance reviews, but most are unreliable. Through research and testing, we have found that the most reliable of them is Review Signal.
They have a methodology that measures two characteristics: peak performance and consistency.
Peak performance is measured using load testing services which emulate large numbers of users visiting a website and watching how well the hosting responds under these stressful conditions.
Consistency is measured using uptime monitoring to make sure that the servers remain available for a longer duration of time.
In addition, they divide by price ranges to compare various services.
Which hosting services performed the best?
You may think the most popular services- GoDaddy, Bluehost, Hostgator- performed the best.
But this was not the case! In fact, those hosting services are usually at or near the bottom of the pack.
The best were: Kinsta, SiteGround, Cloudways and WPX Hosting.
Here at Work Hero we are using Kinsta. It is the best WordPress managed hosting at the moment. It can withstand high levels of traffic.
But if you want something simpler and a little less expensive, we recommend SiteGround, which is the company recommended by the WordPress.org organization itself.
What should you watch out for?
Beware of shared hosting. It is quite common for these companies to overcrowd their servers with websites to earn more money. Look carefully at the reviews of these hosting companies.
Chose a VPS or WordPress managed hosting. This will make your life easier, and they usually perform better.
Make sure these companies have good support and if they offer essential features like SSL security certificate. This certificate is free and if the company charges for it, raise your red flag!
See a ranking of hosting companies here.
Content Delivery Network (CDN)
After choosing your hosting, a CDN is the next factor that most impacts the performance of your website, making it increase in speed by up to 100%. It is good to note that some hosting companies offer CDNs as a feature. That way you save money. Remember this when choosing a hosting.
What is a CDN?
A CDN is essentially a network of geographically dispersed servers. Each CDN node (also called Edge Servers) caches the static content of your site, like the images, CSS/JS files and other structural components.
The majority of an end-user’s page load time is spent on retrieving this content, and so it makes sense to provide these “building blocks” of a site in as many server nodes as possible, distributed throughout the world.
When a user requests your site, the node closest in proximity to user will deliver the static content, ensuring the shortest distance for the data to travel (reduced latency), therefore providing the fastest site experience.
See the number of server locations where CloudFlare stores copies of your site:
Are there any near you?
Themes
Now that you’ve chosen a great host with all the features to make your site better, you’ve installed WordPress, and installed a CDN, it’s time to choose a theme for your site. After all, you don't want to use the theme that comes with WordPress.
What are the fastest themes?
The best WordPress performance plugin, which we’ll talk about soon, did a test with popular themes and discovered the fastest ones.
To see the complete ranking click on the link above, here we will mention only the 3 fastest:
1. Generate Press (Fremium) - 2,402,676+ downloads
2. Astra - (Fremium) - 600,000+ users
3. OceanWP - (Free) - 2,180,681+ downloads
It is important to choose a light theme. Nowadays, one of the best practices to create a WordPress website is using a page builder, which can slow down your site.
What we use on Work Hero today is the Astra theme plus the Elementor page builder. Both are very fast! Elementor excels in speed, number of features and ease of use.
One of the interesting features of Elementor is its the “Theme Builder” - which allows you to not have to worry about the appearance of your theme, because you can create your own.
Overall, when choosing a theme, focus manly on performance.
Then you can create with drag and drop the dynamic elements like header, footer, pages and posts. We did that here on our website. Nothing in our appearance is of a theme. Our whole website was built using Elementor.
Images
Now that you have your website beautifully created, and you have added content, that beautiful image to your hero section, several images of testimonials, products, and your face…you still have a little work to do (I promise it’s just a little!).
Optimizing your website images can easily make it 50-80% faster.
Today it is no longer a common practice to upload videos directly to your page, normally a script is used, but it is good to remember: avoid uploading videos directly. Prefer to upload them on YouTube, Vimeo or another video-sharing platform.
See in the graph what most impacts the weight of your website page:
Compressing Images
Did you know that it is possible to compress your images by about 50-90% while maintaining good quality?
You can do this manually or automatically using a plugin.
Manually process
Use Google's app Squoosh or CompressPNG if you want to bulk edit.
See the impressive reduction in size of a PNG image.
96% smaller!
Imagine doing this with all images on your site. With the service bellow you can bulk compress images, but there’s even a better way. The automated way!
Automated Process
It is possible to achieve this using plugins such as SmushPro, ShortPixel, Imagify, among others.
What we use here on Work Hero is SmushPro, see how it works:
Friend's Tip:
Try using the .SVG format, they are incredibly light and have high quality. All illustrations on our website are in .SVG and they are about 10kb on average. It is hard to have a file so light and with good quality using .PNG, for example.
A .PNG photo can easily reach 10mb, that is, 1000 times the size of a 10kb image. So, be careful and take a good look at the size of the image before uploading.
Cache
After images, having pages cache on your website is the next factor that most impacts the speed of your website. It can be speed it up by an average of 30% and it’s very simple to do it.
Install one of the plugins below:
- WP Rocket (premium)
- Cache Enabler (free)
- W3 Total Cache (free)
Then go to the settings and activate the cache.
What does the cache do?
Caching instructs the server to store some files to disk or RAM, depending on the configuration. Therefore, it can remember and duplicate the same content it’s been serving in the past.
Basically, it reduces the amount of work required to generate a page view. As a result, your web pages load much faster, directly from cache.
See the test bellow:
Scripts
Remember the chart up above that showed what weighed more on average on a page? The first was videos, the second images and the third… JavaScript!
Yes, the web language that gives functionality to your page and makes it ‘alive’ can become an obstacle for your website to perform well.
Your theme, page builder and what else you add to your page usually link to script file and they need to load for your entire page to work 100%. And depending on the number of scripts, it can make your page take a long time to load!
However there’s a way to make them load faster.
Minifying scripts
Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser.
Examples include code comments, white spaces, unused code, shorter variables, function names, and so on.
It looks complex, but you can do it just by clicking a button.
In the example below, we use the WP Rocket plugin to do this:
Databases
Databases are usually lightweight.
However, if your site is old, it is likely that it is heavy.
Every time you install and uninstall a plugin, it leaves files saved in the database. Usually the plugins are created like this because if you regret having deleted it, and install it again, your settings will be saved there.
Also, every time you update a post or page, the old page is saved as ‘Revisions’, and these pages accumulate and create unnecessary weight.
And if you have an e-commerce plugin or membership plugin, chances are you have a lot of files and your database needs to be optimized!
Fortunately, there are plugins that help you make these optimizations. In the example bellow we are using WP Rocket:
Other settings and tips
Following all the steps already mentioned, you have already done about 90% of what you can do to speed up your website.
Other settings would be more technical and you would have to change your website’s code without the help of plugins.
But one of our last tips is:
Use an optimization plugin, such as:
- WP Rocket (the one we use)
- Autoptimize
- Hummingbird
With these, you can make all these optimizations just by selecting the options you want, as below, activating LazyLoad in WP Rocket:
Lazy loading is technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need, like images.
Plugins
Take care when installing plugins. If possible, search Google, “is this plugin fast?”, “does this plugin use a lot of CPU?”, or read the its reviews.
What makes your site fast is not that it has few plugins, but that it has well-made plugins, created with performance in mind.
Here are some plugins that are heavy and that can slow down your website:
WooCommerce
Sucuri Security
All In One SEO Pack
Yoast SEO
Wordfence Security
Jetpack
The Events Calendar
Source
If you want to find out for yourself which plugins are making your site slow, you can use the app New Relic and examine for yourself, like this:
That way you can see if it is worth changing a plugin or deleting it.
Final thoughts
We hope that you have learned many new best practices by reading this article, and that it can help you make better decisions on your website to positively impact your business.
And If you don’t have the patience to do all of this, count on our help and hire one of our plans, starting at just $ 79 a month!
Good luck! :)
