How I Optimize Website Speed to load in 0.5s with 21 Actionable Tips

In this guide, I’m gonna show you how I optimize website speed so that it can be fully loaded in 0.5s.

If you feel that you need to do website speed optimization because

• Your website is slow?
• You need better SEO and user experience.

This guide is definitely for you. In fact, these are the 21 tips that I did to make my website to load in 0.5s.

Let’s see what are they.

1. Tips for Evaluating Website Speed?

Firstly, it is important to know how to evaluate the speed of your website.

Generally, websites load in 7 seconds on average, but your goal should be less than 3 seconds. This ensures users are satisfied with a snappy website.

There are a number of great tools out there for testing website speed, with the best options being GTmetrix and Pingdom. These free-to-use tools provide overall performance scores, page details, and in-depth speed reports. In other words, they are just the sort of tools that help you to determine where to focus your website speed optimization efforts.

I usually use GTmetrix for evaluation due to the clear information and clean user interface provided. Just register a free GTMetrix account to access more functionality e.g. different test server region.

1.1. My GTMetrix Report

You can see my site is able to load in 0.5 seconds after implemented the 21 website speed optimization techniques.

1.2. GTMetrix Parameters

There are a few important parameters you need to know from GTMetrix.

• Test server region: It will test the URL given in the specified region. (Only for GTMetrix registered user)
• PageSpeed score and YSlow score: The scores tell you how well your front-end is optimized for loading time. It doesn’t say anything about your back-end performance, because it is very difficult to assess on a standardized level. (The higher the better)
• Fully loaded time: This is the time elapsed in order to fully load your page URL. The lesser the better. This will be varied based on the access region. Just choose the test region near to your customer base or test from several test locations if you target worldwide.
• Size: The total file size loaded for your current page. The lesser the better.
• Number of requests. The number of requests that the page called. The lesser the better

*Important note: Don’t too focus on the score, put main focus on the fully loaded time. Some people can get fast fully loaded time even with a low score. Load time is what affecting user experience.

1.3. GTMetrix Analysis Tabs

PageSpeed and YSlow tab:

There will be recommendations provided after your website speed test. Look for the recommendations given and implement it.

Example:

Waterfall tab:

This is the place where you can know where to do the improvement. You can know whether your server response time is good, how many requests asked, whether the scrips and styles have been merged and optimized, whether your small images have been inlined, whether your fonts have been loaded locally.

Example of my previous unoptimized waterfall.

Timings tab:

Please look at the TTFB. TTFB is the time to first byte. The smaller the value, it means the faster the server response time. Google recommends a good server should provide a TTFB less than 300ms.

2. How to Optimize Website Speed – 21 Tips

Now that you have a strong understanding of your website’s current speed, it’s time to ask, “How do I improve my website loading time with website speed optimization?” Luckily, implementing basic website speed optimization is far easier than it might seem at first glance.

2.1. Partner with a Fast and Reliable Web Hosting Partner

This may be a common-sense step, yet far too many sites are undermined by the selection of a poor web hosting partner. This boils down to server response time, which can make or break website speed. When a server takes a longer time to respond to requests from a user’s browser, it can take far longer for a page to load.

If you believe you need to make a change, there are several web hosts, for instance, A2 Hosting and Siteground provide great services at affordable prices. If you are interested, you can read my A2 Hosting reviews as well. You can simply transfer your website to their hosting with zero downtime and you can use their free website migration service after purchase a hosting package.

2.2. Use Lightweight WordPress Theme

There are a number of fantastic WordPress themes out there, but did you know that some require file sizes so large that they could be slowing down your website? When building your site, it is important to balance aesthetic design with quick and responsive web page behavior.

To guarantee that your WordPress theme is not the cause of sluggish load times, consider using a lightweight and fast theme. My recommendation is WP Astra which is not only lightweight and fast but also comes with a lot of great features.

Please read this guide learn more about WP Astra

2.3. Optimize Images

Big image files will always lead to slow load times. While removing images completely can quickly solve this issue, such actions lead to a very boring site.

To avoid this, resize your images and optimize the quality of your images. I have figured out this method is effective and always give me 100 scores (optimize image and serve scaled image) from GTMetrix.

I will always resize my images using tools like Adobe Photoshop or Skitch before uploading them, then optimize the image quality during upload / after upload with image optimization plugin such as Swift Performance. This is an important step, especially for sites that are heavily reliant on multimedia.

