SlideShare a Scribd company logo
open source web development




       open source web development




                                     Page Speed
                                     andy@promethost.com
                                      Twitter: @akucharski
open source web development




         @akucharski          @dev_machev
open source web development




                               About Promet
  • 2003 Founded
  • 2008 focus on Drupal CMS
  • 2009 Mobile development
  • Faces of Promet today:
open source web development
                                                   Awards and Press

                              CMS Expo Spotlight Awards
                              • 2012 Best Drupal CMS App for Commerce
                              • 2012 Best Drupal Mobile CMS App
                              Notable Press Mentions
                              • Wireless Week - Promet iPhone Madison app
                              • Cult of Mac – ipad Dispatch system
                              50+ Drupal sponsorships, speaking
                              sessions and attending
open source web development
                                                               Our Solutions

Promet Solutions Inc.

                      Promet Source
                       - Open source web development
                       - Drupal-based websites, products, and applications


                      Promet Support
                      - Drupal Managed Services
                      - Drupal DevOps consulting


                      Promet Mobile
                      - Enterprise mobile business solutions
                      - Drupal integration with mobile
open source web development




                              http://www.flickr.com/photos/joconnell
What is page speed? And what is
open source web development
                                       this presentation about?



•What’s speed got to do with it? – Why
 faster is better
•What is page load speed?
•Tools used to measure performance of
 your pages and site
•Key Improvements to make Drupal
 "run fast"
open source web development
                                     Why care about page speed?


•Time = Money…
Why care about performance?

•Speed = Money…
•Slower Page load = Less Money

Google Blog: 2011 – ―We encourage you to start looking at your site’s speed—
 not only to improve your ranking in search engines, but also to improve
 everyone’s experience on the Internet. “
open source web development

         HTML DELAY EXPERIMENT
                        GOAL

          Determine impact of server delays
            METHODOLOGY

            Delay before sending HTML page
            Different experiments with different delays
            Small % of traffic
            Monitor negative impact
open source web development
open source web development
open source web development
                                             Lets not get confused




• Performance – How fast does the page load
• Scalability - The ability for a distributed system to easily expand and
  contract its resource pool to accommodate heavier or lighter loads.
• High Availablity
open source web development
                                        Waterfall diagrams

                              • X = Time
                              • Y = Number of objects on page
                              • Y(1) = HTTP Request – rest of
                                objects are elements of the
                                page, images, CSS and js
                                files, etc, etc.




                                • Time to load all elements
open source web development                    Waterfall diagrams




• DNS Lookup – time it takes for browser to find the server
• Initial Connection – three way handshake, hard to control
• Time to First Byte – server wait time
• Content Download – how long it takes to transfer the data from server
  to browser
open source web development
                                     Waterfall diagrams

                              • Back End


                              • Front End




                               • Render Start


                               • Render complete
open source web development    Front End vs. Back End


Front End vs. Back End




http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
open source web development
                                                                              Tools
• Browser Tools:
• Firebug
• Yslow for firebug
   • http://developer.yahoo.com/yslow/
• Page Speed – online/Firefox/Chrome
   • http://code.Google.com/speed/articles/
• Web Page Test
   • http://www.webpagetest.org
• Apache Bench
                                                         http://www.flickr.com/photos/bik
   • http://httpd.apache.org/docs/2.0/programs/ab.html                   e/
• Devel
   • http://drupal.org/project/devel
open source web development   Firebug
open source web development



 Yslow
•Steve Souders, while he
was Chief Performance at
Yahoo! Created YSLOW
and best practices
•Firefox firebug plug in
•Grades your site based on
yahoo best practices
•Scores – higher is better
open source web development



  Page Speed




Steve Souders at Google 
Google Recommendations based on Google best practices
open source web development



Page Speed
Web Page Test
open source web development
                              (www.webpagetest.org)
Web Page Test
open source web development
                              (www.webpagetest.org)
