Faster Homepage Load Time via Image Sprites

Today, I decided to sharpen my front-end web development skills. It is quite some time since I have extra time to re-visit and re-learn basic HTML (now HTML5), CSS (now CSS3) and JavaScript / TypeScript. 

One area that I want to re-learn and increase my skills are webpage / website performance.  

I opened my favorite IDE which is Visual Studio Code and started coding the basic index.html file. The view of HTML file is as below:  

 

Using Safari web browser, I opened Page Source via Develop > Show Page Source menu. It will opened the Web Inspector tool.

In the Network tab of Web Inspector tool, the initial webpage performance as shown below:

The initial load time was 284 ms with 20 web request from the web server. 

Can we improve the loading time to below 200 ms?

After looking deeper and investigating at the Timeline and Network resource activities, I found out that most of the time to finish webpage load are for downloading series of images from the web server. 

Aha !

I quickly rushed to my room and lookup to my bookshelf and found very old book of mine on front-end web performance : Pro HTML5 Performance by Jay Bryant & Mike Jones. On page 25 of the book, the authors suggest to use image sprites to improve webpage load time.

As we can see in image below, my index HTML file contains 15 images (in PNG format) as icon to each segment of the webpage (for example Blockchain, et cetera.) The size for each image is 64 px X 64 px.

Using Image Sprites

Using Google search, I found one free tool on the internet to convert series of images to sprite - Sprite Sheet Generator (found at https://codeshack.io/images-sprite-sheet-generator/).  Using the tool, I just need to select all images from my project directory (which is the imgs directory) and drop those images inside the tool as shown below. Then, I need to download single sprites file and put it into my imgs directory. 

To use the image sprite file (spritesheet.png), I need to edit my CSS code as below:

.AILogo {

background: url("/imgs/spritesheet.png") -64px -0px;

}

.BlockchainLogo {

background: url("/imgs/spritesheet.png") -832px -0px;

}

.cloudComputingLogo {

background: url("/imgs/spritesheet.png") -128px -0px;

}

.CyberSecurityLogo{

background: url("/imgs/spritesheet.png") -192px -0px;

}

.MobileAppLogo {

background: url("/imgs/spritesheet.png") -0px -0px;

}

                                                                                          

Improvement of Load Time

After implementing this one technique alone, we can see the webpage load time is getting faster - from 284 ms to just 127 ms. A saving of 157 ms or 45% performance improvement. 👍

 

Summary

This blog post shows that webpage with many images can be tuned-for-performance to load faster using image sprites method. The recorded initial webpage load page time was 284 ms and the final load page time after using image sprite method is 127 ms - with 45% performance improvement. Another saving area observed are  (i) total bandwidth originating from the web server to web browser reduced and (ii) reduce number of IOPs of the physical web server disk. This is achieved by significantly reducing the number of resource request from 20 initial request to only 7 request after the code modification. Faster website load time obviously will increase the user experience (UX) and indirectly shall increase the website developer reputation. 

[ Book Reviews ] Mastering Machine Learning with Python in Six Steps

Another hands-on machine learning with Python book.

This book have 7 chapters :

1. Chapter 1 - Step 1 - Getting Started in Python
2. Chapter 2 - Step 2 - Introduction to Machine Learning
3. Chapter 3 - Step 3 - Fundamentals of Machine Learning
4. Chapter 4 - Step 4 - Model Diagnosis and Tuning
5. Chapter 5 - Step 5 - Text Mining and Recommender Systems
6. Chapter 6 - Step 6 - Deep and Reinforcement Learning
7. Chapter 7 - Conclusion

[ EVENT ] Amazon Web Services Transformation Day Kuala Lumpur 2018

What ? AWS Transformation Day Kuala Lumpur 2018.
Where ? Sheraton Hotel, Petaling Jaya, Malaysia.
When ? Tuesday Aug 7, 2018.

The event was about transformation of brick-and-mortar type of business to world class cloud-based business. Two tracks were provided, (i) Retire Technical Debt and (ii) Innovation track.

Of course, I'm more interested towards innovation track on how-to using cloud technologies.

Below are a few notes taken during various sessions:

1. AWS Managed Services provides business quick "Landing Zones" to cloud computing.

2. Businesses are encourages to setup in-house Cloud Centre of Excellence (CCOE) that champion about cloud technologies.

3. Solutions must be "well-architected apps."

4. Hitachi Consulting provides end-to-end SAP on cloud services.



5. Cloud Operating Model
 5.1 Operations as code
 5.2 Automate everything

6. New HOT technologies : IoT + Serverless + AI

7. Four Phases of Effort : (i) Prototype (ii) Pilot (iii) Limited Production (iv) Scaled production
- First, work backwards to identify a set of customer needs.
- Select customer needs that can be addressed from Prototype through Limited Production in less than 12 months.

8. Check out about AWS embedded OS -> Amazon FreeRTOS

9. IoT project team members:
9.1 Device Programmer - skill in embedded system programming, IoT device management, batch fleet provisioning, real-time fleet index and search.
9.2 Fleet Manager - skills in cloud programming - scripting (NodeJS or Python)
9.3 Data Analyst - Skills in manipulate Business Analytics tools - IoT Analytics - Jupyter Notebooks - SageMaker
9.4 Security Engineer - skill with AWS IoT Device Defender
9.5 Cloud Developer - Front and back end programming - Serverless technologies - AWS Greengrass 

AWS Serverless + IoT

10. Check out AWS IoT 1-Click

11. Case studies in Machine Learning
- AWS ML Stack
-- ML Services
-- ML Platform
-- ML Framework

12. Amazon Lex to build Robo Advisor

13. Amazon SageMaker

Develop machine learning model via Amazon SageMaker 

14. AWS DeepLens hardware - USD120

15. Using GPGPU on AWS

16. AWS Deep Learning AMI

17. Machine learning takes time and technical debt.

18. [Insights from Data]
- What us valuable to your customer?
-- a. Solves a problem.
-- b. Easy to use.
-- c. Saves resources (time, money and energy).

[Customer Value Over Time]
 {{ TODO insert picture here ...}}
-- Increase conversion
-- Reverse conversion
 -- How easy is UI/UX ?
-- User want personalisation.
-- We provides gamification
-- How to monetisation works
-- User needs new services and new content
-- Exclusivity / reminders / notifications
-- Customer care
-- Recovery

 [AWS Training] 
1. Web site about AWS training is aws.amazon.com/training
2. Training steps:
-- New to AWS
-- Online Labs
-- Take a class
-- Go to AWS Certification (Iverson Sdn Bhd located at Centrepoint Bandar Utama).

AngularJS : Using $http service to get JSON data

No.	Name	Rate
{{ $index + 1 }}	{{x.name}}	{{x.rate}}

• {{ x.name + ', ' + x.rate }}

AngularJS : $interval Service Example

The time is:

{{ theTime }}

The $interval service runs a function every specified millisecond.

AngularJS : $http Service

Data from server :

{{ myServerData }}

The $http service requests a page on the server, and the response is set as the value of the "myServerData" variable.

AngularJS: ServerData

Hello AngularJS programmers ...