Mobile-only websites versus responsive websites

A couple of years ago I was given the opportunity to build a website for an insurance company. The website was modern, and it had many features. Even a user was able to customize and purchase an insurance policy by spending a couple of minutes browsing the website. After launching the website, the client realized that he had an excellent opportunity to enter the mobile market because back then, mobile browsing was in its early stages. So, the following month he contacted us and asked us to build a mobile version of the website.

When we read the requirement, we realized that the mobile website had a similar functionality; only the UI was going to be different. So, we used the same codebase that the desktop version had, and we created a new website using the existing code. This was a popular method at that time, and the mobile website had a different URL. Once the user entered the original website using a mobile device, our script detected the device and redirected the user to the mobile website. This is how a Mobile-only website works. However, this method has some flaws.

To avoid these flaws, we now use another method to build the mobile websites. It is not another website, we use CSS media quarries and give a different look and feel to the website by detecting the device screen size. Once we do this, the desktop, tablets, and mobiles will have the same codebase but a different look. This is what we call Responsive web design.

In the following code, you can see how it is possible to have different backgrounds for various screen sizes using the CSS media quarries:

@media screen and (max-width: 320px) {
    body {
        background-color: Yellow;
    }
}
@media screen and(min-width: 321px) and (max-width: 768px) {
    body {
        background-color: Pink;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        background-color:Green;
    }
}

If we compare the Mobile-only websites and responsive websites, we will find that both of them have positive as well as negative qualities. However, if you are going after 100 percent performance of your mobile website and you don't want to worry about any other stuff, my recommendation will be that you go for the Mobile-only website because you will have a separate code for the mobile device, and you can only use mobile-related content. However, as mentioned earlier, it has some negative impacts as well.

In the following table, you will see the comparison between Mobile-Only site versus Responsive Design.

HTTP requests

Do you remember the example of the supermarket that was given in shopping cart before making the payment.

