Jas Singh
Webguruz Technology Pvt. Ltd.
With mobiles being enhanced with new features on a regular basis, the popularity of their usage is only rising. Statistics reveal that mobile usage has exceeded the use of desktop by a huge margin. And, this popularity is only expected to grow with time. Hence, the user experience of a website on a mobile is important. One of the basic needs to satisfy users who browse your website on their mobiles is its loading speed. If a website is slow or an app is clumsy, users will drift away to another site in no time to get the information they require.
Before you work on improving the loading speed of your website, you will need to estimate its current speed. The loading speed can be estimated using Google PageSpeed Insights.
Google PageSpeed Insights (PSI) diagnoses your website’s mobile and desktop versions and provides you indications about the problem areas that need to be addressed.
Although PageSpeed Insights is a tool for developers, I’ll explain it in a non-technical language so that you will understand where and why optimization of mobile presence is essential.
Simply add the address of your website on PageSpeed Insights. You will be provided a complete report that looks like the one below:
A high Total score indicates a lower problem density. Errors impact the Total Score predominantly compared to warnings. However, you should address both these issues to enhance the health of your site.
Although the speed of loading of a page on a mobile is determined by web coding but your server also influences it. The longer the waiting time of a server to respond to a request from the browser, lower the loading speed.
A redirect diverts the visitors of one file to another file or location. Redirecting a file is done through a set of instructions in various ways. However, irrespective of the way in which it is done, the page speed is adversely affected.
The most commonly used redirects are 301 and 302.These use HTTP to explain that a page or resource has moved. Both of these are server-side redirects. This implies that the web server is making use of HTTP for directing the browser to a new location of the file. 301 is a permanent redirect while 302 is a temporary one.
Before a page is rendered to a user by the browser, the browser parses the page. During parsing, if it comes across a non-async or blocking external script, the download of the resource will be stopped. Each time this occurs, it gives rise to additional network round trip. This results in delaying the time to first render of the page.
1. Inline JavaScript: Rendering of a page is delayed by external blocking scripts. This is because these scripts force the browser to wait while the JavaScript is fetched adding one or more network roundtrips. Network request latency can be avoided through small external scripts. These facilitate inlining contents directly into the HTML document.
This is explained with the help of the example below:
2. Make JavaScript Asynchronous: JavaScript blocks DOM construction leading to delays in the time to first render. JavaScript can be prevented from blocking the parser by using the HTML async attribute on external scripts.
For example:
<script async src=”my.js”>
3. Defer loading of JavaScript: Performance can be enhanced and resource contention reduced by deferring loading and execution of scripts that are not essential for the initial page render. They can be deferred until after the initial render or other critical parts have loaded.
Browser caching is when the browser “remembers” the resources it has already loaded. When browser caching is done and the visitor goes to another page on your website, the logo, CSS files, etc. are not loaded again. The reason is that the browser has saved them. Therefore, viewing a web page for the first time takes longer than repeated visits.
If you need to leverage browser caching to enhance your loading speed, you can do it in the following manner:
In case you are using Apache as your web server, browser caching can be implemented quickly by adding a few lines of code in a file called .htaccess. You can check with your hosting company to know whether you are running on Apache or not.
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”
Like browser caching, file compression can be implemented by adding a few lines of code in your .htaccess file:
<ifModule mod_deflate.c>
<filesMatch “.(css|js|x?html?)$”>
SetOutputFilter DEFLATE
</filesMatch>
</ifModule>
1. Create a separate version of your main page by using AMP HTML (also known as the AMP version of your main page). Basic code for designing your first AMP HTML page is provided below:
<!doctype html>
<html amp lang=”en”>
<head>
<meta charset=”utf-8″>
<title>The title of your AMP page will go here </title>
<link rel=”canonical” href=”URL of the non AMP version will go here” />
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “NewsArticle”,
“headline”: “Open-source framework for publishing content”,
“datePublished”: “2015-10-07T12:02:41Z”,
“image”:
[
“logo.jpg”
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
</head>
<body>
<h1>Welcome to AMP</h1>
</body>
</html>
2. In order to insert images, use the following code:
<amp-img src=”welcome.jpg” alt=”Welcome” height=”400″ width=”800″></amp-img>
3. Modify the presentation and layout of the page by using common CSS properties. An example styling code is provided below:
<style amp-custom> /* any custom style goes here */ body { background-color: white; } amp-img { background-color: gray; border: 1px solid black; }</style>
4. Preview, validate and publish the AMP page.
5. Add the amphtmltag in the non-AMP version of the page in order to help search engine bots to identify the AMP version of your webpage:
<link rel=”amphtml” href=”AMP version of your webpage goes here” />
Although not exhaustive, these are some useful guidelines that can be followed to enhance the loading speed of a website on a mobile device. Enhance your Google insights mobile responsiveness score to have an edge over your competitors.
Mohit Bhatt
2024-11-20
7 min read
Top law firms are looking for digital solutions that help streamline their operations, increase engagement with their clients,
Read More >Mohit Bhatt
2024-09-19
7 min read
Businesses across all industries are constantly seeking innovative ways to drive sales growth. And the dry cleaning business, while seemingly traditional, is no exception.
Read More >Mohit Bhatt
2024-09-10
7 min read
With an increase in the popularity of smartphones, there’s been a sharp rise in the number of people shopping online.
Read More >Drive more leads, maximize your RoI, and grow your business with digital solutions built specifically for your business.
Sales - (+91) 730 700 1777
Jobs - (+91) 959 201 6444
Sales - provider@webguruz.in
Jobs - careers@webguruz.in
4th Floor, SM Heights, C-205, Phase 8 B, Sector 74 Mohali
11 Rydons Lane, Coulsdon, CR5 1SU, UK
6917 Hovingham Court Centreville va 20121
31 Newmarket Parade, Mickleham, VIC, 3064,Australia