For the existing images in the website, you have to manually resize them all again and then optimize.

Here is a complete tutorial on how to optimize images for website including both individual & in bulk optimization.

2.4. Reduce HTTP Requests by Managing Javascript and CSS Files

HTTP requests occur when a web browser requests information from a website’s server. In turn, the fewer HTTP requests that have to be made, the quicker the site can load.

In other words, if your site requires lots of HTTP requests to be fully displayed in a user’s browser, it will negatively impact speed.

To address this issue, consider reducing and merging the Javascript and CSS files. The Swift Performance comes with scripts and styles. Optimization as well.

This is why I like Swift Performance, it is the tool built for speed optimization. I have only 7 HTTP requests for my homepage which gives me fast loading speed.

2.5. Install an Effective Cache Plugin

This is a key step – if not THE key step – to ensure website speed optimization. Cache plugin generates static HTML pages of a website and saves them on the server. This tool allows these pre-made HTML files to be served up when a user accesses a site. Needless to say, this is far faster than the comparatively heavy and slow processing of PHP scripts.

Consider leveraging the impressive tools provided by Swift Performance for your cache plugin needs. In fact, the main role of Swift Performance is to do caching for your website.

2.6. Use Content Delivery Networks (CDN)

Content delivery networks cache the static content of a website (such as images, videos, CSS files, and more) and save it to a network of remote servers. When a site is accessed by users, cached content is loaded from the server geographically closest to the user, leading to a fast and reliable experience.

This is another important and often overlooked aspect of website speed. If this was overlooked during the initial site design, consider using the free Cloudflare to fill this gap. The detailed on how to setup Cloudflare settings can read here.

You can use multiple CDNs to cache for different types of content such as media files, Javascript files and etc. I’m using both Cloudflare and BunnyCDN. With these two CDNs, I’m able to get 100 scores from GTMetrix as well as get a fast loading website.

2.7. Choose a Server Location Close to Your Target Visitors

The geographical distance between server and users can substantially increase loading times. If your target visitors are from a certain area or country, consider placing a server nearby. This doesn’t always mean that you need to pay for and place a physical server at a certain location. Rather, choose your web hosting partner to ensure that the server space you’re utilizing is close to where your target visitors reside.

Web hosts such as A2 Hosting and Siteground have several datacenters in the world (American, Europe, Asian). Don’t worry if your target customers are from WorldWide, setting up CDN can help you achieve faster loading time.

2.8. Enable GZIP Compression

GZIP is a file compression protocol that makes files smaller than their native format, which in turn leads to blazing fast website load speeds. Throughout today’s internet, this is standard practice, and lucky for us it works great on WordPress.

If you’re not already using GZIP, you should integrate it into your website’s configuration as soon as possible. As is the case for many of these tips, Swift Performance offers great tools for this feature too.

2.9. Use the Latest Version of PHP

Updating the version of PHP that your WordPress website is utilizing is one of the easiest steps one can take towards a website optimized for speed. Currently, the latest PHP version supported by WordPress is PHP 7.3.

However, with this being said, it is important to note that this is something that is not done automatically, either by your hosting partner or WordPress itself. This is due to the fact that not all themes and plugins are compatible with modern PHP.

Hence, you have to manually check/change the setting from your cPanel or check through this plugin. Please check all over again your website in term of style and functionalities to ensure everything is still working as it should.

2.10. Disable Unused Plugins

If you’re not actively using a plugin but it is still enabled, it is going to slow down your site. Consider deactivating plugins that aren’t being used and switching to lightweight plugins whenever possible.

2.11. Optimize Database

Database optimization is a great way to increase website speed and performance. The key to this tip is to keep your site’s database as small as possible. If the database behind your website increases in size, it will typically decrease in speed and performance. With the power of Swift Performance database management feature, you can easily clean your database of expired transients, duplicated metadata, and other suboptimal artifacts.

2.12. Load Google Font from Local

Most of the website owners will choose to use Google Font for their websites because it is free and has many choices. However, by default, websites will load Google fonts from a 3rd party server which blocks page loading and slows the website down.

In order to optimize the speed, you can host the Google Font locally in your hosting.

2.13. Don’t Use Too Many Font Variations