We can apply this technique to our website as well. According to researchers (source: can reduce these components that are getting downloaded, then we can reduce the HTTP requests.

When doing a mobile web optimization, reducing the number of HTTP requests in your website is the best place to begin. According to researchers, 40-60 percent of daily visitors come to a website with an empty cache and they probably are new visitors. So, making the mobile site fast for those visitors is key to a better user experience.

By simplifying the design of the page, we can easily reduce the number of HTTP requests of the page, but we cannot always have a simplified design because sometimes, we need content-rich websites. In this section, we are going to discuss a few techniques for reducing the number of HTTP requests.

In the following screenshot, you can see some of the content that is downloaded when we browse a mobile website:

Combined files

By combining files together, the developer can easily reduce the number of HTTP requests that they make. By combining all the scripts and CSS into single style sheets, the developer can easily archive this. These days, many platforms offer this service in their backend as a feature. So, if you are a developer make sure that you use those advanced options as much as you can. However, combining files together is not that easy when the scripts and style sheets vary from page to page. Even so, including this part in your release plan improves the response time.

If you have a website that uses some third-party plugins and components, you will get many style sheets and script files. Take a look at the following example. This is a website that was recently built and it had 15 style sheets and 24 scripts calls:

<head>
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="all" />
<link rel="stylesheet" type="text/css"  media="print" />
<script type="text/javascript" src="http://www.mywebsite.com/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/prototype/validation_activeskin.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/varien/js.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/varien/form.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/varien/menu.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/mage/translate.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/appmerce/eway/validation.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/modernizr/modernizr_media_query.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/scripts.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/jquery.selectbox-0.2.js"></script>
src="http://www.mywebsite.com/js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/product_landing.js"></script>
</head>

Using CSS and script margin techniques, the developer was able to reduce it to three style sheets and three scripts, as shown here:

<head>
<link rel="stylesheet" type="text/css"  plugins />
<link rel="stylesheet" type="text/css"  media="print" />
<link rel="stylesheet" type="text/css"  media="all" />
<script type="text/javascript" src="http://www.mywebsite.com/js/810d4cd77db5b6cd2688a4a14e6fqwer.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/88ef80fd45f12b34285737f3133asdf.js"></script>
<script type="text/javascript" src="http://www.mywebsite.com/js/2d10391171b5d322415d3c3c16a1zxcv.js"></script>
</head>

However, merging files sometimes can create unpredicted issues such as the following:

• Sometimes, it may create namespace conflicts with other scripts and create unpredictable bugs
• If the developer made a change to one file, it would invalidate the whole combined file and browsers will have to cache it again
• Combined files may become large, and it will take additional time to download
• Combined files lose the benefits of having CDN (we will discuss the CDN later) capability

In the following diagram, you can see how merging files affects HTTP requests.

CSS sprites

CSS sprite is not a new technique. It is a well established concept, and many developers use CSS sprites as a common practice. It is true that we do not need to use sprites for every situation, but using sprites will reduce the server load immensely, and it will help us to improve the performance of the page. If you do not have any idea about this technique, now is the time to learn what it is and how it works.

As mentioned earlier, the concept of sprites is not a new invention; it dates back to the mid-1970s. Video game developers used this concept because of the increased complexity of video games at that time. The developers had to deal with a detailed graphic object while keeping the game play as it is, so they used this one large combined image to get the result and the position of the sprite image controlled by the hardware controllers.

Time passed and in the late 2000s, web developers had identified the significance of this method and the web developers started to use this technique on their websites. Creating and using sprites is not a difficult process. The developer has to combine multiple images that have been used throughout the website to make a master image. Then, using the background-position property in CSS, the developer can define the exact position of the image to be displayed.

When the page is loaded, it will load the master image at once rather than loading single images one by one. It might not seem like an improvement, but it actually is. Imagine a situation where a mobile website has millions of page impressions per day. If we can save 10 HTTP requests for one user, you can do the calculation and see for yourself the savings that we can make. This is why CSS sprites are heavily used these days, particularly when we create icons and buttons.

In the following screenshot, you can see one of the sprite images that the developer has created, after which you will find a sample CSS code that is used to create a simple button:

Sample CSS code:

.button-clear {
        background: transparent url(sprite.png)0 -210px no-repeat;
    }

.button-clear:hover {
        background-position: 0 -236px;
    }

When creating a sprite image, considering the following points will help you to create an optimized CSS sprite:

• Arranging the images horizontally rather than vertically will reduce the file size.
• Combining similar color images into a sprite will help you to reduce the color count.
• Don't leave big gaps in between images. This will not reduce the file size much, but it will help the user agent to decompress the image efficiently.
• Combine PNG and Gif images first.
• You may use a spiriting service that makes the process easy.
• Sprites may be displayed differently in different browsers.
• You have to provide the exact coordinates in the CSS files to define the correct location in the sprite image.
• Combine all the small images to one image so that it will reduce the HTTP request to one.
• Combine cacheable images.

Image maps

Similar to sprites, image maps can be created by combining several images together into a single image. It will keep the same file size, but because of the reduced HTTP requests it will speed up the time taken to load the page. An image map will be ideal for contiguous images and scenarios such as navigation bars. However, defining the coordination of an image map can be a hectic process.

There are two types of image maps available, which are as follows:

• Client-side: When a user activates a selected area in an image, the pixel coordination defined to it is identified by the browser and the browser will perform the task allocated to it
• Server-side: When a user activates a selected area in an image, the user agent sends that data to the server and the server will perform the task allocated to it

Remove duplicate scripts

Many developers think that the occurrence of duplicate scripts in a web page is very rare but research indicates otherwise. According to Yahoo! ( duplicate script. The main reason behind this was that the development team was too large, and there were too many scripts that had been used. When this happens, duplicate scripts decrease mobile performance by creating additional HTTP requests and wasted java script executions. To prevent this, the developers can a use common practice or method, such as a script management module to include scripts.

The usual method to insert a script in a page is to use a script tag on the page:

<script type="text/javascript" src="helloworld.js"></script>

However, by using an alternative function, the developer can do this easily.

<?php insertScript("helloworld.js") ?>

Using the preceding method will prevent inclusion of the same script twice on the page and can also be used to do a dependency check and add a version number to script filenames.

Enable Gzip compression

According to the data, Gzip has the capability to reduce the response size by about 70 percent. 90 percent of today's Internet traffic has the capability to support Gzip. Gzip compression is a very simple and efficient method to save bandwidth and speed up the website.

Before we understand Gzip, let's see how our regular browser and server handles a request.

When we request the webpage from the server, it goes through the following process:

1. The browser asks the server to send the index.html file.
2. The server receives the request, and searches the index.html file.
3. When the server finds the file, it sends the file to the browser.
4. Then, the browser loads the file as it is.

So, this is how the browser and server normally interact with each other. If the server finds a 300 KB page, it sends the file as it is to the browser and the browser will download the 300 KB file and show it to the user.

Consider a situation where the server can send a ZIP file to the browser rather than sending the index.html file.

In this case, the process will look like the following:

1. The browser asks the server to send the index.html or index.html.zip file, if it's available.
2. The server receives the request, and it will search the index.html file.
3. When the server finds the file (300 KB), it will zip the file (index.html.zip) and send it to the browser (15 KB).
4. The browser receives the index.html.zip file, unzips it, and shows it to the user.

To follow the preceding process, the browser and server should have a better understanding about each other, and the agreement has two parts:

• The server will get a message from the browser that it accepts the compressed contents (there are two compression methods, Gzip and deflate)

  Accept-Encoding: gzip, deflate

• Then, the server sends the compressed content, if it's available

  Content-Encoding: gzip

If the server does not send the compressed content to the requested browser, the browser will take it as a no, and it will start to download the regular version. These days, many browsers have the capability to send the request but our servers are not configured to respond.

Configuring the server is a fairly straightforward process. In Apache, you can add the following code to the .htaccess file:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
ddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

To enable compression in IIS, you have to first install it on your server. To install static or dynamic compression, use the following steps (https://www.iis.net/configreference/system.webserver/security/ipsecurity).

For Windows Server 2012 or Windows Server 2012 R2, use the following steps:

1. Go to the taskbar and click on Server Manager.
2. In Server Manager, choose the Manage menu, and then click on Add Roles and Features.
3. In the Add Roles and Features wizard, click on Next. Select the installation type and click on Next. Select the destination server and click on Next.
4. On the Server Roles page, navigate to Web Server (IIS) | Web Server | Performance and select Static Content Compression and/or Dynamic Content Compression. Click Next.
   
5. On the Select features page, click on Next.
6. On the Confirm installation selections page, click on Install.
7. On the Results page, click on Close.

For Windows 8 or Windows 8.1, use the following steps:

1. On the Start screen, move the pointer all the way to the bottom-left corner, right-click on the Start button, and then click on Control Panel.
2. In Control Panel, click on Programs and Features, and then click on Turn Windows features on or off.
3. Navigate to Internet Information Services | World Wide Web Services | Performance Features | Dynamic Content Compression | Static Content Compression.
   
4. Click on OK and close.

For Windows Server 2008 or Windows Server 2008 R2, use the following steps:

1. On the taskbar, click on Start, navigate to Administrative Tools | Server Manager.
2. In the Server Manager hierarchy pane, navigate to Roles | Web Server (IIS).
3. In the Web Server (IIS) pane, scroll to the Role Services section, and then click on Add Role Services.
4. On the Select Role Services page of the Add Role Services wizard, select Dynamic Content Compression if you want to install dynamic compression or Static Content Compression if you want to install static compression, and then click on Next.
   
5. On the Confirm Installation Selections page, click on Install.
6. On the Results page, click on Close.

For Windows Vista or Windows 7, use the following steps:

1. On the taskbar, click on Start, and then click on Control Panel.
2. In Control Panel, click on Programs and Features, and then click on Turn Windows Features on or off.
3. Navigate to Internet Information Services | World Wide Web Services | Performance Features.
4. Select Http Compression Dynamic if you want to install dynamic compression or Static Content Compression if you want to install static compression.
   
5. Click on OK.

After you have installed compression you have to enable it for your application or website, and you can do this by using the following steps,

1. Open Internet Information Services (IIS) Manager.
2. Next, in the Connections pane, go to the connection, site, application, or directory for which you want to enable compression.
3. In the Home pane, double-click on Compression.
   
4. In the Compression pane, check the boxes to enable static or dynamic compression or remove the check marks to disable static or dynamic compression.
   
5. Once you have completed the preceding steps, click on Apply in the Actions pane.

Once you do this, you can check this by using the web developer toolbar on your browser (we will discuss this in a later chapter), or you can use an online Gzip testing tool.

Enabling compress mechanism is one of the fastest ways to improve mobile websites' performance, and it can be done by following some very simple steps. So, enjoy the benefits.