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.
In this article, we’ve gathered some best practices and tips on how to speed up your website from our own project managers here at 1902 Software.
Know what’s slowing down your site
To get to the solution, you first have to know what’s causing the problem.
Ryan, 1902 Software’s project manager for WordPress, often sees clients using very large images on their websites, not knowing that it can affect page speed. “It’s a common thing that people don’t realize is slowing down their site. More often than not, it’s aesthetics over speed.”
“Another common issue that comes up for CMS [content management system] users, especially WordPress, is installing plugins that are meant to be used for a specific page only,” Ryan adds.
These are just some of the more common issues, and sometimes it’s relatively simple issues like these—issues that stem from the website owner, editor, or marketer being unaware of what to do and what not to do with respect to speed—that are causing the slow loading time of a page.
Other times, the issue may be deeper in the website’s code and needs technical guidance to be resolved.
But the common denominator of these issues is that unless you are aware of them, you will not be able to address them.
What’s causing a slow loading time is not always obvious—if it were, then you would have done something about it by now. Especially for more complex issues that lie in the code, you may need developers to take a look at your site and determine what’s not working and causing problems.
For “general diagnosis”, though, most speed and performance testing tools offer insights and suggestions on what’s causing your website to load slowly. Here are some that we’ve found useful for our own projects:
1. Google’s Test My Site – This tool measures the mobile page speed in terms of the First Contentful Paint, or the point at which the first piece of content loads on your page.
For top performing sites, this tool also provides the site speed, or the measure of the speed of all pages within your site, based on real world data collected through the Chrome User Experience Report (CrUX).
Test My Site provides basic suggestions on how to improve mobile page speed, as well as two additional features: the Industry Benchmark, where you can see how you measure up with top performing sites in your industry, and the Impact Calculator, which we have discussed previously, where you can measure speed’s impact on your business by getting an estimate on potential revenue increase with a faster loading time.
2. Lighthouse – This is an auditing tool that can be run as a Chrome extension, or directly within Chrome DevTools (i.e., the set of web developer tools built in the Google Chrome browser that’s usually accessible when you right click and Inspect a web page).
Lighthouse scores a page on different categories: performance, progressive web app, accessibility, best practices, and SEO.
The performance score is based on different metrics: first contentful paint, first meaningful paint, speed index, first CPU idle, time to interactive, and estimated input latency.
Aside from the score, Lighthouse also points out possible causes of your page’s slowdown, and provides actionable suggestions for improving page performance and corresponding savings on load time.
3. Page speed insights – This provides insights on your page speed for both desktop and mobile.
Page speed insights largely uses Lighthouse data for testing speed, and therefore reports the same metrics that Lighthouse uses. It’s worth noting, however, that Page speed insights and Lighthouse (accesed from within Chrome DevTools) can sometimes produce different results. [This is our observation from our own tests, but generally, the results should be within the same range.]
Aside from the lab data analyzed by Lighthouse, it also presents real world user experience data from CrUX when available for the site.
4. WebPageTest – This lets you simulate how your page loads in a specific location and browser, so this is especially ideal for businesses with customers coming from different regions in order to get a better overview of how your pages load for your target users.
Aside from the location, WebPageTest also lets you select the browser and many other advanced settings that will help you further analyze your website’s performance.
5. GTmetrix – GTmetrix is a suite of different features that focus on improving web performance, and comes in both a free and paid version.
It analyzes a web page based on indicators set by Google and Yahoo, and reports different metrics such as page load time, page size, and number of requests. GTmetrix also lets you playback videos of page loads for a closer look at possible loading issues or a frame-by-frame view of real-time page load.
There’s also an option to set up automated monitoring of pages and notifications for different conditions that indicate poor page performance, like too slow loading time or a significant increase in total page size.
6. Pingdom – Much like GTmetrix, Pingdom offers different features for monitoring your website’s speed and performance.
They have a speed testing tool that lets you test the loading time from a specific location, and the pro solution even provides a feature to monitor actual users that visit your site. This helps in identifying real world bottlenecks that users may be experiencing when your site is loading.
Like any undertaking, speed optimization will be most efficient when you first understand what you’re working with (e.g., your current speed, the resources and elements that you need and have, etc.), and get to the root of what the likely causes are for your slow loading time.
What you can do to speed up
Now that 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?
Tip #1: Remove anything unnecessary.
“The most optimized image is the non-existing image,” says Google in their mobile speed optimization guide.
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.
Our project managers recommend Cloudflare and StackPath (previously MaxCDN).
Tip #11: Remove unused or unnecessary plugins.
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 e-commerce 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.