Blog

Technical knowledge base for your reference!

How to optimize your pages for better load speed

Optimize pages for better load speed

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

Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, JavaScript and images. Some pages might only consist of a few files and be small in size – may be a couple of kilobytes. For others however there may be a lot of files, and these may add up to be several megabytes large. The issue is two-fold.

  1. These large files take longer to load and can be especially painful if you’re on a slow internet connection (or a mobile device).
  2. 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.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

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.

#2 Eliminate render-blocking JavaScript and CSS

If you test your website on Google PageSpeed insights, then you will likely see a suggestion to eliminate render-blocking scrips and CSS. In this article, we will show you how to easily fix render blocking JavaScript and CSS in WordPress to improve your Google PageSpeed score.

Every WordPress site has a theme and plugins that add JavaScript and CSSfiles to the front-end of your website. These scripts can increase your site’s page load time, and they can also block rendering of the page. A user’s browser will have to load those scripts and CSS before loading rest of the HTML on the page. This means that users on a slower connection will have to wait a few milliseconds more to see the page. These scripts and stylesheets are referred to as render-blocking JavaScript and CSS. Website owners who are trying to achieve the Google PageSpeed score of 100 will need to fix this issue to attain that perfect score.

Here are two methods that will fix the render-blocking JavaScript and CSS in WordPress. You can choose the one that works best for your website.

  1. 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.

    You can start by checking the box next to JavaScript Options and CSS Options and then click on the save changes button. You can now test your website using PageSpeed tool. If there are still render blocking scripts, then you need to come back to the plugin’s settings page and click on ‘Show Advanced Settings’ button at the top.

    Here you can allow plugin to include inline JS and remove scripts that are excluded by default like seal.js or jquery.js. Next, scroll down to CSS option and allow plugin to aggregate inline CSS. Click on the ‘Save changes and Empty Cache’ button to save your changes and empty plugin cache. Once you are done, go ahead and check your website again with the PageSpeed tool. Make sure that you thoroughly test your website to see that nothing is broken by optimizing your JavaScripts or CSS.

    How does it work?

    Autoptimize aggregates all enqueued JavaScript and CSS. After that, it creates minified CSS and JavaScripts files and serves cached copies to your website as async or deferred.
    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.

  2. Fix Render Blocking JavaScript using W3 Total Cache
    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.
    Under the suggestions where it says: ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’, click on ‘Show how to fix’. It will show you the list of scripts and stylesheets.

    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.
    First you need to add JavaScript files that you want to be minified. Scroll down to JS section and then under the ‘Operations in areas’ set the embed type to ‘Non-blocking async’ for the <head> section.

    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.

  1. 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.
  2. 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.
  3. 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.

  4. 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.
  5. 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:

  1. 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)
  2. Using indexes where necessary or appropriate
  3. Changing your schema to group objects such as tables, views, and stored procedures appropriately
  4. 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.

#5 Minify JavaScript, CSS and HTML

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.

Your website has to load a lot of files, including your HTML, CSS, and JavaScript. You need this code to be as clean and fast as possible. The problem is this code was written to be read by humans. It includes extra white space, comments, and formatting that computers don’t need in order to run the code. Fortunately, this can be fixed! A great way to help speed up your code is to minify it. Minify?

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:

  1. White space characters
  2. New line characters
  3. Comments
  4. Block delimiters

These types of characters are used to add readability to the code but they are not required for the code to execute properly. Minifying your code is especially useful for interpreted languages that run over the Internet, such as CSS, HTML, and JavaScript. It reduces the amount of code that has to be transferred over the web. The superhighway that is the ‘net still has a limited amount of bandwidth and supplying the smallest and cleanest code possible is in our best interest as web developers.

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!

Website Design & Development

Digital Media Marketing

  Toll Free: 1-888-666-0786

  Fax: 91-422-4225889

  sales@actmedia.net

Follow Us On

Copyright © actmedia.net 2001 - 2015. All rights reserved.
actmedia is a division of Amulya Infotech, an award winning ISO certified firm.