It's becoming increasingly important that your web pages load fast. Ideally, a web page should load in 2-3 seconds or less. If your web pages aren't quite that fast yet, we've come up with some tips that can help you speed up your website.
![]()
Click on optimized version to download each image.
![]()
If necessary, refresh your browser window to see the results.
There are a number of ways to reduce the number of HTTP requests, including image sprites, combining CSS and JavaScript files, and simply eliminating unnecessary files.
Getting Started
Do an Initial Test of your Website Speed
Before you start working on improving the speed of your web pages, you should do some initial testing of your home page and any other important pages that you want to speed up. This will provide you with a good benchmark to improve upon and to evaluate the work that you are doing. Below, we've listed a few tools that you can use to test your website speed. In addition to giving you an idea of how fast your web pages are loading, these tools provide detailed performance information for your pages. You can use this information to make further enhancements to speed up your web pages.-
GTMetrix
GTMetrix analyzes a web page and returns scores for Google PageSpeed and Yahoo YSlow. You can also see fully loaded time, total page size, and the number of requests.![]()
![]()
-
WebPageTest
WebPageTest will grade your web pages on a series of performance optimizations. It will also do multiple sets of test runs of your web pages that you can compare to each other. WebPageTest is full of options and is ideal for the more technically savvy.![]()
![]()
-
Pingdom
Pingdom's Website Speed Test returns a clear and easy to read summary of your web page performance, broken down by categories.![]()
![]()
-
PageSpeed Insights
Google's PageSpeed Insights returns a Speed Score for both mobile and desktop versions of your website.![]()
- Google's Mobile-Friendly Test determines if your web page is mobile-friendly or not.
- The Google Chrome Web Browser can analyze the current web page that you are viewing. Open Chrome's Developer Tools and click on the Audits tab. Chrome uses Lighthouse to do the audits, the same tool used by PageSpeed Insights.
- YSlow grades websites based on Yahoo!'s rules for high performance websites. You can install it as a Google Chrome extension.
Back Up Your Website and Database
Before you start working on speeding up your website, you should make a current back up of your website and database files. Ideally, you might want to make incremental back ups as you make changes, in case you need to roll back just prior to making some updates.Tip #1: Optimize Images
By far, one of the most significant ways that you can speed up your website is to optimize your images. Besides reducing the size of an image, you also want to make sure that you use the correct file type and image dimensions. There are also some other techniques that you can use, such as the img srcset attribute and lazy loading, that can really help speed up your web pages.Reduce the Size of an Image
Large images can significantly slow down your web pages, so you'll want to reduce the file size of an image as much as possible while also retaining an acceptable level of quality. This is obviously a balancing act – you don’t want the image reduced in quality so much that it just doesn’t look good. Consequently, it may take some experimentation on your part to get the image just right. There are a number of ways to reduce the file size of an image, including image editing software and online tools. Here are some options:- Adobe Photoshop
- TinyJPG and TinyPNG
- Compressor.io
- Kraken
- ImageOptimizer
- ImageOptim
- Crush Pics (Shopify App)
- Minifier (Shopify App)
- other online tools
Click on optimized version to download each image.
Use the Correct File Type (JPG, GIF, PNG)
There are three common file types that you will probably use for your web pages - JPG, GIF, and PNG. Each of these file types are suited for different types of images, so make sure that you use the correct file type where it is appropriate.- JPG - for complex images that use a lot of colors (i.e. photographs)
- PNG - for images that require transparency (i.e. logos) or very high quality graphics
- GIF - for images with large areas of the same color and a small number of different colors
Use the Correct Image Dimensions (Height and Width)
The height and width of an image should only be as large as the area that it needs to fill in your web page. Use image editing software to resize images to fit correctly.Use the img srcset attribute
A user on a mobile device doesn't necessarily need to view the same images as a desktop user. The img srcset attribute specifies a series of available images to display depending on the user's browser size. Here is an example:<img src="logo-small.jpg" srcset="logo-medium.jpg 768w, logo-large.jpg 992w, logo-extra-large.jpg 1200w">
When using this syntax, the user's browser will examine the available images and then display the image most appropriate for them.
Tip #2: Lazy Load Images
The idea behind "Lazy Loading" is to defer (or postpone) the loading of images until they are needed. That is, images and videos aren't loaded until the visitor needs to see them. For instance, you would lazy load images that are "below the fold" because they don't need to be seen initially. Lazy loading can have a significant impact on performance, especially for media-heavy web pages. Google has some JavaScript that you can use to incorporate lazy loading into your website. You can also download or copy our version of the lazy load script: https://www.dayaweb.com/js/google-lazy-loading-example.js You'll also need to update any images that you wish to lazy load with the correct attributes:<img class="lazy" src="logo-placeholder.jpg" data-src="logo-small.jpg" data-srcset="logo-large.jpg 2x, logo-small.jpg 1x">
In the example above, the class attribute specifies that this image will be lazy loaded. The src attribute specifies a placeholder image. The placeholder image is typically a very low quality version of the image that will be loaded by default. The data-src attribute specifies the image that will replace the placeholder image once the image is lazy loaded. Finally, the data-srcset attribute specifies alternate images to use based on the user's browser size and resolution.
There are also some WordPress lazy loading plugins:
Tip #3: Use a CDN (Content Delivery Network)
The more resources that you request from your server, the greater the load and the potential for delay in loading those resources. By using a CDN, you can offload some of those resources so that they are served by a third-party instead of your own server, reducing the number of requests from your server. Fortunately, many popular third-party resources are available from a highly-optimized existing CDN that you can use for free. Here are some good candidates to be served from a CDN:- JavaScript libraries and frameworks (jQuery, Angular, React)
- HTML and CSS frameworks (Bootstrap)
- Fonts (Google fonts)
- Icons (Font awesome)
Tip #4: Optimize JavaScript
Loading external JavasScript files can significantly slow down your website. By default, each JavaScript file included on a webpage will need to be downloaded, parsed, and executed before the rest of the page can be loaded. Consequently, the key to optimizing external JavaScript files is to delay or eliminate the need to load the external file in the first place.Use the async attribute
By default, files are loaded synchronously, in the order in which they appear on the page. Consequently, files loaded later in the page require that the files above them be loaded first. Normally, external JavaScript files are downloaded, parsed, and executed immediately, adding additional time to the loading of the page. However, if you have external JavaScript files that aren't necessary to render the page, you can use the async tag to fetch resources asynchronously. JavaScript files that are loaded asynchronously are fetched as soon as possible, but aren't executed until the page is no longer rendering.<script src="external-javascript-file.js" async></script>
Instead of loading your JavaScript files immediately, you can use the async or defer tags. Note: this would only apply to JavaScript that you don't need to correctly render the page initially.
Defer Loading of JavaScript
Using some simple JavaScript, you can wait until the rest of the page has loaded before loading JavaScript.Remove Unnecessary JavaScript
If you've gone through multiple updates to your website, it's possible that you have some legacy JavaScript that is no longer needed. Review all of the internal and external JavaScript files that are currently being used on your website and remove those that are no longer necessary.Deactivate or Delete Unncessary WordPress Plugins
If you use WordPress, review all of the installed and activated plugins to check if they are still being used on your website. If not, deactivate and/or delete them.Tip #5: Minify JavaScript and CSS
You can minify both external and inline JavaScript and CSS code to reduce their size. There are many online tools that can be used to minify code: For WordPress, you can try the following plugins:Tip #6: Reduce HTTP Requests
In general, the more HTTP requests that your web page makes, the longer it takes to load. HTTP requests include such things as images, external scripts (i.e. JavaScript), and stylesheets. To see how many requests that your web page is currently making, you can use Google Chrome Developer Tools. Click on the Network tab to see the number of requests in the bottom left corner:
If necessary, refresh your browser window to see the results.
There are a number of ways to reduce the number of HTTP requests, including image sprites, combining CSS and JavaScript files, and simply eliminating unnecessary files.