Front-End Performance Optimization in WordPress
- 2. SPEED MATTERS SEO - UX - Sales - Mobile
- 3. OUR ENEMIES Payload size Bloated DOM & CSS HTTP connections JavaScript blocking DNS lookups
- 4. NOT COVERED Apache/mySQL config ! Using a CDN ! Choosing a good host
- 5. REDUCE PAYLOAD a.k.a. front-end performance 101
- 6. REDUCE ASSET SIZES Minify your JS and CSS (and HTML) Load properly-sized images Use right image filetypes (gif/jpg/png/svg)
- 7. DEFER ASSET LOADING “lazy load” images when they appear in browser window Use async/defer <script> attributes ! Also, load pre-cached stuff! <script defer async src="script.js"></script>
- 8. TRICKING WP_ENQUEUE_SCRIPT function add_async( $url ) { if (strpos($url, '#async')===false) return $url; else if (is_admin()) return str_replace('#async', '', $url); else return str_replace('#async', '', $url)."' async"; } add_filter('clean_url', 'add_async', 11, 1); wp_enqueue_script('demo', '/js/myscript.js#async' );
- 9. USING GOOGLE’S JQUERY wp_deregister_script('jquery'); wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/ 1.11.0/jquery.min.js', array(), '1.11.0' );
- 10. BLOATED DOM & CSS make it clean before you make it mini
- 11. MORE ELEMENTS = SLOWER <body class="page"> <div id="wrapper"> <div id="page"> <div id="main"> <div class="main-side"> <aside id="sidebar"> ... </aside> </div> </div> </div> </div> </body> You can do a count with: ! $(‘*’).length; ! or ! document. getElementsByTagName(‘*”). length
- 12. SIMPLE SELECTORS html body div#main article#post-22 p a.inline { property: value; } .inline { property: value; } VS. ul li {} is slower than ul > li {} which is slower than .ul-li {}
- 13. HTTP CONNECTIONS your biggest obstacles to fast loads
- 14. HTTP CONNECTIONS Each asset (script, image, css file, font, etc) is retrieved via an HTTP connection. Each connection takes a moment to start due to overhead.
- 15. HTTP HEADERS
- 16. REDUCING CONNECTIONS Combine CSS Files Combine JS Files Use CSS Sprites Avoid images in favor of CSS Don’t load stuff you don’t need*
- 17. COMBINING CSS FILES Use a tool like SASS that combines them for you Only write a single style.css Use a plugin (e.g. W3 Total Cache) to combine (& compress!) them for you.
- 18. COMBINING JS FILES Use a plugin (e.g. W3 Total Cache) to combine+compress them for you. Manually put all your jQuery plugins into a single file.
- 19. COMBINING JS FILES WordPress is especially prone to loading lots of JS files It’s worth the effort to mitigate against this. Seriously.
- 20. CSS SPRITES Put all your images into a single file, and use CSS to position the background properly.
- 21. CSS SPRITE EXAMPLE .sprite-ben { height: 117px; width: 91px; background-image: url('img/sprite.png'); background-position: 0 -525px; background-repeat: no-repeat; } overall sprite.png file measures 304 x 910 but my headshot is a small part
- 22. DON’T USE IMAGES CSS3 provides alternatives: Gradients Rounded Corners Text and box shadows Rotation
- 23. JAVASCRIPT BLOCKING And sequential loading general
- 24. SEQUENTIAL VS. PARALLEL Browsers can load some assets in parallel, such as CSS files, images, and fonts. This is good. But some assets —JS files — are loaded in sequence and block others.
- 25. CSS AND SCRIPTS JS should be at bottom of page. CSS should go at the top of your page and be loaded via <link> not @import
- 26. IN WORDPRESS wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); Set to TRUE
- 27. DNS LOOKUPS hidden time thieves
- 28. DNS LOOKUPS Every domain mentioned on your page needs to be resolved to an IP (20-120 ms) ! But too few domains is bad too.
- 29. TOOLS
- 30. FOR MORE Google “Steve Souder” https://developers.google.com/speed/docs/best- practices/rules_intro ! http://developer.yahoo.com/yslow/ ! https://developers.google.com/speed/ pagespeed/