open source web development
                                           Apache Bench




                              • Very simple “It is designed
                                to give you an impression
                                of how your current
                                Apache installation
                                performs. This especially
                                shows you how many
                                requests per second your
                                Apache installation is
                                capable of serving.”
                              • Ab –n # -c # http://[site]/
open source web development
                              Devel
open source web development




                              http://www.flickr.com/people/13809318@N
The Basics – for designers themers
 open source web development                    and content editors

 Avoid bad requests
 Avoid CSS expressions
 Combine images using CSS sprites
 Minimize DNS lookups
 Minimize redirects
 Optimize images
 Remove unused CSS
 Serve scaled images
 Specify image dimensions
 Use efficient CSS selectors
              https://developers.google.com/speed/docs/insights/rules
Key Improvements to make Drupal
open source web development
                                                    “run fast”
• Low hanging fruit – Turn on performance improvements in Drupal
open source web development                     What about views?
• Views Cache and Views Content Cache (Alpha)
open source web development                     What about views?
• Views Cache and Views Content Cache (Alpha)
open source web development   Drupal.org/projects/speedy



• Speedy - Minfy JavaScript
 – contributed module

•Minifying the files removes comments,
 whitespace, and can even transform parts
 of functions in ways to make them smaller.
 For example, a minified drupal.js is 24% the
 size of the original. The minifier used to
 generate these files is UglifyJS. This is the
 same one jQuery uses.        http://upload.wikimedia.org/wikipedia/en/thumb/a/a1/Poster_of_Speedy_Delivery.jpg/220px-
                                                          Poster_of_Speedy_Delivery.jpg
open source web development                  Use a CDN




• CDN brings your content closer to the edge of the
  network, much faster response and download time
• Drupal Modules:
• http://drupal.org/project/simplecdn
• http://drupal.org/project/cdn by
  Wim Leers, needs a cron to run
  a fileconveyor
• Media Mover
open source web development   Serve objects from multiple domains

• Serve objects from multiple domains
• There is trade off between dns look ups and parallel downloads
• Browsers do matter (www.browserscope.com)
Stay vigilant, check performance continuously
open source web development             and watch out for foreign objects
open source web development




                         http://www.flickr.com/photos/vincepal/
Don’t let your traffic get to the DB – it
open source web development
                                                       wants to kill it!




                                    Your Data center



  Browser              CDN            Reverse Proxy   Application        MySQL
                                                      Server

     •Cache              •Cached         •Cached          •APC             •MySQL
                          static          Content         •Memcache         caching
                          content                         •Boost
                                                          •Performance
                                                           Module **
Performance Module Settings and
open source web development
                                               how they work
open source web development
                              Apache tuning for Drupal
                                          Browser


                                             •Cache




•Extend mod_expires setting (make sure its on)
 in drupal .htaccess
•Compress content before sending it
  • Apache deflate_module
  • Solution nginx – gzip module
•.htaccess move to httpd.conf eliminates
 Apache parse and search on every load
open source web development
                               Caching – reverse proxy
                                          Reverse Proxy


                                             •Cached
                                              Content




