SlideShare a Scribd company logo
Web performance
By @islamzatary
Definition of Web
performance:
speed in which web pages are downloaded and
displayed on the user's web browser.
Why Important:
1. Decrease Bounce rate.
2. Increase Page View.
3. Reduce your costs (Bandwidth, storage usage).
4. Its direct effect on revenues(especially for eCommecrce site).
5. Search engines like Google take site speed into account when determining
search rankings.
6. Mobile devices will soon out number desktop traffic.
7. It all comes down to better user experience.
8. Good for SEO.
Webpage Rendering
1. enter the url to the address bar.
2. a request will be sent to the DNS server.
3. DNS will route you to the real IP of the domain name (The DNS layer
can help direct clients to different servers based on geographical
location).
4. a request(with complete Http header) will be sent to the server.
5. nginx/apatche will try to match the url to its configuration and serve as
an static page or get dynamic content (php,asp,db).

Recommended for you

Keep the Web Fast
Keep the Web FastKeep the Web Fast
Keep the Web Fast

With the growth of mobile devices, performance is now more important than ever. But the web is actually getting slower! Fight back by learning how to monitor performance, the critical rendering path and finding where to optimize.

cssperformancejavascript
Squeeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla WebsiteSqueeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla Website

Basic and advanced tips and tricks to optimize your Joomla website in order to achieve maximum performance - a presentation by Tenko Nikolov for JoomlaDay Chicago 2012.

joomlasitegroundoptimization
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...

It requires 50% more concentration when using badly performing website. Make it easier for your users, not harder… A faster website can help your website in many ways. The faster the website, the lower the bounce rate and the higher the conversions. This mean higher sales, ad revenue and ultimately money. Here are 10 ways you can speed up your website: Hosting Provider – Who is hosting your website and how are they hosting it? Utilize Caching – Page Cache, Database Cache, Object Cache, Browser Cache, Reverse Proxy Combine CSS and JS files – Load JS in the footer whenever possible Use a CDN -A Content Delivery Network (CDN) will ‘put a rocket behind your static content’ Reduce and Optimize Images – Use CSS3 whenever and wherever possible, save images for web Use Compression – Save bandwidth and speed up your website Use Sprites – Load JS in the footer whenever possible Monitor Your Website – CPU usage, Physical Memory, Average Load, Disk I/O utilization, Network I/O Optimize your Database Regularly – Optimizing database tables regularly will help improve website performance Mobile and Tablet Optimization – Use CSS3 Media Queries, JS and service-side technology to speed up devices

wordpresswebsite optimizationweb design and development
Webpage Rendering #2
6. a html will be sent back to browser with a complete Http response
header.
7. browser will parse the DOM of html using its parser.
8. external resources(JS/CSS/images/flash/videos..) will be requested in
sequence.
9. JS, it will be executed by JS engine and CSS, it will be rendered by
CSS engine and HTML's display will be adjusted based on the CSS.
10.if there's an iframe in the DOM, then a separate same process will be
executed.
11.if response cacheable, response is stored in cache.
Webpage Rendering #3
How do browsers render a
web page(browser actions)
1. The DOM (Document Object Model) is formed.
2. Styles are loaded and parsed (CSSOM ).
3. A rendering tree is created. a set of object to be renderer (webkit =>
renderer, gecko => frame), Render tree reflects the DOM structure
except for invisible elements(head and display none element), Each
text string is represented in the rendering tree as a separate renderer,
so the render tree describes the visual representation of a DOM.
DOM Tree

Recommended for you

UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UX

Good UX has always been one of the key factors for success in the contemporary web development and there fore has led to huge improvements in our industry in the last years. Nowadays the UX of a software product is not responsibility only of the UX Architects / Producers, but to each individual involved in the creation of an app or a website, including the Front-end developers. The talk presents a summarized list of DOs and DON’Ts, which Stoyan and his team believe should be respected by the Front-end developers if they want to build a useable web product, up to and above industry standards. There will be a lot of case studies and actual examples taken from Despark’s experience in the field.

web developmentuxfrontend
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)

Web performance optimization can be done at three levels - general, server-side, and technology. At the general level, techniques include minimizing HTTP requests, optimizing images, minifying files, avoiding redirects and empty sources. Server-side optimizations involve techniques like content delivery networks, cookie-free domains, caching, and gzip compression. At the technology level for dynamic sites like Joomla, optimizations include flushing buffers early and optimizing database queries. Performance can be measured using various online tools.

