Web Performance Optimization

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

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

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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

PRESENTATION
TITLE
ANALYSIS OF WATERFALL CHART

PRESENTATION
TITLE
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

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
FRONTEND
OPTIMIZATION

PRESENTATION
TITLE
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

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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

PRESENTATION
TITLE
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

PRESENTATION
TITLE
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

PRESENTATION
TITLE
9. Minify JavaScript
Examples of what is removed during file minification includes:
● Whitespace characters
● Comments
● Line breaks
● Block delimiter

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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

PRESENTATION
TITLE
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

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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.

PRESENTATION
TITLE
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

OUR
CONTACT DETAILS
5th Floor, Yamuna Building
Technopark Phase III Campus
Trivandrum, Kerala, India-
695581
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

Web Performance Optimization

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Web Performance Optimization

Similar to Web Performance Optimization (20)

More from Livares Technologies Pvt Ltd

More from Livares Technologies Pvt Ltd (20)

Recently uploaded

Recently uploaded (20)

Web Performance Optimization