How to improve your website loading speed

An optimized website can mean the difference between conversion and loss of sale, visitor becoming a member and just a window shopper. With cellular carriers across the globe adopting 4G networks as their default cellular data transfer speed; poor connections are no longer an excuse for slothful websites. According to Google just the difference in loading speedings can increase your site revenue and conversion by 3X. Paypal states the 3 major barriers to mobile purchases are:

  1. Web pages opening too slowly
  2. Not enough product info being visible or accessible
  3. Difficult to compare prices and specs

We tested our site speed/quality with free tools such as Google’s Test My Site. Here is what we found

Recommendations to improve website speed and loading efficiency:

AMP your page Leverage

AMP’s open-source library to create mobile web pages that load near instantaneously for users.

Eliminate render-blocking resources

Resources for page styling and functionality are delaying visibility of primary content on the page. Deliver critical JS/CSS inline and defer all non-critical JS/styles.

Properly size images

Your page shouldn’t serve images that are larger than the version rendered on the user’s screen. Resize images to match display dimensions to speed up and improve page load time.

Defer offscreen images

Since users can’t see offscreen images when a page loads, those images don’t need to be loaded initially. Use offscreen images to speed up the page load time.

Minify CSS

Minification strips a code file of all data that isn’t required in order for the file to be executed. This results in faster response times and lower bandwidth costs.

Minify JavaScript

Minification strips a code file of all data that isn’t required in order for the file to be executed. This results in faster response times and lower bandwidth costs.

Efficiently encode images

The less competition there is for your bandwidth, the faster your browser can download and render content on your screen. Optimising images improves performance for your website.

Serve images in next-gen formats

Encoding your images in JPEG 2000, JPEG XR, and WebP will load faster and consume less cellular data. Serve a fallback PNG or JPEG image for other browser support.

Enable text compression

Text compression minimises byte size, which leads to faster page loads. Enable text compression on your server to minimize total network bytes.

Preconnect to required origins

Establishing connections often involves significant time on slow networks. Preconnect to required origins to make your application feel faster without negatively affecting bandwidth usage.

Resolve slow server response times

Users dislike it when pages take a long time to load. Slow server response times are one possible cause for long page loads.

Avoid multiple page redirects

Redirects introduce additional delays before the page can be loaded. Remove unnecessary redirects and replace with direct links.

Preload key requests

Preloading requests can make your pages load faster. Declare preload links in your HTML to instruct the browser to download key resources as soon as possible.

Use video formats for animated content

Use MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes.

Avoid enormous network payloads

Reduce the total size of network requests to speed up page load time.

Serve static assets with an efficient cache policy

HTTP caching can speed up your page load time for returning users. Increase your cache lifetime to speed up repeat visits to your page.

Avoid an excessive DOM size

A large DOM tree can harm your page performance. Look for ways to create DOM nodes only when needed, and destroy them when no longer needed.

Minimise critical requests depth

Minimise the number and download size of critical resources.

Instrument your scripts with User Timing marks and measures

Consider instrumenting parts of your scripts with the User Timing API to create real-world measurements of key user experiences.

Reduce JavaScript execution time

Inefficient javascript can slow down your page. Reduce the time spent parsing, compiling, and executing your code.

Ensure text remains visible during webfont load Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

Defer unused CSS

Style sheets containing unused CSS can significantly increase the time users wait before content appears on their screen. Delete unnecessary CSS.

Phew!..I guess we ll get working.

Leave a Reply

Your e-mail address will not be published. Required fields are marked *