SlideShare une entreprise Scribd logo
1  sur  24
Télécharger pour lire hors ligne
Performance Tuning of web pages

By Ritesh M Nayak
Why is speed important?
• Offers a good user
experience
• No broken functionality
• Part of SLAs for many
projects
• Doesn’t make one feel like
they are living in the 90s
Does anyone remember this?
Why is speed important?
Speed is the new SEO
remember the 80/20 rule
10 to 20% of the end user response time is
spent downloading the actual HTML content of
the page, the rest is used to download the
components of a page.
Audit of a popular webpage
Load time: 26 seconds
Page size: 5.2 MB
Requests: 172 HTTP requests
This is horribly wrong
Follow these basic rules if you
want to improve performance
Please download the Yslow plugin for firefox or
use the Chrome’s built in Audit feature
1. Make fewer HTTP requests
Let’s talk a little bit about HTTP 1.1 and browser implementations here

• Combine JS and CSS files
• Use sprites instead of individual images
• Inline images
2. Use a CDN
• Understand what server proximity constraints
are and choose accordingly
• CDNs are inexpensive these days and can
make a great difference to your application
Ex: Rackspace’s CloudFiles, Amazon’s CloudFront
or Akamai
at $10c /GB/Month it is totally worth it
3.Use the Expires header
• Helps restrict unnecessary requests
• Use expires date in the far future
• HTTP 1.1 also supports cache-control , so use
the max-age with a high value
HTTP/1.1 200 OK
Content-Type: application/x-javascript
Last-Modified: Thu, 10 Mar 2011 12:23:32 GTM
Expires: Thu, 10 Mar 2032 18:23:32 GTM

On Apache, look at the mod_expires module for more info
4. GZIP components
•
•
•
•

GET /sample.com/index
HTTP/1.1
HOST: sample.com
Accept-Encoding: gzip,deflate

Helpful in conserving bandwidth
Compress all text responses
Use the vary header if you use proxies
Don’t use ETAGS in the header

On Apache, look at the mod_zip and mod_deflate for more info

50%
5. CSS on top
• Users don’t get to see un-styled content/white
screen
• Drop all inline styles if possible and don’t use
browser specific CSS effects (esp. IE)(not
cached)
• Progressive rendering
Avoid CSS expressions !
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
6. JS at the bottom
• Helps in unblocking parallel downloads
• DOM is mostly accessible unless you are doing
something fancy
• Order them in the way you want them
executed
• Drop inline scripts (not cached)
7. Reduce DNS lookups
• Typically takes 20-120 ms to look up a domain
• As a practice, don’t use more than 4
hostnames
8. Minify Javascript
• Reduced bandwidth significantly
• Use asset mgmt. libraries like assetic(php),
static resources (grails)
• It is also useful to Obfuscate JavaScript
sometimes to protect your code against
attacks
9. Avoid redirects
• Creates a lot of Idle time for the user
• Use only for POSTs, but not for tracking,
rewrite

Look at mod_rewrite best practices when using the module
10. Cache AJAX requests
• Use GET requests for AJAX (uses 1 packet)
• Seem fairly obvious but not done by people
• Especially for auto-complete textboxes or
commonly occurring states like checking for
username availability etc

To override the caching, append current timestamp to the ajax
request as a query parameter
?thetimeis=42392991821
11. Caching caching caching
• Use memcached; can be deployed separately
• Use database level caching via ORMs or other
similar libraries. Consistent queries also help
optimize query tuning
• Cache commonly hit pages (interpreted
languages)
12. flush()
• Use PHPs flush() function to render a partially
complete HTML page, so that the components
can start loading instead of the browser
remaining idle
More info here: http://php.net/manual/en/function.flush.php
13. Pre/post loading components
• Post load components which are out of the
immediate viewport of the user.
Example: scripts not needed at DOM load
• Pre load components rendered as part of a
container refresh
14. Split components on domains
• To maximize parallel downloads, use different
subdomains (stick to 4 hostnames)
• Use a cookieless subdomain/domain for
components
15. Minimize , cut , snip , chop
• Minimize DOM elements. Slows down JS
• Minimize IFrame (block page onload)
• Minimize 3rd party scripts. See if you load
those asynchronously
• Reduce the cookie size (more info here)
• Optimize images, use PNG instead of GIF.
Reduce JPG quality. Tools like jpgtran,
pngcrush, optipng will help, remove exif and
comments
Mobile Browser
• Keep components under 25kb
• Minify HTML in addition to js and css
• Use multipart documents (email)

Contenu connexe

Tendances

Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)
Zhentian Wan
 

Tendances (20)

Node.js to the rescue
Node.js to the rescueNode.js to the rescue
Node.js to the rescue
 
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...
 
Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)
 
My learnings on web performance optimization while building a Progressive Web...
My learnings on web performance optimization while building a Progressive Web...My learnings on web performance optimization while building a Progressive Web...
My learnings on web performance optimization while building a Progressive Web...
 
