Presentation for Advanced WordPress San Diego about discussing the benefits of incorporating JSDeliver into project development workflow to serve resources for better performance.
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
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
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
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
