Download to read offline
More Related Content
Similar to Improve WordPress load times with a CDN
Improve WordPress load times with a CDN
- 1. Improve WP load timeswith a CDN Incorporating JSDelivr into your next WordPress project.
- 2. What is aCDN “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 aCDN include: - Super high tech servers - Distributed data centers - Easier on your host
- 4. My CDN ofchoice: 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 scriptlike 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 ifthe same script is already being loaded? You’re using a different handle. It’s going to load twice!” - Some jerk
- 7. Dequeue any scriptsyou call wp_dequeue_script( 'slick' );
- 8. Problem #2 “Aha, butwhat if the CDN crashes? Your scripts won’t load!” - Some jerk
- 9. Add a fallbackscript 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 lookslike... 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 previouscondition 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) Createyour project packages Enqueue CDN version, dequeue project handles
- 15. Putting it alltogether 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 - Otherperformance efforts (caching, images) - Plugin vs. themes - Project complexity - Client requirements
- 17. Go forth andwreak havoc! Questions…? Austin Gil a.k.a. Questions…? austin@thisisvisceral.com More on JSDelivr at: https://www.jsdelivr.com/features/jsdelivr-cdn-features