Progressive Web Apps(PWA)
Progressive Web Apps(PWA)Progressive Web Apps(PWA)
Progressive Web Apps(PWA)
 
Guidance on how to develop a progressive web app using react native!
Guidance on how to develop a progressive web app using react native!Guidance on how to develop a progressive web app using react native!
Guidance on how to develop a progressive web app using react native!
 
Using MAMP for Web Development
Using MAMP for Web DevelopmentUsing MAMP for Web Development
Using MAMP for Web Development
 
Single page application
Single page applicationSingle page application
Single page application
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web Applications
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
 
introduction to js
introduction to jsintroduction to js
introduction to js
 
Real World Progressive Web Apps (Building Flipkart Lite)
Real World Progressive Web Apps (Building Flipkart Lite)Real World Progressive Web Apps (Building Flipkart Lite)
Real World Progressive Web Apps (Building Flipkart Lite)
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
 
Java Restart with WebFX
Java Restart with WebFX Java Restart with WebFX
Java Restart with WebFX
 
Getting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmetaGetting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmeta
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Web Application Development Fundamentals
Web Application Development FundamentalsWeb Application Development Fundamentals
Web Application Development Fundamentals
 
Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)
 
Working in harmony
Working in harmonyWorking in harmony
Working in harmony
 

Similaire à Performance tuning of Websites

Website Performance
Website PerformanceWebsite Performance
Website Performance
Hugo Fonseca
 
High performance website
High performance websiteHigh performance website
High performance website
Chamnap Chhorn
 
How_To_Soup_Up_Your_Farm
How_To_Soup_Up_Your_FarmHow_To_Soup_Up_Your_Farm
How_To_Soup_Up_Your_Farm
Nigel Price
 
Best practices-wordpress-enterprise
Best practices-wordpress-enterpriseBest practices-wordpress-enterprise
Best practices-wordpress-enterprise
Taylor Lovett
 

Similaire à Performance tuning of Websites (20)

High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
 
High performance website
High performance websiteHigh performance website
High performance website
 
Static resource-optimization using webutilities
Static resource-optimization using webutilitiesStatic resource-optimization using webutilities
Static resource-optimization using webutilities
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
 
10 things you can do to speed up your web app today stir trek edition
10 things you can do to speed up your web app today   stir trek edition10 things you can do to speed up your web app today   stir trek edition
10 things you can do to speed up your web app today stir trek edition
 
Optimization of modern web applications
Optimization of modern web applicationsOptimization of modern web applications
Optimization of modern web applications
 
How_To_Soup_Up_Your_Farm
How_To_Soup_Up_Your_FarmHow_To_Soup_Up_Your_Farm
How_To_Soup_Up_Your_Farm
 
Alfresco Tech Talk Live (Episode 70): Customizing Alfresco Share 4.2
Alfresco Tech Talk Live (Episode 70): Customizing Alfresco Share 4.2Alfresco Tech Talk Live (Episode 70): Customizing Alfresco Share 4.2
Alfresco Tech Talk Live (Episode 70): Customizing Alfresco Share 4.2
 
Oracle UCM: Web Site Performance Tuning
Oracle UCM: Web Site Performance TuningOracle UCM: Web Site Performance Tuning
Oracle UCM: Web Site Performance Tuning
 
Best practices-wordpress-enterprise
Best practices-wordpress-enterpriseBest practices-wordpress-enterprise
Best practices-wordpress-enterprise
 
Best Practices for WordPress in Enterprise
Best Practices for WordPress in EnterpriseBest Practices for WordPress in Enterprise
Best Practices for WordPress in Enterprise
 
Configuring Apache Servers for Better Web Perormance
Configuring Apache Servers for Better Web PerormanceConfiguring Apache Servers for Better Web Perormance
Configuring Apache Servers for Better Web Perormance
 
Drupal 7 performance and optimization
Drupal 7 performance and optimizationDrupal 7 performance and optimization
Drupal 7 performance and optimization
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
 
improve website performance
improve website performanceimprove website performance
improve website performance
 
Make Drupal Run Fast - increase page load speed
Make Drupal Run Fast - increase page load speedMake Drupal Run Fast - increase page load speed
Make Drupal Run Fast - increase page load speed
 
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
 
JS digest. Decemebr 2017
JS digest. Decemebr 2017JS digest. Decemebr 2017
JS digest. Decemebr 2017
 

Plus de muHive Technologies

Plus de muHive Technologies (6)

Poor man's Content Marketing - muHive
Poor man's Content Marketing - muHivePoor man's Content Marketing - muHive
Poor man's Content Marketing - muHive
 
SaaS Adoption Zen - muHive
SaaS Adoption Zen - muHiveSaaS Adoption Zen - muHive
SaaS Adoption Zen - muHive
 
