Do you like waiting? Because I don't. I don't recall anyone telling me they love waiting for things to happen. That's true! Waiting is annoying and turns away your website visitors and potential customers. Google and other search engines understand this very well. Search Engines like Google value the user experience and don't rank slow, poorly structured websites. So, what's the optimal load time according to Google? It's less than 3 seconds. If your page is not ready for user interaction within 3 seconds, your website is slow.
Important Tip! Before you test your web page speed, you need to understand the browser cache. Just because your website opens quickly on your computer does not mean it will load fast on other people's computers.
First-Time Visitor Experience Matter
If you are using your website to grow your business, the first-time visitor's experience is very important. Unfortunately, you will lose most of your money and effort on SEO, Google Ads and Social Media Marketing because of slow website speed. According to Google, if your web page takes longer than 3 seconds to load, you will lose 70% of your traffic. So let's make your WordPress website super fast to deliver an exceptional user experience together.
Mobile Vs Desktop Speed
Another aspect of speed optimisation is mobile speed. Many websites perform well on desktops and laptops but are very slow on mobile devices. That's because optimising for a mobile device is more challenging. But more than half of your website traffic originates from mobile devices. So, ensuring your website loads fast on mobile is as important as on desktop, if not more.
Here is the list of things you need to consider to achieve a 90+ score on the Google Speed test for desktop and mobile devices. Let's go through them individually.
Web Hosting
Use Cache
Use External CDN
Update WordPress, Themes and Plugins
Use the Latest Version of PHP
Limit the Use of Plugins
Use Good Quality Theme or Avoid Using Theme
Optimise Images
Don't Host Videos on Your Site
Use Lazy Loading
Reduce CSS and Java Script Size
Keep Your Database Clean
Avoid Redirects
Limit External Links and Scripts
Protect Against Hotlinking
Website Structure DOM Size
Web Hosting
Be very careful which hosting package and provider you use. Using cheap low-cost shared hosting will destroy all your efforts. Because in the end, it does not matter how good your website is optimised if the server it is running on is not good enough. If you can afford and need it, always choose cloud VPS optimised for WordPress. If not, then reputable WordPress Cloud Hosting from a decent provider. Here is a good resource for you to learn more about web hosting and WordPress Hosting.
Use Fast DNS Server
When someone visits your website, the very first thing their computer does is a DNS lookup. When they type your domain name abc.com in the browser, their PC goes to the DNS server to find your website IP address. Choosing a good DNS service saves a few hundred milli-second, and yes, it is important to save those 300 to 400 milli-seconds when trying to achieve a total load time of fewer than 3 seconds.
Unfortunately, most business owners need help understanding this. They usually buy a domain name from a popular domain provider like GoDaddy or Blue Host and point their domain to the provider's DNS server. Unfortunately, these DNS servers need to be optimised and are not the best choice in the market. So instead, use Cloudflare DNS service for free, or AWS Route 53 paid DNS service. Making this small change can save almost half a second for the first-time visitor to your website.
Use Cache
Caching speeds up website speed by reducing the time it takes to respond. Instead of loading all the resources each time and generating a web page, it uses a stored version of a web page from memory. If you want to learn more about how a WordPress website works and the role of cache, read this post here.
There are several ways to enable WordPress cache; most of these methods rely on plugin use. But one particular plugin stands out the most for WordPress cache: the LiteSpeed Cache plugin. The LiteSpeed Cache plugin, for most parts, works the same way as others, except it has added advantage of doing extra bits when the WordPress site is hosted on the LiteSpeed server instead of Apache or Ngnix. Using cPanel or VPS hosting with LiteSpeed Server and LiteSpeed cache plugin can speed up your website by 15X.
Use External CDN
Content Delivery Network (CDN) service is a group of well-distributed global web servers that store copies of your website pages worldwide.
CDN improve visitors' experience and help speed up the website by shorting the distance between the visitor and your web server. Just like WordPress cache, CDN also uses cache to store some of your web page elements on their servers, like images, CSS and others. These elements stay mostly the same but constitute most of the page size.
If you enable CDN service on your website, then instead of requesting a web page directly from your web server, visitors get the cached copy from the CDN server. In addition, the CDN server maintains the latest copy of pages by regularly checking with your web server and downloading the newest version. CDN is useful when you have a global audience because when someone from the US opens the site, they don't need to download the complete copy from the server in Australia.
That's all for hosting, DNS and Network. Next, let's look at how to optimise code and content.
Update WordPress Core, Themes and Plugins
Keeping your WordPress core files, theme and plugins updated helps with security and improves your website performance. WordPress.org continues to release an enhanced version of WordPress, which is compatible with the latest core technologies like PHP, MySQL, CSS and Javascript—updating WordPress core benefits from these latest enhancements in the underlying technologies.
With your WordPress installation, themes, and plugins, developers release a newer version of their products to make them compatible with the latest WordPress version, fix bugs and improve performance. So, keep everything updated to the latest version to improve your website speed.
Use the Latest Version of PHP
PHP is a computer programing language used to develop WordPress and everything that runs on WordPress. Like all other computer software, PHP developers release updates from time to time. These updates include performance improvements, along with other things. So, you want to make sure you run the latest version of PHP that is supported by the version of your WordPress site. For example, if you update your WordPress site to the newest version, 6.0 or 6.1, you can switch to the most recent version of PHP 8.1 and benefit from all its enhancements.
WordPress plugins help you add extra functionality to your website without the need to code it. There are over 54,000 plugins available for WordPress. The problem is most of these plugins are developed by less experienced developers, and some don't even provide regular updates. Another issue is adding too many plugins, including the good ones, can slow down your website. So you want to limit the usage of the plugins and only choose good quality ones with regular updates.
Some plugins add a very little feature to your site; others are more comprehensive. Favour the more comprehensive ones.
Use Good Quality Theme or Avoid Using Theme
By incorporating a good theme, you can create an amazing website without making all the bits and pieces. Like Plugins, use a good quality theme from a reputable company that provides regular updates. Even better if you can avoid using themes and create custom layouts by hiring a professional developer or visual builder.
Optimise Images
Photos are the heart of any stunning website. Remember the expression, "A Photo Tells a Thousand Words"; In a web design, it really does. But pictures also make up most of the web page size. So, the more photos you add, your web page download gets bigger. So, how do you add tens of amazing shots without slowing down your website? That's where image optimisation comes in the game. Simply adding photos to your website from your camera or phone is not the right way. Instead, you need to resize the images and convert them into web formats like Jpeg and WebP.
Another thing you should consider is that mobile devices, even if you perfectly size your pictures for a laptop or computer, the photos will still be very large for mobile and tablets. That's why you may notice that when you run a speed test, you get different page speed scores for desktop and mobile.
So, how can we upload the same photo in different sizes for different devices? One way is to use a paid version of Cloudflare CDN, which automatically optimises your images by creating different size versions. Another solution is to use the Imagify plugin. You may have to buy an Imagify subscription if your site has too many photos. Imagify compresses images without losing quality and auto-creates different sizes for different devices.
Don't Host Videos on Your Site
Videos use a lot of resources and bandwidth, and hosting them on your web server will slow down your website, as most web servers are not designed for streaming. But you can still use videos on your website, upload them to a dedicated streaming network like YouTube and embed them on your website. Then, when visitors play these videos on your site, these videos don't affect your site resources or speed.
Sometimes you may want to avoid using YouTube because when a video finishes, YouTube displays random video links. In that case, you can use a paid streaming service from Cloudflare to host your videos.
Use Lazy Loading
Sometimes your web pages are very long and have many sections. It could be for many reasons. For example, you may have a comment section that grows to be huge. Or a product page with many different sections explaining its benefits and uses. The point is long pages are normal.
But when creating these big pages, you must ensure that the elements load in proper order. For example, you don't want to load the page's footer before the header and main banner. So, load the part of the page elements that the user will see first and interact with, then lazy load the rest of them in the background. By the time a visitor scrolls to those sections, they are ready. Lazy loading ensures users can interact with your web page in the least amount of time, even when the pages are long and big.
Reduce CSS and Java Script Size
Keep your style sheet file (CSS) and JavaScript clean. Keeping their size small means there is less to download for the visitors. So, get rid of all the unnecessary code lines from these files.
Another thing you can do is to minify CSS and JavaScript files. Minifying removes all spaces and line breaks from the files to reduce their size. Be careful, because after minifying these files, they will work for computers, but they will not be human-readable. So after minifying these files, if you need to make changes, you will find it almost impossible. That's why, before minifying them, ensure you create a backup of the original files.
Keep Your WordPress Database Clean
WordPress uses the MySQL database to store most things. When someone visits your web page, WordPress load the required information from the database. Keeping the database clean and optimised helps speed up your website.
Over time your WordPress database gets a bit messy because of many reasons, including:
Too many pages
Old plugins may remove, but their data is left in the database.
Web page version history
So, keeping your WordPress database optimised and clean will help optimise speed. It's simple and easy to do. Use the database optimisation option and keep the version history to a minimum.
Avoid Redirects
Sometimes redirect are necessary, but keeping them to a minimum is important to maintain good speed. When the URL redirects are used, the initial link loads and then sends a new request to load the link where the redirect is pointed. This creates multiple requests and slower responses for the user.
Limit External Links and Scripts
Whenever possible, always upload all required code on your web server. Limit embedding code scripts and other elements hosted outside your website. Because if the external resource location has a problem or performance issues, it will also slow down your website.
Another problem with this approach is that your website will be affected if the external resource owner removes them or makes changes. For example, if you use an externally hosted CSS file to manage part of your page layout, your page will lose its design and layout settings if it is changed or removed.
Protect Against Hotlinking
Hotlinking is the process of displaying photos and assets hosted on someone else server. Letting others hotlink to your images will add extra workload to your hosting and exhaust your bandwidth and server resources. If a very busy blog or website hotlinks to your photos, it will dramatically affect your website speed. So disable hotlinking on your site to protect your website from it.
Another aspect is hotlinking to other websites; the rule is simple, don't let them steal from you but also don't steal from others.
Other than being unethical, hotlinking to other sites also slows down your site. If the website allows hotlinking, the chances are many people will be hotlinking photos from that site, not just you. Because of it, it is highly likely that web servers that allow hotlinking will perform poorly due to the high workload. Hence it will slow down your website because it will take longer to load hot-linked photos.
Website Structure DOM Size
DOM stands for Document Object Model. When someone visits a web page, the web browser creates the DOM for that web page. It downloads all of the HTML tags called nodes and structures their tree. DOM size is the sum of all HTML tag sizes within a web page. These rules and standards around how to structure your HTML page DOM properly. For example, a web page should have at most 900 elements. Creating a proper DOM structure according to these rules is important to pass the Google Speed test. If you are unsure what they are and are creating new web pages, you are more likely to need help with your website speed optimisation. Many web developers even need to gain the skills to understand DOM properly.
Building a WordPress website that loads under three seconds and passes the Google speed test for mobile and desktop is important and possible. But to achieve this, you must make sure you choose the right web hosting provider and a development agency with the right skills and expertise. While building a website in WordPress is quite easy, creating a professional website with security and speed optimisation requires an expert WordPress Development team. iVersion is a leading WordPress Development agency. We have helped many businesses optimise their existing WordPress websites and build a new ones. You can learn more about our WordPress Development approach and WordPress Support services.
