Lightweight WebsitesManoj SinghBlockedUnblockFollowFollowingJun 12Tips for faster-lightweight websitesPhoto by Shiro Hatori on UnsplashWe live in a world where people have so many alternatives for any product.
To keep customers engaged with the product, its utterly important to put customer experience a top priority.
For a software product, speed is a key factor to provide better customer experience.
According to a Google study, 40% of people abandon a website that takes more than 3 seconds to load and a 1-second delay in page response can result in a 7% reduction in conversions.
In this post, we are going to discuss a very important and often overlooked strategy to improve customer experience, which is, the faster load time of websites.
TLDR;Configure the server to use GZIP compression.
Optimize ImageDeliver images responsivelyUse HTTP2Resource prioritization — rel=preload, rel=preconnectMinify text assetsSprite images to reduce the number of requestsUse HTML5 semantic elementsRefrain from using huge CSS libraries/frameworksLook for leaner JS library alternativesText compression with GZIPEnabling GZIP compression on a web server is one of the best optimizations to implement.
GZIP performs best on text-based assets.
(CSS, JS, HTML).
It can achieve around 60% -70% compression rate for a larger file.
Under the hood, it remembers some of the previously seen content and attempts to find and replace duplicate data in an efficient way.
The server should be properly configured to serve GZIP compressed resource when the client requests it.
Bonus: There is a newer compression algorithm Brotli developed by Google, that works better than gzip in most cases.
HTML files are 21% smaller than gzip.
CSS files are 17% smaller than gzip.
Optimize ImagesImages account for almost 60% of the downloaded bytes on the web.
Hence, optimizing images can result in some of the best improvements.
Resize the images appropriately before uploading them to the serverCompress images to reduce the unnecessary file sizeResize the images instead of defining width and height in HTMLUse file formats appropriatelyJPEG (Lossy compression hence smaller file size)PNG (Lossless compression hence larger file size)Use of modern file formats like WEBP which provides better lossy and lossless compression.
Browser support stands at around 80%.
Deliver images responsivelyIf you are serving responsive image and all you are doing is displaying different images for different screen size, you can use srcset attribute of <img> tag.
jpg 320w, image-480w.
jpg 480w, image-800w.
jpg 800w” sizes=”(max-width: 320px) 280px, (max-width: 480px) 440px, 800px” src=”image-800w.
jpg”>srcset defines the set of images we will allow the browser to choose between, and what size each image issizes define a set of media conditions (e.
screen widths) and indicate what image size would be best to choose when certain media conditions are trueMigrate to HTTP2HTTP/2 helps in reducing latency by :Full request and response multiplexing by Http2 pipelining:Multiplexing is the capability where a browser can send multiple requests simultaneously on the same connection and receive the requests back in any order.
This means, now the browser doesn’t have to wait for sending subsequent requests until a connection is free.
All the requests are sent to the server in parallel.
The server responds to each one and they return in any order.
This also helps in minimizing protocol overhead.
Protocol overhead refers to metadata and network routing information sent by an application, which uses a portion of the available bandwidth of a communications protocol.
This extra data does not contribute to the content of the message and hence called as an overhead.
By reusing the same connection, HTTP/2 is able to both make more efficient use of each TCP connection and also significantly reduce the overall protocol overhead.
Server push:Server Push is a push mechanism of the server where the server can send multiple responses for a single request.
This means, along with the response to the original request the server can send other resources as well without having to request each one separately.
You have an HTML document consisting of scripts and stylesheets.
The server already knows that the client is going to need the scripts and styles so it can push those files without waiting for the client to request them.
Resource PrioritizationThe browser assigns different relative priorities to different types of resources.
For example, a <script> tag in your page’s <head> would be loaded at a High priority while CSS being at highest.
Browsers provide the ability to tweak the default priority of these resources based on our use case.
Following are a few ways to do that:Preload: Preload tells the browser that a resource is needed as part of the current website load, and hence it should start fetching the resource as soon as possible.
<link rel="preload" as="script" href="script.
js"><link rel="preload" as="style" href="style.
css">Preconnect: Preconnect tells the browser that your page consists of certain resources which might need to establish a connection to another origin, and hence the connection process should start as soon as possible to reduce connection delays (DNS lookups, routing, Handshakes, etc).
<link rel="preconnect" href="https://otherdomain.
com">Prefetch: If we can anticipate a user to take a particular action which might require downloading of a different resource other than that needed by the current webpage, in such scenarios prefetch tells the browser to download that resource whenever it is done with other processing (needed by current webpage) with the lowest priority.
<link rel="prefetch" href="differentpage.
html">Minify text assetsMinification is a process of removing redundant data which results in smaller payload size.
We cannot remove any arbitrary data but in cases where we have information regarding the data, it is possible to reduce the size.
Remove comments from code, Remove white spaces.
Sprite ImagesUsing CSS sprites allows you to combine several images into one bigger image but still use every separate image individually on your page.
This can greatly lower the number of separate image files your web page has to call and thus greatly increase your page speed by minimizing the number of HTTP requests.
Use HTML5 Semantic elementsHTML5 semantic elements helps in:Reducing the code size<header></header><section> <article> <figure> <img> </figure> </article></section><footer></footer><div id="header"></div> <div class="section"> <div class="article"> <div class="figure"> <img> </div> </div></div><div id="footer"></div>Making code easier to read.
Providing greater accessibility.
Search engines and assistive technologies (like screen readers) are also able to better understand the context and content of your website, meaning a better experience for your users.
Refrain from using huge CSS libraries/frameworksPrior to using a CSS framework like bootstrap/foundation, we should ask if we really need that library.
CSS libraries add a lot of unnecessary code which our application hardly uses and it tremendously increases the file sizes.
CSS is a render blocking resource, which means that the browser cannot render any content until the CSSOM is constructed.
We should aim to keep our CSS lean to achieve faster load time.
Consider using CSS Grids / Flex Boxes which helps in creating simple and complex layout easily with less code.
Look for leaner JS library alternativesI’ve been a victim of googling a library -> heading over to npm -> getting the library.
However, we should look for leaner alternatives, which do not add unnecessary code.
This will help in creating our application files smaller in size.
Final WordsThere are numerous other ways to further optimize a website, which I hope to cover in other posts.
At first, this list might seem a little overwhelming, but you need not implement all of them at once, it can be a gradual move.
Observe and analyze the performance/business boost you get out of it which will motivate you to take it further.