performance optimizationincrease website speed
Website speed optimization techniques
Website speed optimization techniquesWebsite speed optimization techniques
Website speed optimization techniques

Agile is taking over as the proffered methodology for development. Here are the key advantages of Agile software development.

benefits of agile software developmentagile vs waterfalladvantages of agile software development
How do browsers render a
web page(browser actions)
Elements Affect on Web
Performance
1.HTML.
2.CSS.
3.JS.
4.Images.
5.Network.
Web Performance Rules
1.Yahoo Rules.
https://developer.yahoo.com/performance/rules.
2.Google Rules.
https://developers.google.com/speed/docs/insights/rules
Web Performance Tools
1.Extensions:
a. ySlow (Firefox).
b. PageSpeed (Firefox).
c. Firebug (Firefox).
d. HTTPWatch (Firefox & IE).
e. Developer tool (Chrome)
2.WebSite:
a. PageSpeed
b. Webpage Test

Recommended for you

Javascript & Jquery
Javascript & JqueryJavascript & Jquery
Javascript & Jquery

JavaScript is a client-side scripting language that allows for more web functionality on the user's machine, improving server performance and page load times. jQuery is a popular JavaScript library that simplifies tasks like HTML document manipulation, event handling, and Ajax calls. To use jQuery, include the jQuery script in an HTML file and use jQuery syntax with $ selectors to target elements and perform actions on them. Callbacks allow functions to execute asynchronously after their parent functions complete.

Speed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress HorsepowerSpeed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress Horsepower

My improved presentation on how to speed up Wordpress and optimize it's performance. Also covers why we still need to care about page load time.

wordpresspage timeloading
Speed up Your Joomla Site for Ultimate Performance
Speed up Your Joomla Site for Ultimate PerformanceSpeed up Your Joomla Site for Ultimate Performance
Speed up Your Joomla Site for Ultimate Performance

This document provides tips for optimizing a Joomla site for speed. It recommends keeping Joomla updated, choosing extensions wisely, simplifying templates, enabling compression, caching plugins and .htaccess rules. Specific extensions like JCH Optimize are suggested for combining and minifying CSS/JS and images. Server-level optimizations include using a CDN, opcode caching, moving PHP to RAM, and reverse proxy caching. Testing speed with tools like Google PageSpeed Insights is advised. Application optimizations alone can improve page load times from over 5 seconds to 3 seconds, while full server optimizations achieve over 1 second load times.

joomlaoptimizationperformance
Case Study
1. http://www.whatisblik.com/
2.http://www.craigslist.org
Research
1 second delay in page load time equals 11% fewer
page views, a 16% decrease in customer
Satisfaction and 7% loss in conversions.
References
● http://blog.agilitycms.com/content-managers/what-s-more-important-page-
views-or-unique-visitors
● http://www.brickmarketing.com/define-conversion-rate.htm
● https://www.sitepoint.com/complete-guide-reducing-page-weight/
● http://www.dtelepathy.com/blog/inspiration/14-beautiful-content-heavy-
websites-for-inspiration
● http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
● http://yslow.org/user-guide/
● http://www.slideshare.net/sthair/web-performance-101-ldn-webperf-steve-
thair
The End
By @islamzatary

Recommended for you

Front End Website Optimization
Front End Website OptimizationFront End Website Optimization
Front End Website Optimization

Yahoo has developed the de facto standard for building fast front-ends for websites. The bad news: you have to follow 34 rules to get there. The good news: I'll take a subset of those rules, explain them, and show how you can implement those rules in an automated fashion to minimize impact on developers and designers for your high-traffic website.

yslowphpoptimization
Website speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmastersWebsite speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmasters

A technical guide on website speed optimization for webmasters. A complete goto guide for every publisher.

wordpress speed optimizationtechnologyinternet
Front-End Performance Optimizing
Front-End Performance OptimizingFront-End Performance Optimizing
Front-End Performance Optimizing

Front-end performance optimizing involves optimizing a website's HTML, CSS, JavaScript, and image files to achieve the fastest possible loading speed. This includes minimizing HTTP requests by combining files, compressing files, optimizing code by removing unused code and errors, leveraging browser caching, and parallelizing downloads across domains. The document outlines nine techniques for front-end optimization, such as optimizing file sizes, reducing download size through compression and caching, and minimizing HTTP requests through file combining and CSS sprites.

front-endwebsitesoptimizing

More Related Content

What's hot

Front end optimization
Front end optimizationFront end optimization
Front end optimization
Abhishek Anand
 