• Caching - Very high performance gain
• Advanced Step: Squid/Varnish
  (http://drupal.org/node/91813 )
   • Very high performance gain
   • Sidesteps web servers, may be implemented on
     separate servers
open source web development
                              Cache – Cache Router
                                      Application
                                      Server

                                         •APC
                                         •Memcache
                                         •Boost
                                         •Performance
                                          Module **



•Uses fastpath setting, bypassing default cache
 use
•Enables different caching options
•Faster because it by-passes database
•Further configuration is necessary
open source web development
                                                      Application
                                                      Server

                                                          •APC
Cache – Memcache module                                   •Memcache
                                                          •Boost
                                                          •Performance
                                                           Module **


• Very simple caching mechanism – uses pair values stored in memory
• Very fast
• Using memcache by-passes the database caching
• Is scalable and distrubuted
• May live on other servers


Memcache Serverer1            Memcache Server2     Memcache Server3
       Bin:cache                   Bin:cache            Bin:cache
   Bin:Cache_block              Bin:Cache_block      Bin:Cache_block
   Bin:Cache_filter             Bin:Cache_filter     Bin:Cache_filter
         Bin…                        Bin…                   Bin…
open source web development
                                               CachingApplication Boost
                                                       using
                                                           Server

                                                              •APC
                                                              •Memcache
                                                              •Boost
                                                              •Performance
                                                               Module **



• Extension of Performance module
• Instead of caching results in tables, stores them in files
  bypassing PHP and MySQL
• Limited to anonymous visitors – so good for slashdot
  but not for sites with high number of authenticated
  visitors
• How it works:
   Uses apache mod_rewrite directives in .htacess to check if GET
       Logged in cookie does not exist
           HTML file cached on fiilesystem
open source web development
                                                                                 Boost Logic




                              http://drupal.org/files/images/Boost.preview.png
open source web development

                                                      Application
                                                      Server

Back End – PHP Accelerator                                •APC
                                                          •Memcache
                                                          •Boost
                                                          •Performance
                                                           Module **

                              • APC is the Alternative PHP
                                Cache, which is a free, open,
                                and robust framework for
                                caching and optimizing PHP
                                intermediate code.
                              • APC caching PHP code in a
                                compiled state
                              • Needs to be looked at after
                                installation for proper
                                configuration, but generally a
                                big performance boost
                              • Xcache and eacceletarotor are
                                other options
open source web development
                                         MySQL caching
                                                  MySQL


                                                    •MySQL
                                                     caching




• Enable MySQL Query Cache & give it memory
• Index Slow queries that run often
    • Log-slow-queries
    • Use explain
    • Index indicies used
• Some configuration considerations
    • InnoDB Buffer Pool ++
    • Key_buffer is important for temp tables
    • Core Search Runs Better on MyISAM (but don’t use
      core search)
Drupal settings for performance
open source web development
                                                 improvement




• Always run cron
• Set minimum cache lifetime to 0 and increase garbage collector run
  frequency for busy sites
   • Settings.php:
   • Session.gc_maxlifetime
   • Session.cache_expire
• Write watchdog entries to syslog instead of db table
open source web development          Questions ?




        open source web development




                                      ANDY@PROMETSOURCE.COM



Blog: www.linuxsysadminblog.com
Site: www.prometsource.com

More Related Content

What's hot

One drupal to rule them all - Drupalcamp Caceres
One drupal to rule them all - Drupalcamp CaceresOne drupal to rule them all - Drupalcamp Caceres
One drupal to rule them all - Drupalcamp Caceres
hernanibf
 
Search Engine Optimization - The eye-opening presentation for beginners
Search Engine Optimization - The eye-opening presentation for beginnersSearch Engine Optimization - The eye-opening presentation for beginners
Search Engine Optimization - The eye-opening presentation for beginners
Up2 Technology
 
Service-Oriented Design and Implement with Rails3
Service-Oriented Design and Implement with Rails3Service-Oriented Design and Implement with Rails3
Service-Oriented Design and Implement with Rails3
Wen-Tien Chang
 
SYED_PHPMYSQL_CV
SYED_PHPMYSQL_CVSYED_PHPMYSQL_CV
SYED_PHPMYSQL_CV
Naser Syed
 
Wordpress website development
Wordpress website developmentWordpress website development
Wordpress website development
John Faust
 
Google App Engine, Groovy and Gaelyk presentation at the Paris JUG
Google App Engine, Groovy and Gaelyk presentation at the Paris JUGGoogle App Engine, Groovy and Gaelyk presentation at the Paris JUG
Google App Engine, Groovy and Gaelyk presentation at the Paris JUG
Guillaume Laforge
 
Hyperlink.85 to 86
Hyperlink.85 to 86Hyperlink.85 to 86
Hyperlink.85 to 86
myrajendra
 
Best Practices for Migrating a Legacy-Based CMS to Drupal
Best Practices for Migrating a Legacy-Based CMS to DrupalBest Practices for Migrating a Legacy-Based CMS to Drupal
Best Practices for Migrating a Legacy-Based CMS to Drupal
Acquia
 
Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]
Aaron Gustafson
 

