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.
Improve WP load
times with a CDN
Incorporating JSDelivr into your next
WordPress project.
What is a CDN
“A content delivery network or content
distribution network (CDN) is a globally
distributed network of proxy...
Benefits of a CDN include:
- Super high tech servers
- Distributed data centers
- Easier on your host
My CDN of choice: JSDelivr
https://www.jsdelivr.com/
- Tons of libraries to choose from
- Version control
- Minified versi...
Add your script like any other
wp_enqueue_script('jsdelivr-scripts', '//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js',...
Problem #1
“What if the same script is already being loaded?
You’re using a different handle.
It’s going to load twice!”
-...
Dequeue any scripts you call
wp_dequeue_script( 'slick' );
Problem #2
“Aha, but what if the CDN crashes?
Your scripts won’t load!”
- Some jerk
Add a fallback script
1. Add a local script with all your scripts in one (cdnfallback.js)
2. Create a conditional check to...
What that looks like...
function theme_cdn_fallback_scripts() {
echo '<script>jQuery('html').slick
||
document.write('
<sc...
jQuery('html').slick
Targets your <html> element and attempts the .slick method.
If Slick is loaded, this will return true...
|| document.write(‘...’);
If previous condition fails, our CDN failed. Bummer… :(
Let’s add our local version right here w...
One more look:
echo '<script>
jQuery('html').slick
||
document.write(
'<script src="' . get_template_directory_uri() .
'/p...
Workflow...
Add/update
local fallback
(and test)
Create your
project
packages
Enqueue CDN
version,
dequeue
project
handles
Putting it all together
function theme_enqueue_cdn_scripts() {
// Dequeue and enqueue CDN scripts
wp_dequeue_script('slick...
Key considerations
- Other performance efforts (caching, images)
- Plugin vs. themes
- Project complexity
- Client require...
Go forth and wreak havoc!
Questions…?
Austin Gil a.k.a.
Questions…?
austin@thisisvisceral.com
More on JSDelivr at:
https:/...
Upcoming SlideShare
Loading in …5
×

Improve WordPress load times with a CDN

563 views

Published on

Presentation for Advanced WordPress San Diego about discussing the benefits of incorporating JSDeliver into project development workflow to serve resources for better performance.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Improve WordPress load times with a CDN

  1. 1. Improve WP load times with a CDN Incorporating JSDelivr into your next WordPress project.
  2. 2. What is a CDN “A content delivery network or content distribution network (CDN) is a globally distributed network of proxy servers deployed in multiple data centers. The goal of a CDN is to serve content to end-users with high availability and high performance.” - Wikipedia
  3. 3. Benefits of a CDN include: - Super high tech servers - Distributed data centers - Easier on your host
  4. 4. My CDN of choice: JSDelivr https://www.jsdelivr.com/ - Tons of libraries to choose from - Version control - Minified versions - CSS options as well - Concatenate all files
  5. 5. Add your script like any other wp_enqueue_script('jsdelivr-scripts', '//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js', array('jquery'), null, true ); wp_enqueue_script( 'jsdelivr-scripts', '//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js', array('jquery'), null, true );
  6. 6. Problem #1 “What if the same script is already being loaded? You’re using a different handle. It’s going to load twice!” - Some jerk
  7. 7. Dequeue any scripts you call wp_dequeue_script( 'slick' );
  8. 8. Problem #2 “Aha, but what if the CDN crashes? Your scripts won’t load!” - Some jerk
  9. 9. Add a fallback script 1. Add a local script with all your scripts in one (cdnfallback.js) 2. Create a conditional check to see if the CDN fails 3. If it fails, add your local version This part is a bit tricky...
  10. 10. What that looks like... function theme_cdn_fallback_scripts() { echo '<script>jQuery('html').slick || document.write(' <script src="/path/to/cdnfallback.js">' ); </script>'; } add_action( 'wp_footer', 'theme_cdn_fallback_scripts', 30 ); ← Create our function ← Check if script works ← OR... ← Use our local version ← (path to local version) ← Add to wp_footer ← Run AFTER other script
  11. 11. jQuery('html').slick Targets your <html> element and attempts the .slick method. If Slick is loaded, this will return true and we don’t need to do anything else.
  12. 12. || document.write(‘...’); If previous condition fails, our CDN failed. Bummer… :( Let’s add our local version right here with document.write(). Yay! :) document.write( '<script src="path/to/cdnfallback.js">' );
  13. 13. One more look: echo '<script> jQuery('html').slick || document.write( '<script src="' . get_template_directory_uri() . '/path/to/cdnfallback.js">' ); </script>'; Escaped quotes
  14. 14. Workflow... Add/update local fallback (and test) Create your project packages Enqueue CDN version, dequeue project handles
  15. 15. Putting it all together function theme_enqueue_cdn_scripts() { // Dequeue and enqueue CDN scripts wp_dequeue_script('slick'); wp_enqueue_script('jsdelivr-scripts', '//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js', array('jquery'), null, true ); } add_action( 'wp_enqueue_scripts', ‘theme_enqueue_cdn_scripts' ); function theme_cdn_fallback_scripts() { // Local fallback in case CDN fails echo '<script>jQuery('html').slick || document.write('<script src="' . get_template_directory_uri() . '/dist/scripts/cdnfallback.js">');</script>'; } // Add to footer after other scripts add_action( 'wp_footer', ‘theme_cdn_fallback_scripts', 30 );
  16. 16. Key considerations - Other performance efforts (caching, images) - Plugin vs. themes - Project complexity - Client requirements
  17. 17. Go forth and wreak havoc! Questions…? Austin Gil a.k.a. Questions…? austin@thisisvisceral.com More on JSDelivr at: https://www.jsdelivr.com/features/jsdelivr-cdn-features

×