Published on July 17, 2019 Last modified on July 09, 2021
The path to a faster site is not a straight line.
Speed optimization is not a one-time task, so there are some practices that you need to go back to over and over to ensure that you’re keeping up.
Some you may even completely skip over because ultimately, every website has different types of content and different issues that need to be optimized.
Once you have tested your site speed and have a clear direction, or at least an idea on what’s slowing down your site, here are different techniques for improving your speed, in order of the easiest to the hardest implementation:
Start with your images and other graphic assets
We all want a visually appealing site design to entice customers, and powerful images are usually the best way to achieve this. However, these images will not be of much use if users can’t actually see them because they take too long to load.
Besides, today’s consumers care more about speed than visuals.
According to Unbounce’s survey, a significant number of users are willing to give up animations (56.6%), videos (52.8%), and photos (24.1%) in a page if it means that it will make the page load much faster.
Very large images are always cited as the “biggest culprits” of slow pages, so what can you do with them?
The first thing you have to consider is whether all the fancy images and videos placed on your site are actually necessary.
If the message represented by these assets can just as well be done with some creativity through CSS (or cascading style sheets—a language used to define styles, shapes, and effects), then it’s probably better to completely remove such images and reduce the weight of your pages.
Tip #2: Compress images.
Make sure that the images and videos you upload into your site are rendered in the actual size that they’re taking up within a page.
Also remember to compress images by running them through tools like TinyPNG.com. Compressing your images significantly reduces their file size while at the same time still preserves their quality.
Tip #3: Use the correct format.
Google suggests that images should be in WebP, an image format that is at 30% more compression than the usual JPEG. For photos with transparent backgrounds, use PNG; for scalable icons and shapes, use SVG.
Step into your user’s shoes.
We previously discussed how users sometimes perceive pages as faster than their actual speed because of different factors, including the relevance of the content that first loads and the page’s interactivity.
Use this illusion of speed to your advantage by optimizing your site specifically for your target user, and not according to a generic goal.
To be clear, there’s nothing wrong with having concrete goals like a target load time or page weight.
However, load time will never be standard across every type of user accessing your site—some of them may have the fastest connections, but some may be browsing under poor network conditions.
Optimizing your site with the user in mind will help you optimize for at least some of these real-world bottlenecks as well.
Tip #4: Prioritize loading above-the-fold content.
While it’s ideal that all content in your page loads fast, it’s more important to ensure that above-the-fold content loads faster.
Consider using the “lazy loading” technique, where images are loaded only when the user scrolls or enters the area where they are placed. This makes your page appear to load faster, because elements are only rendered as needed.
Tip #5: Make sure your content is immediately interactive.
Visually loaded content may not be that useful for a user if she cannot engage or interact with it right away.
Ask your developer to remove or at least defer the loading of these render-blocking resources to improve your time to interactive.
Tip #6: Display placeholders while your assets are still loading.
When a user leaves a web page because it’s “too slow”, it’s usually because there’s nothing happening during the loading time to keep the user engaged—like having only a blank white page displayed on the screen.
However, even when a page loads slowly but still displays some feedback to the user, the user is likely more willing to wait because of a visible signal that something is happening.
Facebook, for instance, uses placeholders while it loads posts on the news feed. These are what appears to be the bare skeleton of a post consisted of shapes standing in for the elements like the profile picture, name, and the post itself, until the actual content is loaded.
Tip #7: Decrease tap or click delay.
The perception of speed is not limited to the initial loading time.
Even if your page did load quickly, the user will leave with a bad experience if elements are not readily interactive (as dicussed above) and if there’s too much delay after a click or tap.
Google recommends that the traditional 300-350ms delay between touchend and click should be eliminated to enable a faster interaction for the user.
Optimistic actions send instant feedback to the user that make it seem like an operation is complete when in reality, the server is still processing it in the background.
A good example of this is Instagram’s like/heart action on its app—when a user double taps a photo, a heart is immediately displayed to the user even while the action has not been fully processed yet on Instagram’s end. Or messaging apps where the message appears to be “sent” right away (i.e., the message leaves the text field and goes into the chat box) when it’s actually still sending.
Consider the instances when you yourself left a page because it was loading too slow versus the times that you waited for a page that didn’t load in a snap. Those pages may have more or less the same load times in terms of seconds, but the difference is probably that the latter group kept you engaged enough with consistent feedback.
Again, it’s ultimately how your users experience your site that defines their impression of how fast or slow it is. Optimizing for user-centric metrics is a win-win, really—you get to “selectively” optimize your site, but do it in a way that actually caters to your users’ needs and expectations better.
Aside from these two main focus areas, here are other speed optimization techniques you can implement fairly easily:
Tip #9: Leverage browser caching.
The browser can save or “cache” these elements locally so that when the user returns, it won’t need to re-download all the files again, thereby decreasing the loading time.
Leverage this feature by marking your pages or specific elements within your pages with your desired interval at which the browser has to update or re-download such elements.
Basically, you tell the browser that some elements on your page are not likely to be updated regularly so it can cache these elements for a longer period, lessening the resources that it has to re-download every time a user returns to your site.
Tip #10: Use a Content Delivery Network (CDN).
A CDN is a network of servers strategically located in different locations around the world. It acts as a “connector” between the user and the origin server of your website and greatly helps with improving your page speed by:
Being closer to where your users are – the distance from the user to your web server can affect page speed. With a CDN, the user’s browser can send a request from the nearest server to its location instead of directly from your main server.
Taking some of the load off your main server, so to speak – multiple requests can slow down your main server. If you have a CDN, the requests can be directed to these servers instead and lessen the load that the main server needs to handle. On top of this, it also helps you reduce hosting costs by reducing the data that the main server needs to provide through caching content.
With many things to maintain on a website, deactivated or unused plugins can pile up and weigh down your site.
Check if all the plugins you currently have installed are ones you are still using and remove unnecessary ones to reduce your page weight.
Tip #12: Upgrade to the latest version.
If you’re using a CMS (like WordPress or Umbraco) or an ecommerce platform (like Magento), simply upgrading to the latest version can help improve your page speed.
Of course, it’s not always the case that upgrading is the best option, especially for very new version releases that are still unstable.
However, it’s good to stay on top of latest updates in your CMS to take advantage of any new features and improvements that they bring, not to mention the new security patches that will help protect your site better.
Tip #13: Upgrade to a larger server.
Removing, minifying, and compressing resources can only do so much. If your site is growing and you’re getting more traffic, it may be time to upgrade or scale up to a larger server. You may want to consult your developer on this, however, as scaling up to a larger server is not something to be taken lightly.
More techniques for your development team
Marcelo, one of our Magento project managers, says that merging JS and CSS files is a relatively simple speed optimization trick that could make a big difference in a page’s loading time. To be fair, however, it’s a relatively simple trick for a developer, but not so much for a non-technical person.
Here are some more tips that you could check with your development team:
Tip #14: Minify resources (CSS, JS, and HTML)
by “cleaning up” the code, i.e., removing extra spaces, commas, or other unnecessary characters as well as formatting and unused code.
Tip #15: Enable compression
of CSS, JS, and HTML files that are larger than 150 bytes using gzip.
Tip #16: Reduce redirects
to reduce additional wait time for HTTP requests.
So far, we have discussed optimizing existing resources or removing unnecessary ones.
To take your speed optimization a step further, consider implementing the more advanced techniques that we’ll share in the next articles.
These are technologies that may take a longer time to implement, but will be ultimately worth it because of the significant improvement they can bring to your site speed.