What's hot (19)

One drupal to rule them all - Drupalcamp Caceres
One drupal to rule them all - Drupalcamp CaceresOne drupal to rule them all - Drupalcamp Caceres
One drupal to rule them all - Drupalcamp Caceres
 
From WordPress With Love
From WordPress With LoveFrom WordPress With Love
From WordPress With Love
 
Search Engine Optimization - The eye-opening presentation for beginners
Search Engine Optimization - The eye-opening presentation for beginnersSearch Engine Optimization - The eye-opening presentation for beginners
Search Engine Optimization - The eye-opening presentation for beginners
 
Acquia Commons
Acquia CommonsAcquia Commons
Acquia Commons
 
Service-Oriented Design and Implement with Rails3
Service-Oriented Design and Implement with Rails3Service-Oriented Design and Implement with Rails3
Service-Oriented Design and Implement with Rails3
 
SYED_PHPMYSQL_CV
SYED_PHPMYSQL_CVSYED_PHPMYSQL_CV
SYED_PHPMYSQL_CV
 
REST in Practice
REST in PracticeREST in Practice
REST in Practice
 
Wordpress website development
Wordpress website developmentWordpress website development
Wordpress website development
 
Drupal
DrupalDrupal
Drupal
 
Delivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern WebDelivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern Web
 
Google App Engine, Groovy and Gaelyk presentation at the Paris JUG
Google App Engine, Groovy and Gaelyk presentation at the Paris JUGGoogle App Engine, Groovy and Gaelyk presentation at the Paris JUG
Google App Engine, Groovy and Gaelyk presentation at the Paris JUG
 
Domain Driven Design
Domain Driven DesignDomain Driven Design
Domain Driven Design
 
Facebook Architecture - Breaking it Open
Facebook Architecture - Breaking it OpenFacebook Architecture - Breaking it Open
Facebook Architecture - Breaking it Open
 
 Active Storage - Modern File Storage? 
 Active Storage - Modern File Storage?  Active Storage - Modern File Storage? 
 Active Storage - Modern File Storage? 
 
Introduction in Apache Maven2
Introduction in Apache Maven2Introduction in Apache Maven2
Introduction in Apache Maven2
 
Hyperlink.85 to 86
Hyperlink.85 to 86Hyperlink.85 to 86
Hyperlink.85 to 86
 
Best Practices for Migrating a Legacy-Based CMS to Drupal
Best Practices for Migrating a Legacy-Based CMS to DrupalBest Practices for Migrating a Legacy-Based CMS to Drupal
Best Practices for Migrating a Legacy-Based CMS to Drupal
 
Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]
 
DIWD 2011
DIWD 2011DIWD 2011
DIWD 2011
 

Similar to Front End page speed performance improvements for Drupal

Web tech weblamp_infosession_2012-13
Web tech weblamp_infosession_2012-13Web tech weblamp_infosession_2012-13
Web tech weblamp_infosession_2012-13
Konrad Roeder
 
Going from Zero to Sixty in Drupal with Acquia
Going from Zero to Sixty in Drupal with AcquiaGoing from Zero to Sixty in Drupal with Acquia
Going from Zero to Sixty in Drupal with Acquia
Acquia
 
Testing Drupal Site Performance Across Browsers, Geographies and Networks
Testing Drupal Site Performance Across Browsers, Geographies and NetworksTesting Drupal Site Performance Across Browsers, Geographies and Networks
Testing Drupal Site Performance Across Browsers, Geographies and Networks
Acquia
 
"Python web development combines the simplicity of the language with powerful...
"Python web development combines the simplicity of the language with powerful..."Python web development combines the simplicity of the language with powerful...
"Python web development combines the simplicity of the language with powerful...
softwaretrainer2elys
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
Jeanho Chu
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
Jeanho Chu
 