A holistic approach to web performance
A holistic approach to web performanceA holistic approach to web performance
A holistic approach to web performance
Austin Gil
 
How webpage loading takes place?
How webpage loading takes place?How webpage loading takes place?
How webpage loading takes place?
Abhishek Mitra
 
Keep the Web Fast
Keep the Web FastKeep the Web Fast
Keep the Web Fast
Chris Fetherston
 
Squeeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla WebsiteSqueeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla Website
SiteGround.com
 
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Devin Walker
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UX
Stoian Dipchikov
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
clickramanm
 
Website speed optimization techniques
Website speed optimization techniquesWebsite speed optimization techniques
Website speed optimization techniques
ValueCoders
 
Javascript & Jquery
Javascript & JqueryJavascript & Jquery
Javascript & Jquery
Gurpreet singh
��
Speed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress HorsepowerSpeed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress Horsepower
Ross Johnson
 
Speed up Your Joomla Site for Ultimate Performance
Speed up Your Joomla Site for Ultimate PerformanceSpeed up Your Joomla Site for Ultimate Performance
Speed up Your Joomla Site for Ultimate Performance
JoomlaDay Australia
 
Front End Website Optimization
Front End Website OptimizationFront End Website Optimization
Front End Website Optimization
Gerard Sychay
 
Website speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmastersWebsite speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmasters
Aditya Singh
 
Front-End Performance Optimizing
Front-End Performance OptimizingFront-End Performance Optimizing
Front-End Performance Optimizing
Michael Pehl
 
WordPress SEO Site Optimization Strategies & Techniques
WordPress SEO Site Optimization Strategies & TechniquesWordPress SEO Site Optimization Strategies & Techniques
WordPress SEO Site Optimization Strategies & Techniques
Jeff Kemp
 
Web performance optimization (WPO)
Web performance optimization (WPO)Web performance optimization (WPO)
Web performance optimization (WPO)
Mariusz Kaczmarek
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
Chris Love
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend
tkramar
 
How We Localize & Mobilize WP Sites - Pubcon 2013
How We Localize & Mobilize WP Sites - Pubcon 2013How We Localize & Mobilize WP Sites - Pubcon 2013
How We Localize & Mobilize WP Sites - Pubcon 2013
Search Commander, Inc.
 

What's hot (20)

Front end optimization
Front end optimizationFront end optimization
Front end optimization
 
A holistic approach to web performance
A holistic approach to web performanceA holistic approach to web performance
A holistic approach to web performance
 
How webpage loading takes place?
How webpage loading takes place?How webpage loading takes place?
How webpage loading takes place?
 
Keep the Web Fast
Keep the Web FastKeep the Web Fast
Keep the Web Fast
 
Squeeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla WebsiteSqueeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla Website
 
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UX
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
 
Website speed optimization techniques
Website speed optimization techniquesWebsite speed optimization techniques
Website speed optimization techniques
 
Javascript & Jquery
Javascript & JqueryJavascript & Jquery
Javascript & Jquery
 
Speed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress HorsepowerSpeed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress Horsepower
 
Speed up Your Joomla Site for Ultimate Performance
Speed up Your Joomla Site for Ultimate PerformanceSpeed up Your Joomla Site for Ultimate Performance
Speed up Your Joomla Site for Ultimate Performance
 
Front End Website Optimization
Front End Website OptimizationFront End Website Optimization
Front End Website Optimization
 
Website speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmastersWebsite speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmasters
 
Front-End Performance Optimizing
Front-End Performance OptimizingFront-End Performance Optimizing
Front-End Performance Optimizing
 
WordPress SEO Site Optimization Strategies & Techniques
WordPress SEO Site Optimization Strategies & TechniquesWordPress SEO Site Optimization Strategies & Techniques
WordPress SEO Site Optimization Strategies & Techniques
 
Web performance optimization (WPO)
Web performance optimization (WPO)Web performance optimization (WPO)
Web performance optimization (WPO)
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend
 
How We Localize & Mobilize WP Sites - Pubcon 2013
How We Localize & Mobilize WP Sites - Pubcon 2013How We Localize & Mobilize WP Sites - Pubcon 2013
How We Localize & Mobilize WP Sites - Pubcon 2013
 

Viewers also liked

Dr. Alaa Abdellatif
Dr. Alaa AbdellatifDr. Alaa Abdellatif
Dr. Alaa Abdellatif
Alaa Abdel Latif
 
Заседание ресурсного центра
Заседание ресурсного центраЗаседание ресурсного центра
Заседание ресурсного центра
arzmary
 
