The Need for Speed
The consequences of a slow website include frustrated users, negative brand perception, increased operating expenses, and loss of revenue. It must be noted that each bug fix, new feature, and system upgrade can impact performance; this, in turn, creates more work for web developers to increase its speed. It is easy to say that the code just needs to execute faster, but often, code needs time to perform specific operations. This can include things like encryption, large content handling, complex graphics, image manipulation, and third-party dependencies. Therefore, a faster website does not always involve optimizing every line of code written but looking at what is 'fast enough' in code and optimizing the end-to-end experience holistically.
Understanding thresholds and the meaning of each metric is the first step to maximizing the potential of a web page. Once these foundational concepts have been realized, you may then begin to employ techniques in three different areas for optimum efficiency: server-side optimization, front-end optimization, content distribution.
Server-Side Optimization
Server-side response is the time it takes to load the necessary data to begin rendering a page from the server (subtracting any web latency). This includes a variety of back-end optimizations like compiler options, application logic, database indexes, CPU, memory management, etc. Identification and analysis are key to understanding within the system. This allows the developer to focus on areas that are time-costly and negatively affect the generation of page content. It is typically easier to scale static content such as images, or CSS, as web servers and load-balancers. However, requests to the application’s server, that need to query information from the database, or fetch data from other resources, face new scalability and performance challenges. The negative by-product of these new challenges is an increased load. An increased load is equivalent to increased data/traffic being processed by a system/page. This addition can slow things down considerably, which is why it is important to focus on server-side request and analyze the response under certain load thresholds.
The goal of increasing speed is to enhance the response time of server-side calls, as well as to reduce the number of calls that are made. Highly interactive web sites make a lot of calls to the application’s server to retrieve more data as the site reports progress or is browsed by a user. Server-side caching reduces network latency across servers and minimizes server round-trip requests.
Front-end Optimization
Optimizing on the back end is only one part of the equation, the other piece is the front- end. About 10–20% of the response time for end users accessing a web page is spent gathering the HTML document from the web and showing it on the browser. Optimizing the front-end, end user, experience is key to dramatically improving response time. When analyzing the time for a typical webpage request, the end-user spends 80 – 90% of that time waiting for the components of a webpage to be downloaded. Utilizing the following best practices will increase front end optimization:
Optimizing browser caching — static resources are saved by the browser’s proxy cache, reducing time for downloads.
Minimizing round-trip times — reduce the number of serial request-response cycles by minimizing DNS lookups, redirects, combining CSS, sprints, and JavaScript.
Minimizing request overhead — reduce upload size, enable compression, minimize CSS, and HTML and optimize images.
Minimizing payload size — reduce the size of responses, downloads, and cached pages
Optimizing browser rendering — improve the browser's page layout.
Content Delivery Network Distribution
A content delivery network (CDN) is a collection of web servers distributed across multiple locations. This practice delivers content more efficiently to users. The proximity of the user to your web server, has an impact on response times. Deploying content across multiple, geographically dispersed, servers will increase load speed from the perspective of the user. The main problem CDN addresses is latency: the amount of time it takes for the host server to receive, process, and deliver on a request for a page resource (images, CSS files, etc.). Because 80-90% of the end-user’s response time is spent on downloading page components, dispersing static content close to the end user only makes sense. The overall result is faster load times for each end-user; which, also provides better search engine ranking.