Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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:/...
Próxima SlideShare
Cargando en…5
×

Improve WordPress load times with a CDN

633 visualizaciones

Publicado el

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

Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×