Digipak - Green-Eyed Monster - The 1984
Digipak - Green-Eyed Monster - The 1984Digipak - Green-Eyed Monster - The 1984
Digipak - Green-Eyed Monster - The 1984
JLever1
 
Corrosión
Corrosión Corrosión
Corrosión
Yoelvis Sanchez
 
Early Implementers Workshop 23rd March 2016
Early Implementers Workshop 23rd March 2016Early Implementers Workshop 23rd March 2016
Early Implementers Workshop 23rd March 2016
NHS Improving Quality
 
Evaluation Question 3
Evaluation Question 3Evaluation Question 3
Evaluation Question 3
JLever1
 
Mgmt508 SWEG final project
Mgmt508 SWEG final projectMgmt508 SWEG final project
Mgmt508 SWEG final project
Rehab Wahsh
 
Moodle in the Age of the MOOC: The DCU Open Academy Initiative
Moodle in the Age of the MOOC: The DCU Open Academy InitiativeMoodle in the Age of the MOOC: The DCU Open Academy Initiative
Moodle in the Age of the MOOC: The DCU Open Academy Initiative
Mark Brown
 
Cambios de estados físicos de la materia
Cambios de estados físicos de la materiaCambios de estados físicos de la materia
Cambios de estados físicos de la materia
GIE VRN
 
Biologija - Biljke
Biologija -  BiljkeBiologija -  Biljke
Biologija - Biljke
Darko Rakić
 
Zivotne zajednice tekucih voda
Zivotne zajednice tekucih vodaZivotne zajednice tekucih voda
Zivotne zajednice tekucih voda
Veca Vlastic
 
букет
букетбукет
букет
arzmary
 

Viewers also liked (13)

Dr. Alaa Abdellatif
Dr. Alaa AbdellatifDr. Alaa Abdellatif
Dr. Alaa Abdellatif
 
Заседание ресурсного центра
Заседание ресурсного центраЗаседание ресурсного центра
Заседание ресурсного центра
 
Digipak - Green-Eyed Monster - The 1984
Digipak - Green-Eyed Monster - The 1984Digipak - Green-Eyed Monster - The 1984
Digipak - Green-Eyed Monster - The 1984
 
Corrosión
Corrosión Corrosión
Corrosión
 
Early Implementers Workshop 23rd March 2016
Early Implementers Workshop 23rd March 2016Early Implementers Workshop 23rd March 2016
Early Implementers Workshop 23rd March 2016
 
Kraplinka
KraplinkaKraplinka
Kraplinka
 
Evaluation Question 3
Evaluation Question 3Evaluation Question 3
Evaluation Question 3
 
Mgmt508 SWEG final project
Mgmt508 SWEG final projectMgmt508 SWEG final project
Mgmt508 SWEG final project
 
Moodle in the Age of the MOOC: The DCU Open Academy Initiative
Moodle in the Age of the MOOC: The DCU Open Academy InitiativeMoodle in the Age of the MOOC: The DCU Open Academy Initiative
Moodle in the Age of the MOOC: The DCU Open Academy Initiative
 
Cambios de estados físicos de la materia
Cambios de estados físicos de la materiaCambios de estados físicos de la materia
Cambios de estados físicos de la materia
 
Biologija - Biljke
Biologija -  BiljkeBiologija -  Biljke
Biologija - Biljke
 
Zivotne zajednice tekucih voda
Zivotne zajednice tekucih vodaZivotne zajednice tekucih voda
Zivotne zajednice tekucih voda
 
букет
букетбукет
букет
 

Similar to Web performance

How Browsers Work -By Tali Garsiel and Paul Irish
How Browsers Work -By Tali Garsiel and Paul IrishHow Browsers Work -By Tali Garsiel and Paul Irish
How Browsers Work -By Tali Garsiel and Paul Irish
Nagamurali Reddy
 
How browsers work landscape
How browsers work landscapeHow browsers work landscape
How browsers work landscape
anandkishore
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
Albino Tonnina
 
Lecture 1 (2)
Lecture 1 (2)Lecture 1 (2)
Lecture 1 (2)
erick chuwa
 
Web browser - How web browsers work?
Web browser - How web browsers work?Web browser - How web browsers work?
Web browser - How web browsers work?
Arun Kumar
 
How web works and browser works ? (behind the scenes)
How web works and browser works ? (behind the scenes)How web works and browser works ? (behind the scenes)
How web works and browser works ? (behind the scenes)
Vibhor Grover
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
Anup Hariharan Nair
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
Nilesh Bafna
 
