What Is Site Latency?
Latency is the time it takes for a server to process and transfer data in response to a browser request. It’s usually measured in milliseconds. It can be expressed in two ways: a) Round Trip Time (RTT), which is the time it takes for a request to travel from the browser to the server and back, and b) Time To First Byte (TTFB), which is the time it takes for the browser to send a request to the server and receive the first byte of data.
Why Is Reducing Site Latency Important?
- Ranking Factor — Google and various other search engines consider page speed as a ranking factor when ranking sites. As a result, website load times can have an impact on how easily users can find the site in the first place.
- User Experience — According to a recent study, even one-second delay can reduce customer satisfaction by 16 percent. The importance of fast page loading for site loyalty and consumer experience cannot be overstated.
- User conversion—Studies have consistently shown that faster page speed leads to a higher conversion rate. In other words, the quicker a webpage loads, the more likely the user will take the desired action on that page.
Latency Reduction Design Techniques
You can’t completely eliminate latency, however you can reduce it. Although there are several infrastructure-focused ways to decrease latency, such as evaluating your hosting provider, implementing a CDN, or considering a Virtual Private Server (VPS), the site may still experience speed issues if resource loads are high.
This blog documents some of the software design strategies for reducing and influencing customer perceptions of site latency:
1) Prefetching
Prefetching is a latency-reduction approach in which an HTTP request is sent to the server before the user interacts with site feature to initiate the request. Content is available at lightning speed for customers because it has already been fetched.
However, there are a number of drawbacks, including the fact that the load introduced by unsuccessful prefetches may negatively impact server-side latency due to increased resource utilization. It also does not work well in case of state-changing links.
Prefetching is most commonly used to get top links from search and browse pages to detail pages. Google and AOL search results are examples of prefetching. Google prefetches the top search results that have highest click-through rate to facilitate a rapid request.
Implementations of prefetching includes the use of the Mozilla-based fetching mechanism (only for Mozilla-based browsers) and client-side JavaScript which pulls and caches content for links on the page.
2) Parallelization/Asynchronous Loading
Even when the underlying service requests are parallelized, the website features are sometimes rendered serially. Many page types can benefit from reduced latency by allowing feature rendering to be done in parallel.
If your CSS/JavaScript scripts loads elements asynchronously, the browser could continue loading other elements on the page simultaneously. When using synchronous loading, elements are loaded in the order they appear on the page, and new scripts are only loaded after the previous scripts have finished loading, which increases page load times.
Ajax, async JS, CMS tools, and plugins are some of the ways to achieve asynchronous loading. Async JS, for example, loads JS elements in parallel, which means the webpage may load before all of the JavaScript. This one tweak can have a significant impact on how long the user stares at a blank webpage in a high-latency situation.
3) Caching
Caching enables browsers to pre-load content in order to render webpages more quickly. It varies from prefetching as in the former, pages are pre-rendered and saved in a customer-specific cache, whilst in the latter, getting a rendered page still necessitates a request. Instead of rewriting the output for each successive request, backend services might cache the output for commonly used requests.
Browser caching is when a browser saves a copy of a website’s resources locally to reduce latency and reduce the number of queries made to the server. Customer behaviour can be predicted, and heavy customer requests can be pre-calculated and saved using customer proxy precache.
4) Minimizing HTTP requests
According to Yahoo, approximately 80% page load time goes to HTTP requests. Hence, fewer HTTP requests mean reduced page load time. Every HTTP request for pictures, stylesheets, scripts, and fonts adds to the overall load time of your webpage. As your website expands, these HTTP requests begin to pile up, eventually create a noticeable delay between user click-throughs and page loading.
The first step in reducing your requests is to determine how many your site currently makes and using it as a baseline. In-browser services like Google’s Developer Tools can identify all of your site’s HTTP requests and assist you to find old or overly-complex requests that can be deleted or integrated with other operations to save time.
5) Combining & Minifying JavaScript and CSS Files
Most web pages contain a combination of HTML, CSS, and Javascript. The problem is that CSS and JavaScript files must be transmitted from the server to the browser every time a visitor opens a page.
If a significant number of files are downloaded synchronously during page load, the page load time will be longer. You can combine them into one JavaScript and one CSS file to reduce the amount of files downloaded.
While you won’t be able to delete CSS and Javascript from your web pages, reduce the size of these files. The smaller the files, the faster the files will travel from the server to the browser. Minifying a file involves removing unnecessary formatting, whitespace, and code.
Conclusion
Designing for latency-sensitive customer-facing systems is critical since it affects website performance, user conversions and search engine rankings. Latency reduction even on a small scale can have a major influence on overall revenue and customer satisfaction.