The internet has developed enormously over the years and its outreach has been explosive. The advancement from 2G to 3G and 4G opened up a world full of possibilities. The introduction of the blazing fast Mobile internet paved the way for seamless access to services like – online shopping, e-mails, instant messages, video and voice calls, banking and more. Since many websites are cropping up daily, and many internet users using mobile devices started abandoning slow loading websites for good user experience, it is important to optimize websites for mobile devices to hold your valued customer closer, increase overall website traffic, rank higher in search engines, ensure good user experience and ensure better ROI.

We are covering some tools and techniques that will help you to speed up your websites.

365andUP:

To find out how to speed up your website, you need to measure your website’s speed first and analyze it to find out what needs to be optimized.

You can use 365andup.com for this purpose. 365andUp is one of the best web performance analyzing tools out there which helps to monitor your website speed and find out how mobile-friendly it is.

This online tool provides a detailed analysis of your website and also gives suggestions as to what can be tweaked in your website to give you that extra burst of speed, for mobile as well as desktop. Head to the following URL 365andUP and type in your domain name and hit the “Submit” button.

The analyze provide you information about in which areas you can optimize your website. The tool analyses your page against certain rules such as compression, image optimization etc. and awards points accordingly.

You can get basic details like how much your website satisfies the rules specified by Pagespeed YSlow, Page size, number of requests, the time taken for the page to load, the time taken to receive the first response from the server(TTFB) etc. as shown in the following image.

The Page Analysis section gives you a general idea of which requests are taking up the most time, size of the request etc.

The Performance Insights section provides valuable feedback about your website and guides you on what to optimize. Since we are en route to speed up the mobile version of your site, click on Pagespeed Mobile and now you can see how your website fares against the Pagespeed rule checks.

You can click on the down arrow beside each rule to get more details about it and refer the exact requests or contents that needs to be looked upon. Optimizing your sites according to these rules will not only help you to speed up your websites but also get good SEO scores.

You can also view a waterfall chart of the file requests of the website and see which request takes the maximum time.

Enable Compression

GZIP compression is one of the foremost things that should be checked when you are about to optimize your website speed. GZIP compression speeds up the website to a great extent.

What is Gzip Compression? How does it work?

When a user accesses your website, a request is sent to the server to provide the website’s files to the Browser. The larger the size of the files, more time is needed to send over the files.

If GZIP compression is enabled, the server will compress the files before sending it over to the browser. The browser then unpacks the files and displays the contents for the user. Thus the time taken to load the website can be reduced considerably. GZIP compression will reduce the size of the website up to 90%. It does by replacing similar strings or characters with a reference value. There are other compression methods with greater compression ratios, but GZIP compresses data faster with not so bad compression ratio.

How to enable GZIP compression?

If you are using Apache web server, you can add the following to your .htaccess files:

Image Optimisation

A major part of the size of a website is often taken up by images. So analyze your website and take down unnecessary images. PNG images generally have higher quality, therefore it will be larger in size. Using only JPG files will help to reduce the size of your websites.

Remove unnecessary metadata from the images to trim down its size. The images may contain metadata embedded on it like the model of the camera, location information etc. Bring down the quality of the images as required. You don’t need to use a 1080p resolution picture if the site only displays it in a small part of the website.

If you are using WordPress, there are many plugins available like EWWW Image Optimizer, WP Smush etc. which can be used to optimize images. Google checks for image optimization while ranking the websites, so it is better to take this into consideration if you are on the mission to speed up your site and improve your SEO scores.

Use responsive images on your websites. Consider a large image used as a header on your website. The image is covering the top of the screen horizontally. A high-resolution image may be required for high width screens like in Desktops and laptops. But when loading the same in low width devices like mobile phones or tablets, there is only a need for a low resolution cropped image. So you can manipulate the way the images load on specific devices by using responsive images. This will definitely speed up the website while loading it in mobile devices.

Minification of CSS, Java Scripts, and HTML

Minification is the process of removing unwanted data from your codes without changing the way the web browser processes the data. For example, there may be a lot of unwanted spaces, line breaks, comments, etc in the codes. Minification removes these, thus reducing the file size even further.

The minification process can be done using various tools. The following are some online tools that can be easily used for the minification of Java, CSS, and HTML:

• Minifycode
• jscompress
• cleancss

If you are using WordPress to build and manage your websites, there are a lot of plugins available which makes this task easier. Better WordPress Minify is one of the popular plugins for doing this.

As these tools make changes to the codes, it would be a good practice to keep a backup of the files or the entire site. Keep a copy of the original CSS, JS, HTML files if you plan to edit them in the future.

Leverage Browser Caching

When you first load a website in a browser, it downloads the necessary files and displays it. When you load it the next time, it may seem to load faster. This is because the browser retains some of the downloaded files when the website was first loaded, thus reducing the loading speed. This feature is called browser caching. Utilizing this feature will help to improve your website loading time.

You can add the following to your .htaccess file to enable browser caching for certain contents:

ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"

If your CSS files are cached, changes you make in the site’s design may not be reflected immediately. You will need to clear your browser cache to view the changes made.

If you are using WordPress, you can use popular plugins like W3 Total Cache, WP Rocket etc to enable and utilize browser caching with ease.

Choosing the correct hosting environment:

Test the website’s speed and optimize the web server configuration to bring down the server response time. 365andUP.com provides detailed information about the server response time.

One of the factors affecting the server response time is the hosting environment. If your website has a lot of traffic, you should make sure that you are providing the required resources for your website to work perfectly. You should choose between shared hosting, VPS, and dedicated hosting according to your needs.

Also read: Difference between Shared, Dedicated & Cloud Web Hosting

Prioritize Visible Content

This requires optimizing your HTML codes so that above-the-fold content is loaded first. Above-the-fold (ATF) refers to the area of your webpage that is visible on the screen while the page first loads. Below-the-fold refers to the area of your webpage that is beyond the screen, and you need to scroll down to view this content. Loading ATF first will make the webpage seem faster to the visitor.

Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages (AMP) is an open source initiative led by Google aiming to create web pages that load instantly. AMP uses lean HTML and JS, which makes the website load blazingly fast on mobile devices. It displays the content that matters and cuts down on the elements that impact the speed and performance of the website.

The JavaScripts are loaded asynchronously so that it does not cause the browser to wait for the JavaScript to complete before loading the other components. It also requires mentioning the size of images, ads etc and in the codes, so AMP can determine the size of each element and it builds the layout before downloading the elements with the larger size.

If you are using WordPress, you can use the plugin AMP for WordPress plugin to create an AMP version of your website. It is as easy as checking some boxes in the AMP settings. The main disadvantage of AMP is that widgets and other feature-rich contents do not work with AMP and not all ad makers support AMP, which may cut down your revenue.

So how fast should your website load on your mobile? The following is the result of a research conducted by Google.

Source: Google/SOASTA Research, 2017.

By analyzing the results of the research, one can easily conclude that the user retention increases when the page load faster and decreases as the page takes more than 3 seconds to load.

According to the research, the ideal loading speed for is below 3 seconds. Utilize the above techniques helps to achieve this goal so that your websites load faster and ensure a good experience for all your users.

Thanks for dropping by. Ready for the next blog?

How to Use Azure Command-line Tool for Data Transfer

The post How to Optimize Websites for Mobile Devices appeared first on Sysally.