Did you know that 40% of people will abandon a web page if it takes more than three seconds to load? As responsive web design has taken hold, internet users have come to expect exceptional performance. They want sites to perfectly cater to the device they’re using, they want easy navigation and intuitive design, and they want page load speed to be under one second. That’s a high bar to hit, but with the right optimizations in place, any designer can give their mobile interfaces lightning-fast page speed.
I recently scoured the web looking for every last tip and trick for optimizing website speed across platforms. Here is my comprehensive list of page speed hacks:
1. Resize Images
Images that are bigger than they need to be slow down your site. Instead of simply uploading full-sized images and letting your website shrink them to the right fit, start with the correct dimensions. Simple software like Squash Image Compression can be used to resize images to the exact dimensions of your page and reduce their file size in a matter of seconds.
2. Limit Functionality
Enabling restrictive loading on your mobile site prevents parts of your desktop site that can’t be used effectively on a mobile device from loading at all. This can make the user experience better while helping your pages load much more quickly. So, when you’re optimizing your site for mobile, think of features you can disable on your responsive website. Things like sidebars, ads, etc. can all be disabled. For mobile, focus on the most important functionality.
3. Reduce Content
It’s often a good idea to set a performance budget. If adding a new image or video or plugin will put you in excess of your performance budget, look for other content that can be removed or optimized to help your pages retain maximum loading speeds.
4. Limit HTTP Requests
There are plenty of ways to achieve this, but taking the wrong approach could compromise the quality of your site. The trick is to reduce HTTP requests without going overboard. You can make changes like using CSS sprites instead of data URIs and keeping your CSS stylesheet at the top of each page. You should also enable caching, but more on that later.
5. Choose a Responsive Design
Responsive designs are expected by visitors to your site. They enable your content to adjust to fit whatever size screen the visitor is using and they optimize the layout for different devices. Using a responsive design template helps ensure cleaner code and better loading speeds than trying to make a non-responsive designwork on different platforms.
6. Use a Great CDN
Your content delivery network (CDN) is at the heart of your website. It needs to be fast and reliable. Make sure that your CDN is delivering on its promises.
7. Reduce Server Response Time
Your goal should be to get your server response time under 200 milliseconds. All the other tips on this list should help you bring this number down. You can monitor your response time and look for potential problems by using any number of free responsiveness checking tools, all of which can be found with a simple Google search.
8. Compress Everything
Compressing your web pages is just like shrinking them into a zip file. Compression let you reduce the bandwidth of your pages, which reduces the number of HTTP requests. The simplest way to do this is with a tool known as Gzip.
9. Enable Browser Caching
Caching is a way for visitors to your site to “remember” your site on their devices. The first time they visit, they’ll need to download as many as 30 components to view your site. Having caching enabled, that number drops to just a few components on subsequent visits, drastically improving page load speeds.
10. Visual Improvements
This won’t actually result in increased page load speeds, but it will give the impression that it does. Facebook and Medium does a good job with this by creating visual placeholder content instead of showing spinning loaders (which could be perceived negatively).
Medium does it with images.
Facebook loads fake placeholder content instead of showing loading spinners.
11. Clean up Your Resources
Any code that isn’t adding to your website should be eliminated. Extra code means extra time loading your site. To minify your HTML, use PageSpeed Insights Chrome Extension. To minify your CSS, use YUI Compressor or cssmin.js. To minify JavaScript, use Closure Compiler, JSMin or the YUI Compressor.
12. Properly Format Images
In addition to making your images the right size, you should also make sure they’re in the right format. JPEGs are best, PNG are ok, and GIFs should only be used for small, simple graphics, ideally less than 10×10 pixels.
13. Properly Code Images
For the code, the HTML for your images should look like <img src="">, with the name of the file between the quotation marks. If your images aren’t coded correctly, your site will have to work harder to retrieve the right images, slowing down your page speed.
14. Use External CSS
Your CSS contains the style requirements of your site. It can either be contained in an external file or inline. Inline CSS is inserted into your HTML code on each page, which can cause serious delays. Using external CSS instead simplifies your code substantially.
15. Prioritize Above-the-fold Content
The part of your landing page that visitors see without doing any scrolling is called the above-the-fold content. This is an old newspaper term, but it applies well to website design. Prioritizing your site’s above-the-fold content so that it loads faster will help keep visitors on your site longer. One way to do this is to split your CSS into two parts, an inline part for above-the-fold content and an external part for everything else.
16. Delete Plugins
Using too many plugins can slow down your server speed and create unnecessary security issues. Get rid of any plugins that you aren’t using, and try deactivating plugins one by one to see if any particular plugin is causing big problems with your loading speed.
17. Reduce Redirects
If your site relies on redirects to take users from your main site to your mobile site, that could slow down your website speed. You can use an HTTP redirect to help reduce intermediate redirects from your main site to your mobile site. You can also include <link rel="alternate"> markup in your desktop pages so that Google crawlers discover your mobile pages.
18. Avoid Popups
Popups are still a thing and I guess they work since so many sites still use them. You can still integrate them on your website, but on mobile sites they just don’t work as well. Have you ever landed on a popup while reading an article on a mobile device? If you have, then you probably know what I mean.
What’s the alternative? Use a conversion box at the end of your blog post or page, like Neil Patel’s blog:
19. Get Rid of Repetitive DOM Elements
DOM means Document Object Model. It refers to the way in which your site is presented on different devices. On mobile devices, some elements that appear on your desktop landing page get hidden, but the mobile browser still wastes time and energy hiding those elements. Getting rid of those hidden elements will help your page load speed on every platform.
The Importance of Page Speeds
If you’ve never paid much attention to your page speed, it’s time to sit up and take note. All the time and energy that you put into your content and layout will amount to nothing if your site takes too long to load.
In fact, The Aberdeen Group found that just a one-second delay in page load times leads to 11% fewer page views (which results in higher bounce rates), 16% lower customer satisfaction, and a 7% loss in customer conversion. If your site takes three or more seconds to load, those losses get substantially worse.
If this list feels overwhelming or is a bit over your technical abilities, you may find it helpful to start with Google’s recommendations and tools. Here you’ll get some basic insights and free resources for testing your page speed. Google will even tell you exactly what problems your site is dealing with so you can focus your site optimization efforts.
Just make sure you bookmark this list before heading over to Google so that you can find simple solutions to each page speed problem you encounter.