In this presentation, I have shown how a webpage is loaded on your viewport after you request for the same. The process is simple. Once you click on the URL, the browser makes a request to the webserver. The request is processed by the webserver. Web server files the response to the request and sends it to the browser. The requested page is sent to the web browser. The browser then loads and renders the page content. The requested page is then shown on the viewport.

1. WEB PAGE
LOADING; HOW
IT HAPPENS?

2. Page loading speed is the average time it takes for the web page to show
on the screen after you have put in a request for the same or clicked on the
link to the URL of the page.
2

3. HOW IT WORKS?
• Once you click on the URL, the browser makes a request to the webserver.
• The request is processed by the webserver.
• Web server files the response to the request and sends it to the browser.
• The requested page is sent to the web browser.
• The browser then loads and renders the page content.
• The requested page is then shown on the viewport
3

4. WEB SERVER

5. HOW IT WORKS?
Now, let’s elaborate on how the browser moves from the source HTML to response it
receives from the webserver, to fetching a web page with images, text, tables, and other
CSS. For knowing it in details, we have to know
• The Parts of a Browser
• The Critical Rendering Path and the browser parts involved in it.
5

6. PARTS OF A BROWSER
6
User Interface– It includes the status bar, the address bar, toolbar which consists of back, refresh, and
home buttons.
Browser Engine-Browser Engine is the core software part of every browser. It serves as a channel or
intermediary between the User Interface and the Rendering Engine. It sends queries to the rendering
engine according to the inputs received from the user
(a) Layout Engine– The layout format of a web page is specifically carried in CSS ( Cascading Style
Sheets). The layout engine interprets the CSS rules of typography, font, section designs, color and
estimates the accurate graphical coordinates for the visual representation of different parts or each
visual element on the web page. After this, the browser picks up the final layout result and paints the
pixel to the screen.
(b) Rendering Engine– It parses the HTML and XML documents, including the CSS stylesheets, and
creates the final layout.

7. PARTS OF A BROWSER
7
(c) Networking-This component manages all the network calls between the browser and the server in
the form of HTTP requests and responses.
(d) Javascript Interpreter– It parses and interprets the Javascript code in the document and forwards
the interpreted version to the rendering engine
(e) Data Storage- A web browser needs to store various types of data which is done with the data
storage component of the browser.

8. USER INTERFACE

9. PARTS OF A BROWSER
9

10. BROWSER
ENGINE
10

11. BROWSER
ENGINE
FUNCTION
11
IMAGE SOURCE:
MOZILLA.ORG

12. 12
RENDERING ENGINE FLOW
SOURCE: HTML5ROCKS.COM

13. 13
THE CRITICAL RENDERING PATH

14. 14
THE TOTAL TIME INVOLVED IN PAGE LOADING
• The time required by the browser to send a request to the
webserver
• The time required by the server to send a response to the
webserver.
• The time required to build DOM, CSSOM, Render tree, Final
layout, Paint the pixels and create the composite view, and
finally showing it on the user viewport.

15. HOW TO IMPROVE PAGE LOADING SPEED
•Remove unusable JavaScript and HTML codes
•Compress Images and optimize image format
•Choose a hosting which provides high web hosting speed
•Remove Render blocking JavaScript resources
•Optimize and distribute Internet traffic routes and volume
•Use CDNs
•Resource utilization of bandwidth
•Follow theThemes, plugins, and server specifications
•Remove dead style sheet CSS rules
•Reduce the size of JS payloads being delivered every time (The time spent
downloading →parsing → compiling → executing JS)
•Set-up performance budgets
•Optimize lazy loading resources

16. For detailed insights into how to improve the page loading speed, visit
my presentation - Improving Page Loading Speed