SlideShare a Scribd company logo
1 of 20
Front end optimization




                              -Abhishek Anand
                                   Web Engineering,

                         Digital Centre of Excellence,

                                   HCL Technologies
Why should we optimize frontend?


 80% of the end-user response time is spent on the front-end.

 Frontend optimization can cut off 25% to 50% of the page load time.

 Page load times are important. Amazon insiders estimate that every 100 ms increase in
  latency costs Amazon roughly %1 of profit.

 Visitors hate slow sites, so don't make them wait.
Tools


 Yslow

 Google page speed

 Firebug
When to start frontend optimization?


 Right from the start of a project

 Image optimization and creating sprites for image.
Image optimization


 Progressive JPEG for large images with multiple colors, for anything with complex
  gradients (e.g., a photo).

 PNG if you need transparency, for small and simple image (e.g., icons)

 Don't Scale Images in HTML
Minimize HTTP Requests


 Combine CSS & JS into as few files as possible.
     /admin/settings/performance -“Optimize CSS files” and “Optimize JS files” from performance
      page:

 Create sprite images for background Images.
        use the CSS background-image and background-position properties to display the desired
         image segment.
Minimize HTTP Requests


 Inline images use the data: URL scheme to embed the image data in the actual page

 http://drupal.org/project/css_emimage

 Avoid Redirects

 Use GET for AJAX Requests
Reduce Payload size


 Minify JavaScript and CSS

 Minifying HTML is useless!

 Remove Duplicate Scripts

 Make Ajax Cacheable

 Flush the Buffer Early. (Not very useful in drupal)

 Reduce the Number of DOM Elements
Progressive Page Loading
 Move <?php print $scripts; ?> to the bottom, of the template file. right above: <?php print
  $closure; ?>.




If a module is printing its own JS in the
 head: find “drupal_add_js” in that module
 directory and change it’s scope to “footer”.

Do not use inline script.This breaks some
 JavaScripts!
CSS Cleanup


 you can strip it out by finding/adding this function in your themes template.php file:
  phptemplate_preprocess_page

 Use Google page speed to find unused CSS files
Split Components Across Domains


 Use CDN

 http://drupal.org/project/cdn

 Most browsers only download two resources from one domain at a time (only one at a
  time for JS).

 Spreading static resources (like images, CSS, and JS) across couple of sub-domains will
  allow browsers to download things, 2 at a time, from each domain simultaneously.
Setting up cookie domain


 A domain that sets a cookie is considered a “cookie enabled domain” by whatever
  requests it.

 Disable cookies on static domains.

 In settings.php uncomment this line and put your domain in like this:
  $cookie_domain = ‘example.com';
Expires Header


           LoadModule expires_module modules/mod_expires.so




          Gzip Components
         LoadModule expires_module
          modules/mod_expires.so

         Configure E-tags
          FileETag MTime Size
Avoid CSS Expressions


 CSS expressions are a powerful (but dangerous) way to set CSS properties dynamically

 background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
Reduce DNS Lookups


 DNS has a cost. It typically takes 20-120 milliseconds for DNS to lookup the IP address
  for a given hostname
No 404s


 HTTP requests are expensive so making an HTTP request and getting a useless
  response (i.e. 404 Not Found) is totally unnecessary and will slow down the user
  experience without any benefit.

 Avoid Empty Image src
Avoid Filters


 The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent
  true color PNGs in IE versions < 7. The problem with this filter is that it blocks rendering
  and freezes the browser while the image is being downloaded. It also increases memory
  consumption and is applied per element, not per image, so the problem is multiplied
Post-load Components



 Splitting JavaScript before and after the onload event.

 Fetching contents in second scroll by Ajax.

 http://www.infinite-scroll.com/
Preload Components



 Unconditional preload - as soon as onload fires, you go ahead and fetch some extra
  components.

 Conditional preload - based on a user action you make a guess where the user is headed
  next and preload accordingly.

 Anticipated preload - preload in advance before launching a redesign.
Thank You!
  Thank You!
Questions?
  Questions?
Comments?
  Comments?

More Related Content

What's hot

HTML5 CSS3 The Future of Web Technologies
HTML5 CSS3 The Future of Web TechnologiesHTML5 CSS3 The Future of Web Technologies
HTML5 CSS3 The Future of Web Technologies
hoctudau
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
Ashok Modi
 