Drupal status report for all staff day
Drupal status report for all staff dayDrupal status report for all staff day
Drupal status report for all staff day
sbclapp
 

Similar to Front End page speed performance improvements for Drupal (20)

USG Summit - September 2014 - Web Management using Drupal
USG Summit - September 2014 - Web Management using DrupalUSG Summit - September 2014 - Web Management using Drupal
USG Summit - September 2014 - Web Management using Drupal
 
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
 
Web tech weblamp_infosession_2012-13
Web tech weblamp_infosession_2012-13Web tech weblamp_infosession_2012-13
Web tech weblamp_infosession_2012-13
 
Be faster then rabbits
Be faster then rabbitsBe faster then rabbits
Be faster then rabbits
 
Going from Zero to Sixty in Drupal with Acquia
Going from Zero to Sixty in Drupal with AcquiaGoing from Zero to Sixty in Drupal with Acquia
Going from Zero to Sixty in Drupal with Acquia
 
Testing Drupal Site Performance Across Browsers, Geographies and Networks
Testing Drupal Site Performance Across Browsers, Geographies and NetworksTesting Drupal Site Performance Across Browsers, Geographies and Networks
Testing Drupal Site Performance Across Browsers, Geographies and Networks
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 
"Python web development combines the simplicity of the language with powerful...
"Python web development combines the simplicity of the language with powerful..."Python web development combines the simplicity of the language with powerful...
"Python web development combines the simplicity of the language with powerful...
 
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
 
Week01 jan19
Week01 jan19Week01 jan19
Week01 jan19
 
Picnic Software - Developing a flexible and scalable application
Picnic Software - Developing a flexible and scalable applicationPicnic Software - Developing a flexible and scalable application
Picnic Software - Developing a flexible and scalable application
 
Evaluating Drupal for the Enterprise
Evaluating Drupal for the EnterpriseEvaluating Drupal for the Enterprise
Evaluating Drupal for the Enterprise
 
DrupalCon 2011 Highlight
DrupalCon 2011 HighlightDrupalCon 2011 Highlight
DrupalCon 2011 Highlight
 
Drupal status report for all staff day
Drupal status report for all staff dayDrupal status report for all staff day
Drupal status report for all staff day
 
My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013
 
Portal / BI 2008 Presentation by Ted Tschopp
Portal / BI 2008 Presentation by Ted TschoppPortal / BI 2008 Presentation by Ted Tschopp
Portal / BI 2008 Presentation by Ted Tschopp
 
caseywest
caseywestcaseywest
caseywest
 
caseywest
caseywestcaseywest
caseywest
 

More from Andy Kucharski

PrometSource Mobile Development Capabilities
PrometSource Mobile Development Capabilities PrometSource Mobile Development Capabilities
PrometSource Mobile Development Capabilities
Andy Kucharski
 

More from Andy Kucharski (12)

Estimation - web software development estimation DrupalCon and DrupalCamp pre...
Estimation - web software development estimation DrupalCon and DrupalCamp pre...Estimation - web software development estimation DrupalCon and DrupalCamp pre...
Estimation - web software development estimation DrupalCon and DrupalCamp pre...
 
Drupal Camp Wroclaw 2015 Measure everything nps
Drupal Camp Wroclaw 2015 Measure everything npsDrupal Camp Wroclaw 2015 Measure everything nps
Drupal Camp Wroclaw 2015 Measure everything nps
 
Measure everything - but make NPS the Key
Measure everything - but make NPS the Key Measure everything - but make NPS the Key
Measure everything - but make NPS the Key
 
Drupal commerce performance profiling and tunning using loadstorm experiments...
Drupal commerce performance profiling and tunning using loadstorm experiments...Drupal commerce performance profiling and tunning using loadstorm experiments...
Drupal commerce performance profiling and tunning using loadstorm experiments...
 