Website optimization for SaaS conversions - muHive
Website optimization for SaaS conversions - muHiveWebsite optimization for SaaS conversions - muHive
Website optimization for SaaS conversions - muHive
 
Case study on Travel
Case study on TravelCase study on Travel
Case study on Travel
 
Case study on Telecom
Case study on TelecomCase study on Telecom
Case study on Telecom
 
Case Study on Online Retail
Case Study on Online RetailCase Study on Online Retail
Case Study on Online Retail
 

Dernier

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Dernier (20)

FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

Performance tuning of Websites

  • 1. Performance Tuning of web pages By Ritesh M Nayak
  • 2. Why is speed important? • Offers a good user experience • No broken functionality • Part of SLAs for many projects • Doesn’t make one feel like they are living in the 90s Does anyone remember this?
  • 3. Why is speed important?
  • 4. Speed is the new SEO
  • 5. remember the 80/20 rule 10 to 20% of the end user response time is spent downloading the actual HTML content of the page, the rest is used to download the components of a page.
  • 6. Audit of a popular webpage
  • 7. Load time: 26 seconds Page size: 5.2 MB Requests: 172 HTTP requests This is horribly wrong
  • 8. Follow these basic rules if you want to improve performance Please download the Yslow plugin for firefox or use the Chrome’s built in Audit feature
  • 9. 1. Make fewer HTTP requests Let’s talk a little bit about HTTP 1.1 and browser implementations here • Combine JS and CSS files • Use sprites instead of individual images • Inline images
  • 10. 2. Use a CDN • Understand what server proximity constraints are and choose accordingly • CDNs are inexpensive these days and can make a great difference to your application Ex: Rackspace’s CloudFiles, Amazon’s CloudFront or Akamai at $10c /GB/Month it is totally worth it
  • 11. 3.Use the Expires header • Helps restrict unnecessary requests • Use expires date in the far future • HTTP 1.1 also supports cache-control , so use the max-age with a high value HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Thu, 10 Mar 2011 12:23:32 GTM Expires: Thu, 10 Mar 2032 18:23:32 GTM On Apache, look at the mod_expires module for more info
  • 12. 4. GZIP components • • • • GET /sample.com/index HTTP/1.1 HOST: sample.com Accept-Encoding: gzip,deflate Helpful in conserving bandwidth Compress all text responses Use the vary header if you use proxies Don’t use ETAGS in the header On Apache, look at the mod_zip and mod_deflate for more info 50%
  • 13. 5. CSS on top • Users don’t get to see un-styled content/white screen • Drop all inline styles if possible and don’t use browser specific CSS effects (esp. IE)(not cached) • Progressive rendering Avoid CSS expressions ! background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
  • 14. 6. JS at the bottom • Helps in unblocking parallel downloads • DOM is mostly accessible unless you are doing something fancy • Order them in the way you want them executed • Drop inline scripts (not cached)
  • 15. 7. Reduce DNS lookups • Typically takes 20-120 ms to look up a domain • As a practice, don’t use more than 4 hostnames
  • 16. 8. Minify Javascript • Reduced bandwidth significantly • Use asset mgmt. libraries like assetic(php), static resources (grails) • It is also useful to Obfuscate JavaScript sometimes to protect your code against attacks
  • 17. 9. Avoid redirects • Creates a lot of Idle time for the user • Use only for POSTs, but not for tracking, rewrite Look at mod_rewrite best practices when using the module
  • 18. 10. Cache AJAX requests • Use GET requests for AJAX (uses 1 packet) • Seem fairly obvious but not done by people • Especially for auto-complete textboxes or commonly occurring states like checking for username availability etc To override the caching, append current timestamp to the ajax request as a query parameter ?thetimeis=42392991821
  • 19. 11. Caching caching caching • Use memcached; can be deployed separately • Use database level caching via ORMs or other similar libraries. Consistent queries also help optimize query tuning • Cache commonly hit pages (interpreted languages)
  • 20. 12. flush() • Use PHPs flush() function to render a partially complete HTML page, so that the components can start loading instead of the browser remaining idle More info here: http://php.net/manual/en/function.flush.php
  • 21. 13. Pre/post loading components • Post load components which are out of the immediate viewport of the user. Example: scripts not needed at DOM load • Pre load components rendered as part of a container refresh
  • 22. 14. Split components on domains • To maximize parallel downloads, use different subdomains (stick to 4 hostnames) • Use a cookieless subdomain/domain for components
  • 23. 15. Minimize , cut , snip , chop • Minimize DOM elements. Slows down JS • Minimize IFrame (block page onload) • Minimize 3rd party scripts. See if you load those asynchronously • Reduce the cookie size (more info here) • Optimize images, use PNG instead of GIF. Reduce JPG quality. Tools like jpgtran, pngcrush, optipng will help, remove exif and comments
  • 24. Mobile Browser • Keep components under 25kb • Minify HTML in addition to js and css • Use multipart documents (email)