Odoo - Open Source CMS: A performance comparision
Odoo - Open Source CMS: A performance comparisionOdoo - Open Source CMS: A performance comparision
Odoo - Open Source CMS: A performance comparision
Odoo
 
How to integrate your design in Odoo v8 CMS
How to integrate your design in Odoo v8 CMSHow to integrate your design in Odoo v8 CMS
How to integrate your design in Odoo v8 CMS
Odoo
 
How to Speed Up Your Joomla! Site
How to Speed Up Your Joomla! SiteHow to Speed Up Your Joomla! Site
How to Speed Up Your Joomla! Site
Daniel Kanchev
 

What's hot (20)

Front-End Web Performance Optimization by BucketSoft
Front-End Web Performance Optimization by BucketSoftFront-End Web Performance Optimization by BucketSoft
Front-End Web Performance Optimization by BucketSoft
 
HTML5 CSS3 The Future of Web Technologies
HTML5 CSS3 The Future of Web TechnologiesHTML5 CSS3 The Future of Web Technologies
HTML5 CSS3 The Future of Web Technologies
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ Xero
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
 
Web performance
Web performanceWeb performance
Web performance
 
I Can Haz More Performanz?
I Can Haz More Performanz?I Can Haz More Performanz?
I Can Haz More Performanz?
 
How i acheived a pretty good google page speed insights score
How i acheived a pretty good google page speed insights scoreHow i acheived a pretty good google page speed insights score
How i acheived a pretty good google page speed insights score
 
Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessWeb Performance: 3 Stages to Success
Web Performance: 3 Stages to Success
 
DrupalCon Barcelona 2015
DrupalCon Barcelona 2015DrupalCon Barcelona 2015
DrupalCon Barcelona 2015
 
Odoo - Open Source CMS: A performance comparision
Odoo - Open Source CMS: A performance comparisionOdoo - Open Source CMS: A performance comparision
Odoo - Open Source CMS: A performance comparision
 
How to integrate your design in Odoo v8 CMS
How to integrate your design in Odoo v8 CMSHow to integrate your design in Odoo v8 CMS
How to integrate your design in Odoo v8 CMS
 
Open-source website performance tools
Open-source website performance toolsOpen-source website performance tools
Open-source website performance tools
 
Profilling client performance
Profilling client performanceProfilling client performance
Profilling client performance
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning
 
Presentation1
Presentation1Presentation1
Presentation1
 
How to Speed Up Your Joomla! Site
How to Speed Up Your Joomla! SiteHow to Speed Up Your Joomla! Site
How to Speed Up Your Joomla! Site
 
Asset Redux - Front end performance on Rails (Phil Nash)
Asset Redux - Front end performance on Rails (Phil Nash)Asset Redux - Front end performance on Rails (Phil Nash)
Asset Redux - Front end performance on Rails (Phil Nash)
 
Heavy Web Optimization: Frontend
Heavy Web Optimization: FrontendHeavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
 
Hidden Secrets For A Hack-Proof Joomla! Site
Hidden Secrets For A Hack-Proof Joomla! SiteHidden Secrets For A Hack-Proof Joomla! Site
Hidden Secrets For A Hack-Proof Joomla! Site
 

Viewers also liked

Viewers also liked (8)

Front-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPressFront-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPress
 
WordPress Front End Optimizations
WordPress Front End OptimizationsWordPress Front End Optimizations
WordPress Front End Optimizations
 
