Like most things, with the good comes the bad, and responsive web design is no different. Without proper optimization and careful planning, your responsive website could be slow and painful for the end user to navigate. Conscientious efforts to optimize the end user's experience are an integral part of good responsive design and development.
One of the biggest culprits when it comes to slow load times is images. All too often, the same-sized image used on the desktop site will be loaded for the mobile version as well. This is considered bad practice; when it comes to mobile browsing, every kilobyte counts. So, why let a user download a 300 kB file when they only need to download a 100 kB file? Creating appropriately sized images for various devices is a must.
Let's take a look at an example. The next two screenshots show a comparison of image downloads between desktop and mobile versions:
In the preceding screenshot, you can clearly see that the image downloaded is 1140 pixels wide by 641 pixels high. This is a fairly standard header image size for a desktop site to download. Now let's see what happens when the site is viewed at mobile size, as shown in the following screenshot:
In the mobile view, the website still looks great. The image is 385 pixels wide by 216 pixels high, but take note of the natural size of the image displayed. The natural size of the image is still 1140 pixels by 641 pixels. This means that the same image was downloaded to be displayed on the mobile website as the desktop layout. This might not seem like a big deal, but the experience of waiting to download an image of that size on a mobile device could very well lose you viewers on your website.
We will cover some great ways to avoid this problem a bit later. There are some excellent techniques available to manage your image downloading based on your current screen size.
Another cause of slow load times is the number of requests that your browser is making. Limiting the number of requests made to your server to download content, style sheets, or scripts will greatly improve your page's load times.
Using techniques such as minification to reduce the size of the response also goes a long way towards making your website load incredibly fast.
As an example, I've included the sizes of the two style sheets from the Bootstrap framework—bootstrap.css and boostrap.min.css. The latter is minified, and the former is not.
Take a look at the size difference between the two files, as shown here:
The file that has not been minified has added almost 24 kB to the request. That might not sound like a whole lot, but there are multiple requests for JavaScript files, cascading style sheets, and other scripts going on at the same time, and it'll all add up.
We will take a look at this a bit later, and discuss how to implement some simple code to reduce the number of requests made; we'll also explore which tools we can use to get our code minified.
Clicking on a button and not seeing an immediate response from a user interface can be terribly frustrating.
A website that is not optimized and downloads unnecessary JavaScript files and bloated HTML documents (among other things) is prone to performance issues when it comes to interaction with the server.