PrometSource Mobile Development Capabilities
PrometSource Mobile Development Capabilities PrometSource Mobile Development Capabilities
PrometSource Mobile Development Capabilities
 
2012 bad camp-project management tools and organization-v4
2012 bad camp-project management tools and organization-v42012 bad camp-project management tools and organization-v4
2012 bad camp-project management tools and organization-v4
 
Stress Test Drupal on Amazon EC2 vs. RackSpace cloud
Stress Test Drupal on Amazon EC2 vs. RackSpace cloudStress Test Drupal on Amazon EC2 vs. RackSpace cloud
Stress Test Drupal on Amazon EC2 vs. RackSpace cloud
 
Drupal Business Summit - making your sites mobile accessible, four methods
Drupal Business Summit - making your sites mobile accessible, four methodsDrupal Business Summit - making your sites mobile accessible, four methods
Drupal Business Summit - making your sites mobile accessible, four methods
 
What should you expect from your Drupal Web Host
What should you expect from your Drupal Web HostWhat should you expect from your Drupal Web Host
What should you expect from your Drupal Web Host
 
Drupal campchicago2010.rachel.datamigration
Drupal campchicago2010.rachel.datamigrationDrupal campchicago2010.rachel.datamigration
Drupal campchicago2010.rachel.datamigration
 
Promet.manila2011.selling drupal
Promet.manila2011.selling drupalPromet.manila2011.selling drupal
Promet.manila2011.selling drupal
 
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
 

Recently uploaded

Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
 

Recently uploaded (20)

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT Professionals
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 