Front end performance optimization
Front end performance optimizationFront end performance optimization
Front end performance optimization
 
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...
Cloud Connect Santa Clara 2013: Web Acceleration and Front-End Optimization (...
 
Front-End Optimization (FEO)
Front-End Optimization (FEO)Front-End Optimization (FEO)
Front-End Optimization (FEO)
 
Marrying CDNs with Front-End Optimization
Marrying CDNs with Front-End Optimization Marrying CDNs with Front-End Optimization
Marrying CDNs with Front-End Optimization
 
Online shopping report-6 month project
Online shopping report-6 month projectOnline shopping report-6 month project
Online shopping report-6 month project
 
Image processing ppt
Image processing pptImage processing ppt
Image processing ppt
 

Similar to Front end optimization

Tips for a Faster Website
Tips for a Faster WebsiteTips for a Faster Website
Tips for a Faster Website
Rayed Alrashed
 
Magento performancenbs
Magento performancenbsMagento performancenbs
Magento performancenbs
varien
 
High Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesHigh Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practices
Stoyan Stefanov
 

Similar to Front end optimization (20)

Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
DrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingDrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizing
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
 
A little journey into website optimization
A little journey into website optimizationA little journey into website optimization
A little journey into website optimization
 
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
 
Tips for a Faster Website
Tips for a Faster WebsiteTips for a Faster Website
Tips for a Faster Website
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
 
Magento performancenbs
Magento performancenbsMagento performancenbs
Magento performancenbs
 
High Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesHigh Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practices
 
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP MeetupWeb Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
 
Website optimization
Website optimizationWebsite optimization
Website optimization
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
 

Recently uploaded

CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
Wonjun Hwang
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
Muhammad Subhan
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Recently uploaded (20)

CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 

Front end optimization

  • 1. Front end optimization -Abhishek Anand Web Engineering, Digital Centre of Excellence, HCL Technologies
  • 2. Why should we optimize frontend?  80% of the end-user response time is spent on the front-end.  Frontend optimization can cut off 25% to 50% of the page load time.  Page load times are important. Amazon insiders estimate that every 100 ms increase in latency costs Amazon roughly %1 of profit.  Visitors hate slow sites, so don't make them wait.
  • 3. Tools  Yslow  Google page speed  Firebug
  • 4. When to start frontend optimization?  Right from the start of a project  Image optimization and creating sprites for image.
  • 5. Image optimization  Progressive JPEG for large images with multiple colors, for anything with complex gradients (e.g., a photo).  PNG if you need transparency, for small and simple image (e.g., icons)  Don't Scale Images in HTML
  • 6. Minimize HTTP Requests  Combine CSS & JS into as few files as possible.  /admin/settings/performance -“Optimize CSS files” and “Optimize JS files” from performance page:  Create sprite images for background Images.  use the CSS background-image and background-position properties to display the desired image segment.
  • 7. Minimize HTTP Requests  Inline images use the data: URL scheme to embed the image data in the actual page  http://drupal.org/project/css_emimage  Avoid Redirects  Use GET for AJAX Requests
  • 8. Reduce Payload size  Minify JavaScript and CSS  Minifying HTML is useless!  Remove Duplicate Scripts  Make Ajax Cacheable  Flush the Buffer Early. (Not very useful in drupal)  Reduce the Number of DOM Elements
  • 9. Progressive Page Loading  Move <?php print $scripts; ?> to the bottom, of the template file. right above: <?php print $closure; ?>. If a module is printing its own JS in the head: find “drupal_add_js” in that module directory and change it’s scope to “footer”. Do not use inline script.This breaks some JavaScripts!
  • 10. CSS Cleanup  you can strip it out by finding/adding this function in your themes template.php file: phptemplate_preprocess_page  Use Google page speed to find unused CSS files
  • 11. Split Components Across Domains  Use CDN  http://drupal.org/project/cdn  Most browsers only download two resources from one domain at a time (only one at a time for JS).  Spreading static resources (like images, CSS, and JS) across couple of sub-domains will allow browsers to download things, 2 at a time, from each domain simultaneously.
  • 12. Setting up cookie domain  A domain that sets a cookie is considered a “cookie enabled domain” by whatever requests it.  Disable cookies on static domains.  In settings.php uncomment this line and put your domain in like this: $cookie_domain = ‘example.com';
  • 13. Expires Header  LoadModule expires_module modules/mod_expires.so Gzip Components  LoadModule expires_module modules/mod_expires.so Configure E-tags  FileETag MTime Size
  • 14. Avoid CSS Expressions  CSS expressions are a powerful (but dangerous) way to set CSS properties dynamically  background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
  • 15. Reduce DNS Lookups  DNS has a cost. It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname
  • 16. No 404s  HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit.  Avoid Empty Image src
  • 17. Avoid Filters  The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7. The problem with this filter is that it blocks rendering and freezes the browser while the image is being downloaded. It also increases memory consumption and is applied per element, not per image, so the problem is multiplied
  • 18. Post-load Components  Splitting JavaScript before and after the onload event.  Fetching contents in second scroll by Ajax.  http://www.infinite-scroll.com/
  • 19. Preload Components  Unconditional preload - as soon as onload fires, you go ahead and fetch some extra components.  Conditional preload - based on a user action you make a guess where the user is headed next and preload accordingly.  Anticipated preload - preload in advance before launching a redesign.
  • 20. Thank You! Thank You! Questions? Questions? Comments? Comments?