In this blog post, we will look at few ways to optimize your pages for better load speed. Page speed has become one of the important factors for the search engines and for the end users to rate your website’s performance. It is said that 1 in 4 visitors would abandon the website if it takes more than 4 seconds to load. 46 percent of users don’t revisit poorly performing websites. Website owners have a mere 5 seconds to engage visitors before they consider leaving.
The best tool that comes handy to evaluate your page speed is with Google’s PageSpeed Insights. Usage of the tool is pretty straightforward, where you can key in your website URL and click the Analyze button to get your score. After the analysis is done, Google reports you the score for the mobile & desktop version of the site along with the suggestions to optimize the site.
Here are a few things that you can do to optimize your site based on the Google Page Speed suggestion.
#1 Leverage browser caching
- These large files take longer to load and can be especially painful if you’re on a slow internet connection (or a mobile device).
- Each file makes a separate request to the server. The more requests your server gets simultaneously the more work it needs to do, only further reducing your page speed.
Browser caching can help by storing some of these files locally in the user’s browser. Their first visit to your site will take the same time to load, however, when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally. This means the amount of data the user’s browser has to download is less, and fewer requests need to be made to your server. The result? Decreased page load times.
The main reason why browser caching is important is that it reduces the load on your web server, which ultimately reduces the load time for your users. To enable browser caching you need to edit your HTTP headers to set expiry times for certain types of files.
Configuring Apache to serve the appropriate headers
Find your .htaccess file in the root of your domain. This file is a hidden file but should show up in FTP clients like FileZilla. You can edit the .htaccess file with notepad or any form of basic text editor.
In this file we will set our caching parameters to tell the browser what types of files to cache.
Depending on your website’s files you can set different expiry times. If certain types of files are updated more frequently, you would set an earlier expiry time on them. When you are done save the file as is and not as a .txt file. If you are using any form of CMS, cache extensions or plugins might be available.
- Fix Render Blocking Scripts and CSS with Autoptimize
This method is simpler and recommended for most users. The first thing you need to do is install and activate the autoptimize plugin. For more details, see our step by step guide on how to install a WordPress plugin. Upon activation, you need to visit the Settings > Autoptimize page to configure the plugin settings.
How does it work?
This allows you to fix the render blocking scripts and styles issue. However, please keep in mind that it can also affect the performance or appearance of your website.
This method requires a little more work and is recommended for users already using W3 Total Cache plugin on their website.
First you will need to install and activate the W3 Total Cache plugin. If you need help, then see our guide on how to install and setup W3 Total Cache for Beginners.
Next, you need to visit Performance > General Settings page and scroll down to Minify section.
First you need to check ‘Enable’ next to Minify option and then select ‘Manual’ for minify mode option.
Click on the save all settings button to store your settings.
Next, you need to add the scripts and CSS that you want to minify.
You can get the URLs of all the scripts and stylesheets that are render blocking from Google PageSpeed Insights tool.
Take your mouse over to a script and it will show you the full URL. You can select this URL and then use your keyboard’s CTRL+C (Command+C on Mac) keys to copy the URL.
Now head over to your WordPress admin area and go to Performance > Minify page.
Next, you need to click on the ‘Add script’ button and then start adding script URLs that you copied from Google PageSpeed tool.
Once you are done, scroll down to CSS section and then click on the ‘Add a stylesheet’ button. Now start adding stylesheet URLs you copied from Google PageSpeed tool.
Now click on the ‘Save settings and purge cache’ button to store your settings.
Visit the Google PageSpeed tool and test your website again.
Make sure that you also test your website thoroughly to see that everything is working fine.
#3 Reduce server response time
Once you have data on your current performance, it’s time to take steps to make your server response time as fast as possible. Here are five ways to do this.
- Check Your Hosting
You want your pages to load as quickly as possible for your users, so the first thing you need to have is sufficient resources to handle your traffic. If you lack resources then additional traffic results in longer SRTs, meaning your server handles fewer users in a given period.
- Choose Your Web Server Carefully
While Apache is an excellent and attractive option, you might be able to get better results using something else, such as Nginx or OpenLiteSpeed. While comparing the many options available might seem overwhelming, putting in a bit of time in the beginning, will pay off later as you are better able to handle changes in your server needs.
- Optimize Your Web Servers
Once you’ve chosen a web server to use, you’ll need to set it up. While it’s tempting to take the easy route and go with the default settings, one size does not fit all. By choosing this option, you run the risk of using a sub-optimal configuration for your needs and usage patterns.
Unfortunately, each web server configuration differs from another, so there’s no generalized solution for optimizing a web server. Refer to the documentation specific to yours for additional information on how to get the best performance possible.
- Reduce Bloat
If you’re using a content management system (CMS) like WordPress or Magento, your site will accumulate bloat unless carefully managed. Even if you don’t use a CMS, you still run this risk as you add content (e.g. images, new content pages, and so on) to your site over time. As such, cull things that you do not need. Optimize your images, combine your resources, and enable compression since smaller files are your friend when it comes to lowering SRTs.
- Optimize Your Database
By ensuring that your database can retrieve data as efficiently as possible, you speed up the loading times for your site as a whole, not just the page the browser currently displays. Slow queries are the number one reason why a server responds to a request slowly, so you should spend time identifying ways to prevent bottlenecks.
Server optimization is a deep topic where specific steps vary depending on what server you use. Good places to start with when optimizing include:
- Rewriting your queries so that they return only what you need and are written with performance in mind (for example, use joins instead of loops)
- Using indexes where necessary or appropriate
- Changing your schema to group objects such as tables, views, and stored procedures appropriately
- Alternatively, you can reduce the load on your database by using external caches to shift the burden to your front-end.
#4 Optimize images and reduce file size
The primary goal of formatting your images is to find the balance between the lowest file size and an acceptable quality. There is more than one way to perform almost all of these optimizations. One of the most popular tools ways is to simply compress them before uploading to WordPress. Usually, this can be done in a tool like Adobe Photoshop or Affinity Photo. Some of these tasks can also be performed using plugins, which we will go into more below.
The two primary things to consider are the file format and type of compression you use. By choosing the right combination of file format and compression type you can reduce your image size by as much as 5 times. You’ll have to experiment with each image or file format to see what works best.
Choose the Right File Format
Before you start modifying your images, make sure you’ve chosen the best file type. There are several types of files you can use:
PNG – produces higher quality images, but also has a larger file size. It only uses lossless compression.
JPEG – uses lossy and lossless optimization. You can adjust the quality level for a good balance of quality and file size.
GIF – only uses 256 colors. It’s the best choice for animated images. It only uses lossless compression.
There are several others, such as JPEG XR and WebP, but they’re not universally supported by all browsers. Ideally, you should use JPEG (or JPG) for images with lots of color and PNG for simple images.
Lossy vs Lossless Optimization
It is also important to understand that there are two types of compression you can use, lossy and lossless.
Lossy – this is a filter that eliminates some of the data. This will degrade the image, so you’ll have to be careful of how much to reduce the image. The file size can be reduced by a large amount. You can use tools such as Adobe Photoshop, Affinity Photo, or other image editors to adjust the quality settings of an image. The example we used above is using lossy compression.
Lossless – this is a filter that compresses the data. This doesn’t reduce the quality but it will require the images to be uncompressed before they can be rendered. You can perform a lossless compression on your desktop using tools such as Photoshop, FileOptimizer, or ImageOptim.
It’s best to experiment with your compression techniques to see what works best for each image or format. If your tools have the option make sure you save the image for web. This is an option in many image editors and will give you the quality adjustments so you can perform optimal compression. You’ll lose some of the quality, so experiment to find the best balance you can without making the images ugly.
Resizing Images to Scale
In the past it was very important that you upload images to scale and not let CSS resize them. However, this is no longer as important since WordPress now supports responsive images (not scaled down by CSS). Basically, WordPress automatically creates several sizes of each image uploaded to the media library. By including the available sizes of an image into a srcset attribute, browsers can now choose to download the most appropriate size and ignore the others. See an example of what your code actually looks like below.
So with more and more HiDPI displays nowadays, it can be good to find a happy medium. Say 2x or 3x your website’s column or div size, but still less than the original size. The browser will show the correct one based on the resolution of the device. The WordPress media library creates thumbnails based on your settings. However, the original is still retained and untouched. If you want to resize your images and save disk space by not saving the original, you can use a free plugin like Imsanity.
Image Optimization Plugins.
Thankfully, with WordPress, you don’t have to do all of the formatting or compression by hand. You can use plugins to do at least some of the work for you automatically. There are several plugins that will automatically optimize your image files as you upload them. They’ll even optimize images that you’ve already uploaded. This is a handy feature – especially if you already have a website filled with images. It is important though that you don’t solely rely on the plugins themselves. For example, you shouldn’t be uploading 2 MB images to your WordPress media library. This can result in eating up your web hosts disk space really fast. The best method is to quickly resize the image in a photo editing tool beforehand, and then upload it and use one of the following plugins to reduce it further.
One of the ways that Google and other search engines evaluate your website is your page load speed. This is also one of the ways that your visitors will evaluate your website – especially on their first visit. If your pages take too long to load, it is likely that visitors will move along. The Internet has too many distractions to expect visitors to wait.
What is minify? Minify is a programming term that basically means to remove any unnecessary characters that are not required for the code to execute. Minifying your code speeds up your page loading, making visitors and search engines happy.
Minifying your code removes:
- White space characters
- New line characters
- Block delimiters
Conclusion: Website speed matters a lot. Thank you for reading through this post. We hope you found at least a couple of great bits of advice that you can implement on your site now!