Several factors can cause poor website performance. Modern sites consist of multiple moving parts. Any of these components could impact your website’s speed from the software application and database to the hosting infrastructure and delivery network.
Typically, a fault in underlying technology, poorly optimized code, or a misconfigured element could cause poor web performance. Identifying the malfunctioning component requires an investigation that starts at the source and ends at its destination. By following the path that finally renders your site on a user’s device, you can isolate and remedy the faulty element.
A typical web delivery architecture has three primary components — the code elements, the underlying hosting infrastructure, and the network that delivers your content.
Optimizing HTML, CSS, and JavaScript
Today’s modern, interactive websites typically utilize a mix of HTML, CSS, and JavaScript to render the feature-rich web pages users demand. If your website is slow, reviewing your source code is an excellent place to start.
Optimizing Images
Images are the building blocks of great websites. Without these objects, web pages would be lines of text with hyperlinks. They also play an essential part in managing user experience and functionality. Clicking on a button is far more intuitive than a link in a line of text. However, these page elements are also the largest in terms of data size impacting page load speeds.
When developing your site, you must optimize the images referred to in your HTML code. By implementing this technique, you can reduce the image’s size, decreasing the total data needed to render the web page. As there is less data that needs to travel from the server to the user’s browser, this can significantly increase your site’s speed.
Multiple techniques exist that you can leverage to optimize images. For example, there are several file formats available. Traditionally, developers have used JPG and PNG. However, newer technologies, such as the Scalable Vector Graphic (SVG) and WebP from Google, offer much better compression and performance. Other techniques you can use to optimize images include cropping the image before uploading it to your website. You could also leverage responsive design to reduce the data footprint on mobile devices. Using the built-in compression technologies found in software such as Adobe Photoshop is another option.
Minifying CSS and JavaScript
Like HTML, CSS and JavaScript play a critical role in rendering web pages. Whereas HTML is the foundational layer of a site, CSS and JavaScript provide the design and functionality. When a web page loads, code inserted into your HTML page calls CSS and JavaScript files. Your browser then executes the code stored in these files applying the design and functionality. As CSS and JavaScript are text files, removing the whitespace between the text can reduce the file size. We may not be able to read minified CSS or JavaScript, but your browser ignores paragraphs and spaces between words. Depending on the file size, the reduction in data can be substantial.
Removing Render Blocking Resources
Your browser loads components listed on your HTML web page in chronological order. It starts at the top and sends a GET request for every element it finds until it reaches the page’s end. If a particular component, such as a large JavaScript file, takes a long time to load, it delays subsequent elements. There are a few ways to remedy this problem. You could save the JavaScript file locally so that it reduces the time taken to fetch the code. Alternatively, you could move slow-loading resources to the bottom of the page, or if the element is not needed, you could delete it.
Improving Server Performance
Once you have optimized your website’s code, the next step in identifying and resolving any performance issues is to investigate the server hosting your site. There are several configurations on a server that could cause poor website performance. These include the platform resources, security products such as web application firewalls and anti-malware, or the hardware infrastructure between the various server components.
Server Resources
Every application running on a server consumes CPU, memory, network, and disk resources. If the server is over-utilized, any of these hardware resources could start queuing processes resulting in degraded performance. There are several ways to check resource usage on a server. If you are hosting the website on a dedicated server you control, you could leverage analytical tools to check the CPU, memory, disk, and network utilization. Alternatively, if a service provider hosts your site, they may provide some metrics. If they do not, temporarily moving your site to another platform will quickly show you if the problem lies with the original host.
Security Products and Other Software
Another reason your website might be slow is the presence of security products or other software on your server. As these services require resources to perform, your website may be competing for CPU, memory, or disk. Temporarily disabling these applications will quickly show you if this is the case. However, as these services perform a vital role in protecting your site, they cannot be turned off permanently. Reconfiguring them for optimization or moving your site to another server is a better alternative.
Platform Infrastructure
Modern websites consist of several components. These include the application, static objects such as HTML, CSS, JavaScript, and a database. Suppose your site responds to millions of requests per day; a typical architecture would host these elements on different services. In some instances, the connections between these various elements could cause slow page load speeds. For example, if there is a delay in sending and receiving information from the database, it could negatively impact user functionality. You could remedy this problem by hosting all your elements on a single server. However, you need to ensure that it has enough resources to process the various elements’ requests. Another option is to scale out your server resources. Technologies such as load balancers and server clustering improve performance as they spread the resource load across several servers. They also enhance resiliency as they remove the single point of failure found in typical single-server architectures.
Content Delivery Networks
Once you have optimized your code and confirmed the optimal configuration on your server, the final step is to investigate the delivery network. As users access your website over the Internet, the path used to send and receive data could also negatively impact your site’s speed. For example, you may find that static objects such as text, images, CSS, and JavaScript take a long time to travel to the end-user. You may also discover that users in different parts of the world have better performance than others. In such cases, leveraging a Content Delivery Network (CDN) could significantly increase your website’s speed.
A CDN is a distributed network where a service provider hosts nodes in data centers across the globe. If you subscribe to this service, you can host your static objects on their servers. When a user visits your website, their browser will download these objects from the closest node. As the data takes less time to travel to the end-user, your website’s page load speeds can increase substantially.
Follow the path to fix your slow website.
Many factors could play a role in making your website slow. As modern sites consist of several moving parts, identifying the root cause requires a step-by-step approach. By following the path your site takes from its codebase to the browser, you can isolate and optimize every element. Adopting this approach ensures you investigate every component that could cause a slow loading website.
Hire the best developers worldwide — vetted by Upstack, perfect for you!
Originally published at Upstack.co on 31st March, 2021 by Chris Lazari
