Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Improve WordPress load times with a CDN
Similar to Improve WordPress load times with a CDN (20)
More from Austin Gil
Recently uploaded
Recently uploaded (20)
Improve WordPress load times with a CDN
- 1. Improve WP load times with a CDN Incorporating JSDelivr into your next WordPress project.
- 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. Benefits of a CDN include: - Super high tech servers - Distributed data centers - Easier on your host
- 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. 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. 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. Dequeue any scripts you call wp_dequeue_script( 'slick' );
- 8. Problem #2 “Aha, but what if the CDN crashes? Your scripts won’t load!” - Some jerk
- 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. 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. 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. || 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. One more look: echo '<script> jQuery('html').slick || document.write( '<script src="' . get_template_directory_uri() . '/path/to/cdnfallback.js">' ); </script>'; Escaped quotes
- 14. Workflow... Add/update local fallback (and test) Create your project packages Enqueue CDN version, dequeue project handles
- 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. Key considerations - Other performance efforts (caching, images) - Plugin vs. themes - Project complexity - Client requirements
- 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