Top 15-asp-dot-net-interview-questions-and-answers
Top 15-asp-dot-net-interview-questions-and-answersTop 15-asp-dot-net-interview-questions-and-answers
Top 15-asp-dot-net-interview-questions-and-answers
sonia merchant
 
Top 15 asp dot net interview questions and answers
Top 15 asp dot net interview questions and answersTop 15 asp dot net interview questions and answers
Top 15 asp dot net interview questions and answers
Pooja Gaikwad
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
sacred 8
 
Rendering engine
Rendering engineRendering engine
Rendering engine
Dharita Chokshi
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering Path
Raphael Amorim
 
Html5
Html5Html5
Html5
mikusuraj
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
Mayur Mudgal
 
single page application
single page applicationsingle page application
single page application
Ravindra K
 
IBM Connect 2016 - Break out of the Box
IBM Connect 2016 - Break out of the BoxIBM Connect 2016 - Break out of the Box
IBM Connect 2016 - Break out of the Box
Karl-Henry Martinsson
 
Critical rendering path presentation
Critical rendering path presentationCritical rendering path presentation
Critical rendering path presentation
KavithaVikas
 
Pablo Villalba -
Pablo Villalba - Pablo Villalba -
Pablo Villalba -
.toster
 
Web performance
Web performanceWeb performance
Web performance
Samir Das
 

Similar to Web performance (20)

How Browsers Work -By Tali Garsiel and Paul Irish
How Browsers Work -By Tali Garsiel and Paul IrishHow Browsers Work -By Tali Garsiel and Paul Irish
How Browsers Work -By Tali Garsiel and Paul Irish
 
How browsers work landscape
How browsers work landscapeHow browsers work landscape
How browsers work landscape
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
 
Lecture 1 (2)
Lecture 1 (2)Lecture 1 (2)
Lecture 1 (2)
 
Web browser - How web browsers work?
Web browser - How web browsers work?Web browser - How web browsers work?
Web browser - How web browsers work?
 
How web works and browser works ? (behind the scenes)
How web works and browser works ? (behind the scenes)How web works and browser works ? (behind the scenes)
How web works and browser works ? (behind the scenes)
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
Top 15-asp-dot-net-interview-questions-and-answers
Top 15-asp-dot-net-interview-questions-and-answersTop 15-asp-dot-net-interview-questions-and-answers
Top 15-asp-dot-net-interview-questions-and-answers
 
Top 15 asp dot net interview questions and answers
Top 15 asp dot net interview questions and answersTop 15 asp dot net interview questions and answers
Top 15 asp dot net interview questions and answers
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
 
Rendering engine
Rendering engineRendering engine
Rendering engine
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering Path
 
Html5
Html5Html5
Html5
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
single page application
single page applicationsingle page application
single page application
 
IBM Connect 2016 - Break out of the Box
IBM Connect 2016 - Break out of the BoxIBM Connect 2016 - Break out of the Box
IBM Connect 2016 - Break out of the Box
 
Critical rendering path presentation
Critical rendering path presentationCritical rendering path presentation
Critical rendering path presentation
 
Pablo Villalba -
Pablo Villalba - Pablo Villalba -
Pablo Villalba -
 
Web performance
Web performanceWeb performance
Web performance
 

More from Islam AlZatary

Intro to Puppeteer
Intro to PuppeteerIntro to Puppeteer
Intro to Puppeteer
Islam AlZatary
 
Angular js 1.x - Main Concepts presented in FronteersJo Meetup
Angular js 1.x - Main Concepts presented in FronteersJo MeetupAngular js 1.x - Main Concepts presented in FronteersJo Meetup
Angular js 1.x - Main Concepts presented in FronteersJo Meetup
Islam AlZatary
 
HTML, CSS, JS & Jquery Introduction
HTML, CSS, JS & Jquery IntroductionHTML, CSS, JS & Jquery Introduction
HTML, CSS, JS & Jquery Introduction
Islam AlZatary
 
Email Template For All Devices
Email Template For All DevicesEmail Template For All Devices
Email Template For All Devices
Islam AlZatary
 
Jquery mobile book review
Jquery mobile book reviewJquery mobile book review
Jquery mobile book review
Islam AlZatary
 
How successful people think
How successful people thinkHow successful people think
How successful people think
Islam AlZatary
 
Database storage engine
Database storage engineDatabase storage engine
Database storage engine
Islam AlZatary
 

