SlideShare a Scribd company logo
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

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
Steve Wortham
 
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
 
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)
Adam Dunford
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ Xero
Craig Walker
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
Ashok Modi
 
Web performance
Web performanceWeb performance
Web performance
Islam AlZatary
 
I Can Haz More Performanz?
I Can Haz More Performanz?I Can Haz More Performanz?
I Can Haz More Performanz?
Andy Melichar
 
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
Matt Bailey
 
Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessWeb Performance: 3 Stages to Success
Web Performance: 3 Stages to Success
Austin Gil
 
DrupalCon Barcelona 2015
DrupalCon Barcelona 2015DrupalCon Barcelona 2015
DrupalCon Barcelona 2015
Daniel Kanchev
 
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
 
Open-source website performance tools
Open-source website performance toolsOpen-source website performance tools
Open-source website performance tools
Artur Cistov
 
Profilling client performance
Profilling client performanceProfilling client performance
Profilling client performance
Sérgio Laranjeira
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning
Timothy Wood
 
Presentation1
Presentation1Presentation1
Presentation1
Rosie brown
 
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
 
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)
Future Insights
 
Heavy Web Optimization: Frontend
Heavy Web Optimization: FrontendHeavy Web Optimization: Frontend
Heavy Web Optimization: Frontend
Võ Duy Tuấn
 
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
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

Front-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPressFront-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPress
drywallbmb
 
WordPress Front End Optimizations
WordPress Front End OptimizationsWordPress Front End Optimizations
WordPress Front End Optimizations
Scott Taylor
 
Front end performance optimization
Front end performance optimizationFront end performance optimization
Front end performance optimization
Stevie T
 
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 (...
Strangeloop
 
Front-End Optimization (FEO)
Front-End Optimization (FEO)Front-End Optimization (FEO)
Front-End Optimization (FEO)
Kim Stefan Lindholm
 
Marrying CDNs with Front-End Optimization
Marrying CDNs with Front-End Optimization Marrying CDNs with Front-End Optimization
Marrying CDNs with Front-End Optimization
Strangeloop
 
Online shopping report-6 month project
Online shopping report-6 month projectOnline shopping report-6 month project
Online shopping report-6 month project
Ginne yoffe
 
Image processing ppt
Image processing pptImage processing ppt
Image processing ppt
Raviteja Chowdary Adusumalli
 

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

Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
clickramanm
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
sacred 8
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
Anup Hariharan Nair
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
Smile I.T is open
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
Siarhei Barysiuk
 
DrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingDrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizing
Ashok Modi
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
Aaron Grogg
 
A little journey into website optimization
A little journey into website optimizationA little journey into website optimization
A little journey into website optimization
Stelian Firez
 
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
Bastian Grimm
 
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
Bastian Grimm
 
Tips for a Faster Website
Tips for a Faster WebsiteTips for a Faster Website
Tips for a Faster Website
Rayed Alrashed
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
Nilesh Bafna
 
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
Bastian Grimm
 
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
 
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
Jonathan Klein
 
Website optimization
Website optimizationWebsite optimization
Website optimization
Mindfire Solutions
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
Haribabu Nandyal Padmanaban
 
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
Bastian Grimm
 
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
Distilled
 

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

Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
Sease
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 

Recently uploaded (20)

Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 

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?