Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Systematic Holistic Speed
HOW TO DELIVER A FAST SITE EACH AND EVERY TIME
SLIDES@ HTTP://WWW.SLIDESHARE.NET/PBEARNE
Paul Bearne @pbearne
Freelance Sr. Full Stack WordPress Developer
Plugin author of Author Avatars List ( http://wordpress....
Real-time Publishing for WordPress
Livepress.com
eLearning Solutions Powered by WordPress
UncannyOwl.com
#1 Outsourcing Service For WordPress
Codeable.io
$10 credit : https://codeable.io?coupon_code=WSQWI1
The Holy Grail
SPEED IS KING
What will we cover today?
A bit on why it matters
What slows down a site / page loading
How we can fix that
How we can...
Why does it matter?
PageRank!
User enjoyment and retention
Revenue
Site success
TIP: Tools to measure with: Pingdom, o...
http://wpengine.com/blog/site-speed-infographic/
http://wpengine.com/blog/site-speed-infographic/
http://wpengine.com/blog/site-speed-infographic/
http://wpengine.com/blog/site-speed-infographic/
http://wpengine.com/blog/site-speed-infographic/
http://wpengine.com/blog/site-speed-infographic/
What makes a page slow
SERVER SPEED, NUMBER AND SIZE OF FILES
Fast
Slow
Bigger server
Load less
Load less PHP code
Load less plugins
CDN
memcache
Load less files in browsers
Full page ...
Why do too many plugins slow the site?
Because they:
Load extra code
Make extra calls to the Database
Add extra CSS and...
Why do option driven themes slow the site?
Because they:
Load code to switch the options
Call the DB to get the options
...
Why do page builders slow the site?
Because they:
Load code to handle the options
Call the DB to get the options
Add ex...
Why can 3rd party content slow the site?
Because:
You don’t control the servers
They load yet more code
You don’t know ...
What makes a page fast
DO LESS, LOAD LESS
“On complicated sites, perceived speed is
more important than real speed.”
 How fast does the content above the fold show...
Example: Use an image as a placeholder for a slider
Then load the real slide on demand (click or even mouse-over).
Users a...
Example: ‘lazy load’ high resolution images
Lazy loading – using javascript to fetch content after the page has
finished d...
Other items to ‘lazy load’
Ads and 3rd party content
(disconnects the page load from the speed of an external service)
A...
It’s the details that matter
‘IF YOU LOOK AFTER THE PENNIES, THE POUNDS
WILL LOOK AFTER THEMSELVES’
Create clean semantic HTML
If the content is a list, then use a list; if it is a quote
then use a block quote
Less code,...
<div class=“content”>
<ul class=“my-default-list with-border”>
<li class=“my-default-row no-bullets odd”>list content</li>...
Server setup
Is it big enough for your traffic?
Can you see the server load metrics?
Is Gzip compression turned on?
Ch...
CDN
Take files (images, CSS, JS) that don’t change and
store closer to the user
CDN Services
http://jetpack.me/support/ph...
Caching
Object v Transient
Use Object caching in your code to stop recalling the same
function in a single page load, un...
Caching - Object
If( null === self::blog_users ){
self::blog_users = get_users( $args );
}
// Do something with $result;
$...
Caching - Transient
https://codex.wordpress.org/Transients_API
if ( false === ( $featured = get_transient( 'foo_featured_p...
Minification
<link rel='stylesheet' id='open-sans-css' href='https://fonts.googleapis.com/css?family=Open+Sans%3A300italic...
Why minify?
In an ideal situation you should have just one JS and
CSS file for your site.
But coding in one large file i...
How to work with small files
So you need to use SASS/LESS to edit the CSS.
And use Grunt/Gulp to combine JS/SASS files i...
Grunt or Gulp Tasks
Concat - combine file
Uglify – minify
Watch - do something when a file changes (e.g. run sass conve...
wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array(
'jquery' ), '20150330...
“Working smart saves time
to allow for optimisation!”
Working Smart
Use an IDE
Code analysis with PHPCS
Work locally
Debug with xDebug
Source control
Use an IDE, e.g. PHP storm
Setup PHPCS to help you with clean code
Code completion
Work locally – Vagrant / Docker
Saves time (no ftp)
Vagrant / Docker allows you to match server setup
Work offline
Use...
Use source control - Git
Tracks changes
Manages the code
Reverts code and enables feature branches
“Your site will naturally be
fast if you write clean
organized code . . . . and
your life will have less
hassle!”
Questions?
Hire Me...
PAUL@BEARNE.COM
Slides@ http://www.slideshare.net/pbearne
Email: pbearne@gmail.com
Upcoming SlideShare
Loading in …5
×

Systematic Holistic Speed

716 views

Published on

How to create a fast WordPress site each and every time using a systematic approach. With examples of tips and best practice.
Given as a talk at WordCamp Toronto 2015

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Systematic Holistic Speed

  1. 1. Systematic Holistic Speed HOW TO DELIVER A FAST SITE EACH AND EVERY TIME SLIDES@ HTTP://WWW.SLIDESHARE.NET/PBEARNE
  2. 2. Paul Bearne @pbearne Freelance Sr. Full Stack WordPress Developer Plugin author of Author Avatars List ( http://wordpress.org/plugins/author-avatars/ ) WP Site Verification tool ( http://wordpress.org/plugins/wp-site-verification-tool/ ) Core contribs in WordPress versions 3.9, 4.0 and 4.2
  3. 3. Real-time Publishing for WordPress Livepress.com
  4. 4. eLearning Solutions Powered by WordPress UncannyOwl.com
  5. 5. #1 Outsourcing Service For WordPress Codeable.io $10 credit : https://codeable.io?coupon_code=WSQWI1
  6. 6. The Holy Grail SPEED IS KING
  7. 7. What will we cover today? A bit on why it matters What slows down a site / page loading How we can fix that How we can fix it each and every time
  8. 8. Why does it matter? PageRank! User enjoyment and retention Revenue Site success TIP: Tools to measure with: Pingdom, or Page Speed Online.
  9. 9. http://wpengine.com/blog/site-speed-infographic/
  10. 10. http://wpengine.com/blog/site-speed-infographic/
  11. 11. http://wpengine.com/blog/site-speed-infographic/
  12. 12. http://wpengine.com/blog/site-speed-infographic/
  13. 13. http://wpengine.com/blog/site-speed-infographic/
  14. 14. http://wpengine.com/blog/site-speed-infographic/
  15. 15. What makes a page slow SERVER SPEED, NUMBER AND SIZE OF FILES
  16. 16. Fast Slow Bigger server Load less Load less PHP code Load less plugins CDN memcache Load less files in browsers Full page cache
  17. 17. Why do too many plugins slow the site? Because they: Load extra code Make extra calls to the Database Add extra CSS and JS files to the page And if badly written Don’t use caching Load lots of files
  18. 18. Why do option driven themes slow the site? Because they: Load code to switch the options Call the DB to get the options Add extra CSS and JS files to the page for all the options
  19. 19. Why do page builders slow the site? Because they: Load code to handle the options Call the DB to get the options Add extra CSS and JS files to the page for all the options Tend to use lots of short codes, all of which need rendering
  20. 20. Why can 3rd party content slow the site? Because: You don’t control the servers They load yet more code You don’t know what is being loaded They often use lots of redirects
  21. 21. What makes a page fast DO LESS, LOAD LESS
  22. 22. “On complicated sites, perceived speed is more important than real speed.”  How fast does the content above the fold show? Perceived speed
  23. 23. Example: Use an image as a placeholder for a slider Then load the real slide on demand (click or even mouse-over). Users are not surprised if a slider pauses with a spinner.
  24. 24. Example: ‘lazy load’ high resolution images Lazy loading – using javascript to fetch content after the page has finished displaying
  25. 25. Other items to ‘lazy load’ Ads and 3rd party content (disconnects the page load from the speed of an external service) All user specific content (allow for full page caching) Location specific content (allow for full page caching) Gallery thumbnails Speed bumps (ads inline)
  26. 26. It’s the details that matter ‘IF YOU LOOK AFTER THE PENNIES, THE POUNDS WILL LOOK AFTER THEMSELVES’
  27. 27. Create clean semantic HTML If the content is a list, then use a list; if it is a quote then use a block quote Less code, smaller file, faster to load Clean, well laid out code is easier to read so you can see the errors Errors in the code may or may not beak the code but the browser will have to try to figure it out
  28. 28. <div class=“content”> <ul class=“my-default-list with-border”> <li class=“my-default-row no-bullets odd”>list content</li> <li class=“my-default-row no-bullets even”>….. <div class=“content”> <ul> <li>list content</li> <li>….. Remove unnecessary CSS classes Do you need that CSS Class? Instead, select it via its parent:
  29. 29. Server setup Is it big enough for your traffic? Can you see the server load metrics? Is Gzip compression turned on? Check by looking at the Web Developer Toolbar > Information > View Document Size Or put an URL in here http://gzipwtf.com/ Do you have memcache installed? Do you a php object cache? ( php5+ eAccelerator / php5- Xcache)
  30. 30. CDN Take files (images, CSS, JS) that don’t change and store closer to the user CDN Services http://jetpack.me/support/photon/ (image only) https://www.cloudflare.com/ https://www.maxcdn.com/ https://aws.amazon.com/cloudfront/
  31. 31. Caching Object v Transient Use Object caching in your code to stop recalling the same function in a single page load, unless you have a caching plugin that saves these between pages. Use Transients if you need to reuse the result on different pages. TIP: : Transients without an expiry auto load (use with care as you have to clear the cache in your code)
  32. 32. Caching - Object If( null === self::blog_users ){ self::blog_users = get_users( $args ); } // Do something with $result; $result = wp_cache_get( 'my_result' ); if ( false === $result ) { $result = $wpdb->get_results( $query ); wp_cache_set( 'my_result', $result ); } // Do something with $result; https://codex.wordpress.org/Class_Reference/WP_Object_Cache
  33. 33. Caching - Transient https://codex.wordpress.org/Transients_API if ( false === ( $featured = get_transient( 'foo_featured_posts' ) ) ) { $featured = new WP_Query( array( 'category' => 'featured', 'posts_per_page' => 5 ) ); // Put the results in a transient. Expire after 12 hours. set_transient( 'foo_featured_posts', $featured, 12 * HOUR_IN_SECONDS ); }
  34. 34. Minification <link rel='stylesheet' id='open-sans-css' href='https://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin- ext&ver=4.3' type='text/css' media='all' /> <link rel='stylesheet' id='dashicons-css' href='http://domain.com/wp-includes/css/dashicons.min.css?ver=4.3' type='text/css' media='all' /> <link rel='stylesheet' id='admin-bar-css' href='http://domain.com/wp-includes/css/admin-bar.min.css?ver=4.3' type='text/css' media='all' /> <link rel='stylesheet' id='contact-form-7-css' href='http://domain.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='cff-css' href='http://domain.com/wp-content/plugins/custom-facebook-feed/css/cff-style.css?ver=2.3.7' type='text/css' media='all' /> <link rel='stylesheet' id='cff-font-awesome-css' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?ver=4.2.0' type='text/css' media='all' /> <link rel='stylesheet' id='mvc-front-style-css' href='http://domain.com/wp-content/plugins/ilgelo_vc_addons/assets/css/style.css?ver=4.3' type='text/css' media='all' /> <link rel='stylesheet' id='mvc-front-custom-style-css' href='http://domain.com/wp-content/plugins/ilgelo_vc_addons/assets/css/minimal.custom.css.php?ver=4.3' type='text/css' media='all' /> <link rel='stylesheet' id='sb_instagram_styles-css' href='http://domain.com/wp-content/plugins/instagram-feed/css/sb-instagram.css?ver=1.3.7' type='text/css' media='all' /> <link rel='stylesheet' id='sb_instagram_icons-css' href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?1&ver=4.2.0' type='text/css' media='all' /> <link rel='stylesheet' id='js_composer_front-css' href='//domain.com/wp-content/uploads/js_composer/js_composer_front_custom.css?ver=4.5.2' type='text/css' media='all' /> <link rel='stylesheet' id='bootstrap-css' href='http://domain.com/wp-content/themes/mani/include/css/bootstrap.css?ver=4.3' type='text/css' media='all' /> <link rel='stylesheet' id='animate-css-css' href='http://domain.com/wp-content/themes/mani/include/css/animate.css?ver=4.3' type='text/css' media='all' /> <link rel='stylesheet' id='flexslider-css' href='http://domain.com/wp-content/plugins/js_composer/assets/lib/bower/flexslider/flexslider.css?ver=4.5.2' type='text/css' media='screen' /> <link rel='stylesheet' id='carousel-css-css' href='http://domain.com/wp-content/themes/mani/include/css/owl-carousel/owl.carousel.css?ver=4.3' type='text/css' media='all' /> <link rel='stylesheet' id='font-awesome-css' href='http://domain.com/wp-content/plugins/js_composer/assets/lib/bower/font-awesome/css/font-awesome.min.css?ver=4.5.2' type='text/css' media='screen' /> <link rel='stylesheet' id='fonts-etline-css' href='http://domain.com/wp-content/themes/mani/include/css/fonts/fonts-etline/etline-style.css?ver=4.3' type='text/css' media='all' /> <link rel='stylesheet' id='fonts-ionicons-css' href='http://domain.com/wp-content/themes/mani/include/css/fonts/fonts-ionicons/ionicons.min.css?ver=4.3' type='text/css' media='all' /> <link rel='stylesheet' id='main-css-css' href='http://domain.com/wp-content/themes/mani/style.css?ver=4.3' type='text/css' media='all' /> <link rel='stylesheet' id='custom-css-css' href='http://domain.com/wp-content/themes/mani/include/css/custom.css.php?ver=4.3' type='text/css' media='all' /> Replace with this: <link rel="stylesheet" type="text/css" href="http://domain.com/wp- content/cache/minify/000000/7UDvovs02.css" media="all" />
  35. 35. Why minify? In an ideal situation you should have just one JS and CSS file for your site. But coding in one large file is a nightmare and slows development. So you want to work in small, easy to find single- purpose files, but deliver single large files to the browser.
  36. 36. How to work with small files So you need to use SASS/LESS to edit the CSS. And use Grunt/Gulp to combine JS/SASS files into a combined files.
  37. 37. Grunt or Gulp Tasks Concat - combine file Uglify – minify Watch - do something when a file changes (e.g. run sass convert) SASS - create css file from sass/ less Gettext - create a .pot file Jshint - static analysis of your JS code Qunit - unit tests http://gruntjs.com/ http://gulpjs.com/
  38. 38. wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20150330', true); wp_enqueue_script( 'twentyfifteen-custom', get_template_directory_uri() . '/custom.js', array( 'jquery' ), '20150330', true ); wp_enqueue_script( ‘Js-libary', get_template_directory_uri() . '/ js/ Js-libary / Js-libary .js', array( 'jquery' ), '20150330', true); concat: { home: { src: ['/js/functions.js', '/custom.js', '/js/Js-libary/Js-libary.js '], dest: 'js/theme.full.js' } } Use Grunt to combine files Instead: Stop just adding more wp_enqueue_script() calls!
  39. 39. “Working smart saves time to allow for optimisation!”
  40. 40. Working Smart Use an IDE Code analysis with PHPCS Work locally Debug with xDebug Source control
  41. 41. Use an IDE, e.g. PHP storm Setup PHPCS to help you with clean code Code completion
  42. 42. Work locally – Vagrant / Docker Saves time (no ftp) Vagrant / Docker allows you to match server setup Work offline Use xDebug to see error details
  43. 43. Use source control - Git Tracks changes Manages the code Reverts code and enables feature branches
  44. 44. “Your site will naturally be fast if you write clean organized code . . . . and your life will have less hassle!”
  45. 45. Questions?
  46. 46. Hire Me... PAUL@BEARNE.COM
  47. 47. Slides@ http://www.slideshare.net/pbearne Email: pbearne@gmail.com

×