1. WEB PERFORMANCE
OPTIMIZATION
Presented By
Athira Vinod Livares Technologies Pvt Ltd
Tech &Socio-Cultural
Group

2. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
CONTENTS
● INTRODUCTION
● IMPORTANCE OF WPO
● WATERFALL CHART
● WEB OPTIMIZATION TOOLS
● CAUSES OF POOR PERFORMANCE
● FRONTEND OPTIMIZATION TECHNIQUES
● CONCLUSION

3. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
INTRODUCTION
● Web performance optimization (WPO) is the science of making
websites load faster and more consistently for all visitors.
● Performance optimization starts with the design and
architecture of an application.
● Improvements can be made in server side or client side.

4. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
IMPORTANCE OF WPO
● Improved user experience : A network error fast and responsive
application provides a seamless user experience
● Increased efficiency : Increases the overall cost-effectiveness of the
application.
● Usability : The better the website behaves, the happier end users
will be.
● Caching : Use data to be stored on the client side, reducing the need
to fetch the same data from the server
● Improve the performance of an application by optimizing the code :
Reducing the complexity of the code, removing any unnecessary
code
● Conversion rate : The faster the loading time, higher the conversion
rate will be.

5. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
WATERFALL CHART
● Waterfall charts are diagrams which represent how website
resources are being downloaded, parsed by the engine, in a
timeline that gives us the opportunity to see the sequence and
dependencies between resources.
● It assists in identifying where important events happened
during the loading process.
● They can also let the user easily see how good or bad the
performance of their website is, showing you exactly what is
slowing down your site.
● Different elements that come into play during page’s load time
is URL, Test Location, Browser (Chrome, Firefox, Internet
Explorer, mobile browsers etc…), Connection, Number of Tests,
Repeat View

6. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
ANALYSIS OF WATERFALL CHART

7. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
WEBSITE OPTIMIZATION
TOOLS
● Sematext : Monitor performance
● AppSignal : Easy installation
● Sentry : Reports when application is going too slow
● Site24x7 : Monitors SSL certificates
● Raygun : User friendly
● SpeedCurve : Easily setup
● LogRocket : Record user’s session

8. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
CAUSES OF POOR PERFORMANCE
Performance problems stem from one of three stages in a
website’s journey to the visitor.
● Backend performance : Heavy website traffic overloading
servers, code bugs, inefficient code.
● Middle mile : When packets of information have to travel via
inefficient routes and across great distances to arrive at the
browser
● Frontend performance : Downloading and rendering complex
website content: numerous assets, heavy assets, and third party
assets all result in problems.

9. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
FRONTEND
OPTIMIZATION

10. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
HOW TO IMPROVE PERFORMANCE
1. Make fewer HTTP requests
This technique include using image maps, CSS sprites, inline
images, and combined scripts and stylesheets.
● Image Maps : Associate the hyperlink with an image, for example
in navbars and buttons. It allows you to associate multiple URLs
with a single image.
● CSS Sprites : It allow you to combine images, but they’re much
more flexible.
● Inline Images : Image inlining reduces the number of additional
requests needed for page load by embedding image data directly
into the HTML or Javascript bundle.
● Combined scripts and stylesheets

11. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
2. Use a Content Delivery Network
● The CDN may choose the server with the fewest network hops
or the server with the quickest response time
● CDNs work by deploying PoPs (Points of Presence) across the
globe, which contains 2 things: one it contains a copy of your
website, and in caching servers, it stores all the cached files.
Two, it communicates with users based on their location on the
map.

12. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
3. Add an Expires header
● The expires header is an HTTP header that contains the date and
time until the page is available in the browser cache.

13. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
4. Gzip components
● Gzip is a data compression algorithm capable of compressing
and decompressing files quickly.
● There are 2 ways to compress web content :
1) Dynamic compression compresses files when they’re requested
by the user, and is the default approach used by most web
servers.
2) Static compression compresses each file in advance and delivers
this pre-compressed version when the original file is requested.

14. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
5. Put Stylesheets at the Top
● The problem with putting stylesheets near the bottom of the
document is that it prohibits progressive rendering in many
browsers.
● The browser delays showing any visible components while it
and the user wait for the stylesheet at the bottom.
● To avoid the blank white screen.
● There are two ways you can include a stylesheet in your
document: the LINK tag and the STYLE block.

15. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
6. Put Scripts at the Bottom
● Move your scripts to the bottom of the page right before your
</body> tag.
● Use the async or defer directive to avoid render blocking
● Less the amount of JavaScript files (concatenate your JS files into
one file)
● Minify your JavaScript (remove extra spaces, characters, etc)
● Inline your JavaScript if it is small

16. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
7. Avoid CSS Expressions
● CSS expressions are a method to dynamically set CSS properties,
like background color, page width, font properties
● Conventional CSS rule for setting the background color:
● The background color could be set to alternate every hour using
CSS expressions.
● Use Event handlers

17. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
8. Make JavaScript and CSS External
● Using external JavaScript and CSS files generally produces faster
pages because the files are cached by the browser
● If the JavaScript and CSS are in external files cached by the
browser, the HTML document size is reduced without increasing
the number of HTTP requests.
● High reuse rate

18. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
9. Minify JavaScript
Examples of what is removed during file minification includes:
● Whitespace characters
● Comments
● Line breaks
● Block delimiter

19. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
10. Reduce DNS Lookups
● The Domain Name System (DNS) maps hostnames to IP
addresses, just like phonebooks map people's names to their
phone numbers.
● Reduce the amount of hostnames that are requested in order to
generate your web page.
● Download the files that are being referenced to an external
resource and host them on your origin server or a CDN.

20. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
11. Avoid URL Redirects
● URL redirects are made using HTTP status codes 301 and 302.
They tell the browser to go to another location.
● Inserting a redirect between the user and the final HTML
document delays everything on the page since nothing on the
page can be rendered and no components can be downloaded
until the HTML document arrives.
● So avoid all 301 and 302 redirects if possible.
● Always use Key CDN's HTTP Header Checker tool to see if a 301
is active.
● It occurs when a trailing slash (/) is missing from a URL that
should otherwise have one.

21. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
12. Remove Duplicate Javascript and CSS
● Duplicate JavaScript and CSS files hurt performance by creating
unnecessary HTTP requests and wasted JavaScript execution.
● External script is included twice and is not cacheable, it
generates two HTTP requests during page loading
● Make sure you are only including references to your external
scripts once.

22. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
13. Configure ETags
● Entity tags are a mechanism web servers and the browser use
to determine whether a component in the browser's cache
matches one on the origin server.
● A traditional ETag is comprised of three separate components
which make it an unique identifier for each resource: INode,
MTime, Size
● Etags are meant to be used on a website which only delivers
content from a single server.

23. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
14. Make Ajax Cacheable
● One of AJAX's benefits is it provides instantaneous feedback to
the user because it requests information asynchronously from
the backend web server.
● Using AJAX does not guarantee the user will not wait for the
asynchronous JavaScript and XML responses to return.
● Optimizing AJAX responses is important to improve
performance, and making the responses cacheable is the best
way to optimize them.

24. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
15. Use GET for AJAX requests
● When using the XMLHttpRequest object, the browser
implements POST in two steps:
(1) send the headers
(2) send the data.
● It is better to use GET instead of POST since GET sends the
headers and the data together (unless there are many
cookies).
● Example

25. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
16. Reduce the number of DOM elements
● A complex page means more bytes to download, and it also
means slower DOM access in JavaScript.
● If you are running a CMS might you not have control over this
as much as if you are developing a static site. But remember
widgets, sections, etc. all could create additional DOM
elements

26. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
17. Avoid HTTP 404 (not found) error
● Making an HTTP request and receiving a 404 (Not Found) error
is expensive and degrades the user experience.
● Some sites have helpful 404 messages (for example, "Did you
mean ...?"), which may assist the user, but server resources
are still wasted.
● Fix your 404 errors as they can be quite costly over time.

27. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
18. Reduce cookie size
● HTTP cookies are used for authentication, personalization, and
other purposes. Cookie information is exchanged in the HTTP
headers between web servers and the browser, so keeping the
cookie size small minimizes the impact on response time.
● Eliminate unnecessary cookies
● Be mindful of setting cookies at the appropriate domain level so
other subdomains are not affected
● Set an Expires date appropriately.

28. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
19. Use cookie-free domains
● When the browser requests a static image and sends cookies
with the request, the server ignores the cookies.
● These cookies are unnecessary network traffic.

29. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
20. Do not scale images in HTML
● Web page designers sometimes set image dimensions by using
the width and height attributes of the HTML image element.
Avoid doing this since it can result in images being larger than
needed.

30. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
21. Make favicon small and cacheable
● favicon resides in the server's root, each time the browser
requests this file, the cookies for the server's root are sent.
● Making favicon cacheable avoids frequent requests for it.

31. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
CONCLUSION
● Typical users nowadays can expect a web page to load in less
than 3 seconds. If your pages don’t make it within this
timeframe, you simply lose traffic and therefore revenue.
● Performance is actually about retaining users and improving
conversions, which means optimizing your website’s
performance is a must for any online business.
● You want to make sure you give your users a top-notch
experience, instead of a disruptive and frustrating one.

32. Tech&Socio-Cultural Group
PRESENTATION
TITLE
Livares Technologies Pvt Ltd
REFERENCES
● Optimization tools
https://sematext.com/blog/frontend-performance-monitoring/
● Waterfall chart https://www.dotcom-monitor.com/blog/optimizing-web-
performance-understanding-waterfall-charts/
● Frontend optimization techniques https://krify.co/the-importance-of-
performance-optimization-in-web-and-mobile-app-development/
● Books : High performance websites by O’reilly
● https://www.flowmatters.com/blog/website-performance-optimization-
what-is-it-and-why-should-you-choose-it/
● https://www.keycdn.com/blog/website-performance-optimization

33. OUR
CONTACT DETAILS
Livares Technologies Pvt Ltd
5th Floor, Yamuna Building
Technopark Phase III Campus
Trivandrum, Kerala, India-
695581
Livares Technologies Pvt Ltd
Tech &Socio-Cultural
Group
Our helpline is always open to receive any inquiry
or feedback.Please feel free to contact us
www.livares.com
contact@livares.com
@livaresofficial
www.facebook.com/livaresofficil
+91-471-2710003 | +91-471-
2710004
THANK
YOU