Don’t use too many font variations if your design is allowed. It includes the variations of the font-family and font-weight. Each font-family or font-weight represents 1 extra request. I only use 1 font-family with 2 font-weights (bold and regular) on my entire website.

2.14. Use Optimized Font-Awesome

Another way to consider is to optimize the Font Awesome icons files. You can only select icons that you are actually using on your website and generate customized icon font set from Font Awesome.

With this, you have smaller customized file size compared to the original whole Font Awesome file (~120Kb). The Critical Font feature from Swift Performance can do this seamlessly, which I seldom see other cache plugin having.

2.15. Load Site Icon from Data URI

One thing that I realized that drag most of the website is loading the site icon. You can check from my previous waterfall record. It is always the last one to load and takes some time to initiate loading although the size is very small.

The solution is to encode the site icon into a base64 image. Base64 encoding is a method of encoding binary data into text. It is used to inline images into HTML to reduce the number of server requests required to render a page.

You can create a base64 image (data URI) for your favicon (recommend .ico format), then replace the site icon with the following code. The link reference is your generated Data Uri.

function add_favicon() {
	echo '<link rel="shortcut icon" type="image/x-icon" href=" data:image/vnd.microsoft.icon;base64,AAABAAEAQEAAAAEAIAAo.......=" />';
}

add_action('wp_head', 'add_favicon')

Lastly, please remove the original site icon from your theme. (Appearance -> Customize -> Layout -> Header -> Site Identity -> Site Icon)

2.16. Disable Hotlinking

Hotlinking is the practice of finding an image on the internet somewhere and its URL to place the image directly on another site. While the image will be displayed on the site, it will be served from the original location.

For your website, this means that if another website utilizes your images, you’ll be paying with bandwidth every time they load on a different website. To prevent your resources from getting stolen by other websites through hotlinking, disable this feature via Cloudflare.

2.17. Lazy Load Google Maps and Videos

Lazy loading is a powerful website speed optimization tool that keeps data-intensive features like Google Maps or embedded videos from loading until users scroll down the page to see them. This can also be taken with images but is not suggested as it offers only minimal performance boosts can be a hassle. This can be enabled with your cache plugin.

2.18. Disable Pingbacks and Trackbacks

Websites use trackbacks and pingbacks to notify each other when they have been linked to one of the posts. However, today it is widely used by spammers for spamming websites. Database optimization will help to clear out older pingbacks and trackbacks, but they will still continue to take valuable resources if not turned off.

As such, it is extremely important to disable both pingbacks and trackbacks if you want to ensure that your website is loading as quickly as possible for users. Below are the steps to turn off it.

To disable for new articles.
Settings->Discussion->Default Article Settings-> UNCHECK “Allow link notifications from other blogs (pingbacks and trackbacks) on new articles”.

To disable for existing articles.
Posts-> All Posts-> Select all existing posts -> Bulk Action (Edit) -> Apply -> Pings -> Do not allow ->Apply.

2.19. Remove WordPress Features You Don’t Need

Similarly, if you don’t need a WordPress feature for a particular site, then we suggest removing it altogether. For example, removing emojis and gravatar features can yield noticeable improvements in website speed. While these changes can be enacted manually, Swift Performance has a great tool for getting rid of the WordPress features your site doesn’t really need.

2.20. Only Host One Website Per Hosting Account

While it may be tempting to host multiple different websites on the same hosting account, this isn’t the best way to go about things. When you host multiple websites from the same account, your sites end up sharing resources between them, instead of getting access to the full computing power associated with the account given to you by the chosen web hosting partner.

If your budget allows for it, consider investing in separate hosting accounts for each of your websites.

2.21. Disable Repeated HTTP Requests for Page Builder

This tip is specifically helpful for page builder user for example Elementor. Page builder will call for its own Google Font and Font Awesome requests even though they are hosted locally. Please check your page builder if it is calling for another repeated HTTP request from GTMetrix’s Waterfall.

For my case, Elementor did call them. For those who are Elementor user, please check out this extended guide on how to speed up Elementor website by removing unnecessary HTTP requests.

Wrapping Up

While these tips and tricks provide a great starting point, the key to optimize website speed is thinking like a problem solver.

If your website is still loading a bit slow after implementing these changes, please go back here again to evaluate what causing the slow.

And don’t be afraid to search for more optimization tips.

Successful website speed optimization is possible, especially if you’re willing to embrace it as a learning process.