Boost Your Page Speed: Reduce Server Calls

a server that is sick up putting up with you and your unnecessary connections

Avoid Empty src and href Attributes 🗑

While YSlow specifically addresses an anchor element’s href value, the main concern here is the src value of an image element. The problem with an empty href value is that each browser interprets it differently. Should it lead to the current page, directory of the current page, root directory, or anywhere at all? This is more of a standards issue than a page optimization issue, but YSlow includes it nonetheless.

Reduce DNS Lookups 👇

Reducing DNS lookups is a unique item on this list in that it doesn’t fall into the category of decreasing connections to the website server. It is still a connection to a server though, and thus takes time for the user to connect to the DNS server in order to perform the DNS lookup.

Use Sprite Sheets 👪

Images are the fastest way to use up your server’s available connections. Some people go overboard on images: pre-CSS3 rounded borders, graphical borders and horizontal rules, rotating banners, social media icons, author pictures, background images, footer and header styles, advertisements, and then maybe some images that are actually a part of the content that the client reads. Images are undoubtedly a part of modern web design, and are something a website can’t live without; and nobody’s advocating for a website without images!

Three images. One file.
Three images. One file.

Use GET for Ajax Requests 🤑

Whenever a Ajax (or XMLHttpRequest) is used, the client obviously makes a connection to the server. A little known fact is that a POST request takes two connections — the first of which sends the headers, and the second of which sends the content. A GET request only requires one connection, as all the data is sent at the same time. If less than a few kilobytes of data is being sent, formatting it as a GET request may be more beneficial than a POST request.

Avoid URL Redirects ⏩

URL redirects require two connections instead of one, on top of screwing up the user’s Back button. Someone may use a URL redirect for a page that changes often or to handle multiple actions through a single file, among other reasons.

// today's featured article
header('Location: /articles/reduce-server-calls');

Using Dynamic Links

Displaying a link directly to the featured page is ideal over linking to daily-feature.php on every page. As an example in PHP, here’s a hypothetical dynamic link:

<a title="Featured Page of the Day" href="<?php echo file_get_contents('daily-feature.txt'); ?>">Featured Direct Link of the Day</a>

Using Dynamic Files

Some programmers may use one file to quickly and easily retrieve information on a lot of other files. It’s not too uncommon to see something along the lines of get.php?file=123. Once accessed, get.php will redirect you to the actual file. This is more useful than the aforementioned text file because it can handle multiple redirects within a single PHP file, instead of dedicating a TXT file to each link; but there are alternatives to even the almighty get.php, without resorting to hundreds of text files.

<a href="<?php
// instead of get.php?file=1
include 'array-of-files.php';
echo $files[1];
?>">my file</a>

Make CSS/JS External 🌲

While it may seem contradictory to the idea of minimizing file requests to take inline stylesheets and scripts and make them external [thus requiring another server call], there are actually two reasons to do this. Both, actually, revolve around saving bandwidth; but since external JavaScript and CSS has to do with cache and server calls, it fits better into this tutorial as precursor to adding Expires headers than it does to the previous and next sections of this optimization trilogy.

Add Expires Headers (Cache) 💾

The most important aspect of all web optimization is the cache! While it is ultimately up to the user’s browser to determine whether or not it wants to cache a file, servers have the option to suggest a cache duration, and most browsers listen to the recommendation.

<script src="update-status.js" type="text/javascript"></script><script type="text/javascript">
updateStatus("Charles Stover", "is writing a tutorial.");
</script>
<script src="update-status/<?php echo filemtime('update-status.js'); ?>.js" type="text/javascript"></script><script type="text/javascript">
updateStatus("Charles Stover", "is writing a tutorial.");
</script>
ExpiresActive On
ExpiresDefault "access plus 1 year"

Make Ajax Cacheable 💾

Just like other files, Ajax is cacheable. Dynamic files can have static results (such as get.php?file=1). While Ajax requests may go through a dynamic file, their content is not always so dynamic. No matter how many times the user accesses contact.php?list=admins, it will display the same thing. There is no reason for the user to connect to the server to get this content a second time when the browser could simply cache it after the first. You should be well equipped by now with the knowledge necessary to apply the same rules for files to your Ajax content as well.

Conclusion 🔚

You should no longer be making unnecessary DNS lookups, making a server connection for each image on your webpage, or redirecting between pages unnecessarily. Most importantly, you should be sending appropriate cache headers! This reduction in server connections will improve the speed at which your website loads and displays, a metric often taken for granted.

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store