Front End page speed performance improvements for Drupal

  • 1. open source web development open source web development Page Speed andy@promethost.com Twitter: @akucharski
  • 2. open source web development @akucharski @dev_machev
  • 3. open source web development About Promet • 2003 Founded • 2008 focus on Drupal CMS • 2009 Mobile development • Faces of Promet today:
  • 4. open source web development Awards and Press CMS Expo Spotlight Awards • 2012 Best Drupal CMS App for Commerce • 2012 Best Drupal Mobile CMS App Notable Press Mentions • Wireless Week - Promet iPhone Madison app • Cult of Mac – ipad Dispatch system 50+ Drupal sponsorships, speaking sessions and attending
  • 5. open source web development Our Solutions Promet Solutions Inc. Promet Source - Open source web development - Drupal-based websites, products, and applications Promet Support - Drupal Managed Services - Drupal DevOps consulting Promet Mobile - Enterprise mobile business solutions - Drupal integration with mobile
  • 6. open source web development http://www.flickr.com/photos/joconnell
  • 7. What is page speed? And what is open source web development this presentation about? •What’s speed got to do with it? – Why faster is better •What is page load speed? •Tools used to measure performance of your pages and site •Key Improvements to make Drupal "run fast"
  • 8. open source web development Why care about page speed? •Time = Money… Why care about performance? •Speed = Money… •Slower Page load = Less Money Google Blog: 2011 – ―We encourage you to start looking at your site’s speed— not only to improve your ranking in search engines, but also to improve everyone’s experience on the Internet. “
  • 9. open source web development HTML DELAY EXPERIMENT GOAL Determine impact of server delays METHODOLOGY  Delay before sending HTML page  Different experiments with different delays  Small % of traffic  Monitor negative impact
  • 10. open source web development
  • 11. open source web development
  • 12. open source web development Lets not get confused • Performance – How fast does the page load • Scalability - The ability for a distributed system to easily expand and contract its resource pool to accommodate heavier or lighter loads. • High Availablity
  • 13. open source web development Waterfall diagrams • X = Time • Y = Number of objects on page • Y(1) = HTTP Request – rest of objects are elements of the page, images, CSS and js files, etc, etc. • Time to load all elements
  • 14. open source web development Waterfall diagrams • DNS Lookup – time it takes for browser to find the server • Initial Connection – three way handshake, hard to control • Time to First Byte – server wait time • Content Download – how long it takes to transfer the data from server to browser
  • 15. open source web development Waterfall diagrams • Back End • Front End • Render Start • Render complete
  • 16. open source web development Front End vs. Back End Front End vs. Back End http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
  • 17. open source web development Tools • Browser Tools: • Firebug • Yslow for firebug • http://developer.yahoo.com/yslow/ • Page Speed – online/Firefox/Chrome • http://code.Google.com/speed/articles/ • Web Page Test • http://www.webpagetest.org • Apache Bench http://www.flickr.com/photos/bik • http://httpd.apache.org/docs/2.0/programs/ab.html e/ • Devel • http://drupal.org/project/devel
  • 18. open source web development Firebug
  • 19. open source web development Yslow •Steve Souders, while he was Chief Performance at Yahoo! Created YSLOW and best practices •Firefox firebug plug in •Grades your site based on yahoo best practices •Scores – higher is better
  • 20. open source web development Page Speed Steve Souders at Google  Google Recommendations based on Google best practices
  • 21. open source web development Page Speed
  • 22. Web Page Test open source web development (www.webpagetest.org)
  • 23. Web Page Test open source web development (www.webpagetest.org)
  • 24. open source web development Apache Bench • Very simple “It is designed to give you an impression of how your current Apache installation performs. This especially shows you how many requests per second your Apache installation is capable of serving.” • Ab –n # -c # http://[site]/
  • 25. open source web development Devel
  • 26. open source web development http://www.flickr.com/people/13809318@N
  • 27. The Basics – for designers themers open source web development and content editors  Avoid bad requests  Avoid CSS expressions  Combine images using CSS sprites  Minimize DNS lookups  Minimize redirects  Optimize images  Remove unused CSS  Serve scaled images  Specify image dimensions  Use efficient CSS selectors https://developers.google.com/speed/docs/insights/rules
  • 28. Key Improvements to make Drupal open source web development “run fast” • Low hanging fruit – Turn on performance improvements in Drupal
  • 29. open source web development What about views? • Views Cache and Views Content Cache (Alpha)
  • 30. open source web development What about views? • Views Cache and Views Content Cache (Alpha)
  • 31. open source web development Drupal.org/projects/speedy • Speedy - Minfy JavaScript – contributed module •Minifying the files removes comments, whitespace, and can even transform parts of functions in ways to make them smaller. For example, a minified drupal.js is 24% the size of the original. The minifier used to generate these files is UglifyJS. This is the same one jQuery uses. http://upload.wikimedia.org/wikipedia/en/thumb/a/a1/Poster_of_Speedy_Delivery.jpg/220px- Poster_of_Speedy_Delivery.jpg
  • 32. open source web development Use a CDN • CDN brings your content closer to the edge of the network, much faster response and download time • Drupal Modules: • http://drupal.org/project/simplecdn • http://drupal.org/project/cdn by Wim Leers, needs a cron to run a fileconveyor • Media Mover
  • 33. open source web development Serve objects from multiple domains • Serve objects from multiple domains • There is trade off between dns look ups and parallel downloads • Browsers do matter (www.browserscope.com)
  • 34. Stay vigilant, check performance continuously open source web development and watch out for foreign objects
  • 35. open source web development http://www.flickr.com/photos/vincepal/
  • 36. Don’t let your traffic get to the DB – it open source web development wants to kill it! Your Data center Browser CDN Reverse Proxy Application MySQL Server •Cache •Cached •Cached •APC •MySQL static Content •Memcache caching content •Boost •Performance Module **
  • 37. Performance Module Settings and open source web development how they work
  • 38. open source web development Apache tuning for Drupal Browser •Cache •Extend mod_expires setting (make sure its on) in drupal .htaccess •Compress content before sending it • Apache deflate_module • Solution nginx – gzip module •.htaccess move to httpd.conf eliminates Apache parse and search on every load
  • 39. open source web development Caching – reverse proxy Reverse Proxy •Cached Content • Caching - Very high performance gain • Advanced Step: Squid/Varnish (http://drupal.org/node/91813 ) • Very high performance gain • Sidesteps web servers, may be implemented on separate servers
  • 40. open source web development Cache – Cache Router Application Server •APC •Memcache •Boost •Performance Module ** •Uses fastpath setting, bypassing default cache use •Enables different caching options •Faster because it by-passes database •Further configuration is necessary
  • 41. open source web development Application Server •APC Cache – Memcache module •Memcache •Boost •Performance Module ** • Very simple caching mechanism – uses pair values stored in memory • Very fast • Using memcache by-passes the database caching • Is scalable and distrubuted • May live on other servers Memcache Serverer1 Memcache Server2 Memcache Server3 Bin:cache Bin:cache Bin:cache Bin:Cache_block Bin:Cache_block Bin:Cache_block Bin:Cache_filter Bin:Cache_filter Bin:Cache_filter Bin… Bin… Bin…
  • 42. open source web development CachingApplication Boost using Server •APC •Memcache •Boost •Performance Module ** • Extension of Performance module • Instead of caching results in tables, stores them in files bypassing PHP and MySQL • Limited to anonymous visitors – so good for slashdot but not for sites with high number of authenticated visitors • How it works: Uses apache mod_rewrite directives in .htacess to check if GET Logged in cookie does not exist HTML file cached on fiilesystem
  • 43. open source web development Boost Logic http://drupal.org/files/images/Boost.preview.png
  • 44. open source web development Application Server Back End – PHP Accelerator •APC •Memcache •Boost •Performance Module ** • APC is the Alternative PHP Cache, which is a free, open, and robust framework for caching and optimizing PHP intermediate code. • APC caching PHP code in a compiled state • Needs to be looked at after installation for proper configuration, but generally a big performance boost • Xcache and eacceletarotor are other options
  • 45. open source web development MySQL caching MySQL •MySQL caching • Enable MySQL Query Cache & give it memory • Index Slow queries that run often • Log-slow-queries • Use explain • Index indicies used • Some configuration considerations • InnoDB Buffer Pool ++ • Key_buffer is important for temp tables • Core Search Runs Better on MyISAM (but don’t use core search)
  • 46. Drupal settings for performance open source web development improvement • Always run cron • Set minimum cache lifetime to 0 and increase garbage collector run frequency for busy sites • Settings.php: • Session.gc_maxlifetime • Session.cache_expire • Write watchdog entries to syslog instead of db table
  • 47. open source web development Questions ? open source web development ANDY@PROMETSOURCE.COM Blog: www.linuxsysadminblog.com Site: www.prometsource.com

Editor's Notes

  1. Add in 2 photos.look up cms
  2. <div xmlns:cc="http://creativecommons.org/ns#" about="http://www.flickr.com/photos/joconnell/147987374/"><a rel="cc:attributionURL" href="http://www.flickr.com/photos/joconnell/">http://www.flickr.com/photos/joconnell/</a> / <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a></div>
  3. http://www.flickr.com/people/13809318@N00
  4. http://tag1consulting.com/files/PageLoad.pdfOne pages on which there will always be a lot of objects, you can sometimes see a performance gain by serving the content from multiple domains. (For example, server1.sample.com, server2.sample.com, server3.sample.com, even if all are served from the same physical server with the same IP address). Web browsers limit the number of active connections allowed from a single domain, thus by serving content from multiple domains you can cause web browsers to download more objects on a given page at the same time. Note that on the first visit to your page, the client web browser has to do a DNS lookup for each domain that you use, so serving objects from too many domains can actually cause a slowdown. It is generally recommended to use anywhere from two to four domains, depending on how many objects you are serving per page. (Tag1 Consulting)
  5. http://www.flickr.com/photos/vincepal/
  6. http://drupal.org/node/545908#rules
  7. http://www.electrictoolbox.com/apc-php-cache-information/