More from Islam AlZatary (7)

Intro to Puppeteer
Intro to PuppeteerIntro to Puppeteer
Intro to Puppeteer
 
Angular js 1.x - Main Concepts presented in FronteersJo Meetup
Angular js 1.x - Main Concepts presented in FronteersJo MeetupAngular js 1.x - Main Concepts presented in FronteersJo Meetup
Angular js 1.x - Main Concepts presented in FronteersJo Meetup
 
HTML, CSS, JS & Jquery Introduction
HTML, CSS, JS & Jquery IntroductionHTML, CSS, JS & Jquery Introduction
HTML, CSS, JS & Jquery Introduction
 
Email Template For All Devices
Email Template For All DevicesEmail Template For All Devices
Email Template For All Devices
 
Jquery mobile book review
Jquery mobile book reviewJquery mobile book review
Jquery mobile book review
 
How successful people think
How successful people thinkHow successful people think
How successful people think
 
Database storage engine
Database storage engineDatabase storage engine
Database storage engine
 

Recently uploaded

WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 

Recently uploaded (20)

WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 

Web performance

  • 2. Definition of Web performance: speed in which web pages are downloaded and displayed on the user's web browser.
  • 3. Why Important: 1. Decrease Bounce rate. 2. Increase Page View. 3. Reduce your costs (Bandwidth, storage usage). 4. Its direct effect on revenues(especially for eCommecrce site). 5. Search engines like Google take site speed into account when determining search rankings. 6. Mobile devices will soon out number desktop traffic. 7. It all comes down to better user experience. 8. Good for SEO.
  • 4. Webpage Rendering 1. enter the url to the address bar. 2. a request will be sent to the DNS server. 3. DNS will route you to the real IP of the domain name (The DNS layer can help direct clients to different servers based on geographical location). 4. a request(with complete Http header) will be sent to the server. 5. nginx/apatche will try to match the url to its configuration and serve as an static page or get dynamic content (php,asp,db).
  • 5. Webpage Rendering #2 6. a html will be sent back to browser with a complete Http response header. 7. browser will parse the DOM of html using its parser. 8. external resources(JS/CSS/images/flash/videos..) will be requested in sequence. 9. JS, it will be executed by JS engine and CSS, it will be rendered by CSS engine and HTML's display will be adjusted based on the CSS. 10.if there's an iframe in the DOM, then a separate same process will be executed. 11.if response cacheable, response is stored in cache.
  • 7. How do browsers render a web page(browser actions) 1. The DOM (Document Object Model) is formed. 2. Styles are loaded and parsed (CSSOM ). 3. A rendering tree is created. a set of object to be renderer (webkit => renderer, gecko => frame), Render tree reflects the DOM structure except for invisible elements(head and display none element), Each text string is represented in the rendering tree as a separate renderer, so the render tree describes the visual representation of a DOM.
  • 9. How do browsers render a web page(browser actions)
  • 10. Elements Affect on Web Performance 1.HTML. 2.CSS. 3.JS. 4.Images. 5.Network.
  • 11. Web Performance Rules 1.Yahoo Rules. https://developer.yahoo.com/performance/rules. 2.Google Rules. https://developers.google.com/speed/docs/insights/rules
  • 12. Web Performance Tools 1.Extensions: a. ySlow (Firefox). b. PageSpeed (Firefox). c. Firebug (Firefox). d. HTTPWatch (Firefox & IE). e. Developer tool (Chrome) 2.WebSite: a. PageSpeed b. Webpage Test
  • 14. Research 1 second delay in page load time equals 11% fewer page views, a 16% decrease in customer Satisfaction and 7% loss in conversions.
  • 15. References ● http://blog.agilitycms.com/content-managers/what-s-more-important-page- views-or-unique-visitors ● http://www.brickmarketing.com/define-conversion-rate.htm ● https://www.sitepoint.com/complete-guide-reducing-page-weight/ ● http://www.dtelepathy.com/blog/inspiration/14-beautiful-content-heavy- websites-for-inspiration ● http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ ● http://yslow.org/user-guide/ ● http://www.slideshare.net/sthair/web-performance-101-ldn-webperf-steve- thair

Editor's Notes

  1. ⇒ definition
  2. ⇒ why important
  3. ⇒ Request/Response
  4. ⇒ Browser render
  5. ⇒ DOM
  6. ⇒ render
  7. ⇒ Elements
  8. ⇒ Rules
  9. ⇒ tools
  10. ⇒ Case study
  11. ⇒ research
  12. ⇒ references