Responsive websites are essential to providing a mobile friendly user experience. The problem is that they tend to take a long time to load compared to a very simple dedicated mobile site. Over time, slow loading times can lead to site abandonment, decreased sales and loss of regular visitors. Fortunately, there are many things that you can do to speed up a responsive site without sacrificing the design. Here are a few tips that will make a big difference.
1. Used Delayed Loading
Instead of giving users the burden of having to download all the images on your page at once, you can use delayed loading to optimize the browsing experience. Plugins like Advanced Lazy Load allows you to load images only when they are on the screen of the user. So if you have thirty images on your blog, only the first two or three that shows up on screen will load. The remaining images will load as the user continues scrolling to the rest of page.
2. Use a Fast & Reliable Content Delivery Network
There are some quality WordPress hosting services out there but sometimes that may not be enough. If your site receives a large volume of visitors consistently, then it will be worth investing into a content delivery network (CDN). A CDN is a network of servers that delivers files based on the user’s location (a NY server will deliver to a NY user for example). Just to be clear, a CDN is a service that will supplement a WordPress hosting service, not replace it.
3. Optimize Image Sizes
If you run an eCommerce site or a blog that uses a lot of images, you need to make sure that you optimize your images. All those images can add up to a couple of megabytes if you don’t work on them. There are many free tools out there like the EWWW Image Optimizer that will optimize GIF, PNG and JPG files without hurting the quality of the image. In some cases, you will need to reduce the quality to bring images files to a reasonable level. Try reducing the resolution by a bit instead so that the quality doesn’t get affected as much.
4. Reduce the Number of Scripts and Plugins
One of the thing that site owners notice is that they don’t even use many of the scripts and plugins that they have installed on their site. Plugins in particular are notorious for slowing down loading times. Take a look at your site and see if there are any unnecessary ones that you can get rid of. If you need to run scripts, make sure to run it at the end of your site’s code. This will make your site prioritize the top of the fold content so that you can present something useful to the user right away.
5. Enable Browser Caching
Unfortunately, new visitors have to deal with having to download all the elements (CSS, images, Javascript, etc.) of your website. There’s nothing you can really do about that but what you can do is to make the browsing experience faster for repeat visitors. By enabling browser caching, you eliminate the need for repeat visitors to download the same elements over again. If you want to build an audience of regular visitors then you must implement this simple solution.
6. Minimize HTTP Requests
Every time your website calls back to a file, it results in what’s called a HTTP request. By reducing the number of HTTP requests, you can speed up your responsive site significantly. You can do this by using CSS to refer back to your images, combining multiple CSS in one style sheet and doing the same for your Javascript. There are other solutions being developed in regards to HTTP requests like multiplexing, so keep yourself updated on future changes.
7. Compress Your Code
When you look at code, you’ll notice that there’s a lot of space that’s used to keep the code organized. What you probably never realized is that this slows read times and also results in redundant memory usage. Tools like W3 Total Cache and GZip compression remove all the unnecessary space and compresse all of your website elements into smaller files. You can see a reduction of anywhere from 30 to 50 percent reduction in your page file size with compression.
8. Find Alternative Plugins
If you are running plugins that are absolutely essential to your site, then you want to figure out which plugins are responsible for slowing your site down. You can use tools like the P3 Plugin Performance Profiler to assess the load times of all your plugins. Once you identify which ones are causing problems, you can look for alternative plugins that deliver the same features and functionalities but have faster load times.
9. Fixing Site Errors
Problematic scripts that keep refreshing, broken links that result in 404 pages, browser compatibility issues and errors in code can slow down your site’s loading speed significantly. You want to run your site through a full diagnostic to ensure that you fix all the errors and fix dead ends like broken links. While some errors like broken links won’t slow your site down much, it still hurts the user experience which is what you’re trying to improve here.
10. Optimize CSS Usage
Instead of being redundant in your use of fonts for different parts of your sites like the headers, sidebars and widgets, make sure you have a comprehensive CSS style sheet that covers everything. Also, try to set up your CSS to ensure that the most important elements on the top of the fold load first. This won’t make the site load faster but it will appear as it did to the user.
Those are some of the top tips for speeding up your responsive website. Just because your website is responsive doesn’t necessarily mean that it’s optimized for mobile devices. With mobile devices being slower in performance and connection, you have to do everything you can to reduce loading times.
