WPO presentation for WordCamp Brighton 2019

1. #WCBTN
Simple tricks (I always use) to
improve the performance of your site
Mauricio Gelves - @maugelves

2. #WCBTN
My 6 WPO Tips

3. #WCBTN
#1 Images
Use Progressive JPG’s for pictures
Use PNG’s for transparencies
Use SVG’s for graphics that need to scale
Don’t use WebP… YET (80% browser support)
Be careful with GIF’s (use looped videos instead)

4. #WCBTN
#1 Images - Plugins
reSmush.it
EWWW Image Optimizer
Compress JPEG & PNG images
ShortPixel Image Optimizer
WP Smush

5. #WCBTN
#2 Hosting
Install SSL and HTTP2
Make sure it has SSD Hard Drives
Isolated accounts
PHP version 7.0 or later
Make sure it has QUIC

6. #WCBTN
#3 Cache
Try NOT to use Cache Plugins
Delegate that responsibility to the Browser and Server
Browser Cache Server Cache
&

7. #WCBTN
#3 Cache
Browser Cache
—Hey browser, you know what?
Don’t delete these files 'cause they
won’t change for a long time, so feel
free to reuse them until I tell you.
Got it?
— I Got it.

8. <IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 2 months"
# CSS
ExpiresByType text/css "access plus 1 year"
# Data interchange
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
# Favicon (cannot be renamed!)
ExpiresByType image/x-icon "access plus 1 week"
# HTML components (HTCs)
ExpiresByType text/x-component "access plus 2 months"
# HTML
ExpiresByType text/html "access plus 0 seconds"
# JavaScript
ExpiresByType application/javascript "access plus 1 year"
# Manifest files
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Media
ExpiresByType audio/ogg "access plus 2 months"
ExpiresByType image/gif "access plus 2 months"
ExpiresByType image/jpeg "access plus 2 months"
ExpiresByType image/png "access plus 2 months"
ExpiresByType video/mp4 "access plus 2 months"
ExpiresByType video/ogg "access plus 2 months"
ExpiresByType video/webm "access plus 2 months"
# Web feeds
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
# Web fonts
ExpiresByType application/font-woff "access plus 2 months"
ExpiresByType application/font-woff2 "access plus 2 months"
ExpiresByType application/vnd.ms-fontobject "access plus 2 months"
ExpiresByType application/x-font-ttf "access plus 2 months"
ExpiresByType font/opentype "access plus 2 months"
ExpiresByType image/svg+xml "access plus 2 months"
</IfModule>

9. #WCBTN
#3 Cache
Server Cache Who knows how Cache actually Works?
We hear «Cache» all the time but…

10. #WCBTN
#3 Cache - Server Cache
maugelves.com
cached
version
maugelves.com
Server Cache for Dummies those who never wanted to ask

11. #WCBTN
#4 gZIP Compression
Why send this ?
132kb
When you can send this
18kb

12. #WCBTN
#4 gZIP Compression
maugelves.com

13. AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

14. #WCBTN
Watch this
Cached HTML cached
version
+
gZIP Compression
=
Cached gZIP HTML
*Use such speed under your own responsibility

15. #WCBTN
#5 Remove unnecessary assets
Why do you load them
in the Homepage?

16. #WCBTN
#5 Conditional Tags & dequeue
is_admin()
is_single()
is_post_type_archive()
is_page()
is_front_page()
https://codex.wordpress.org/Conditional_Tags

17. <?php
function mg_dequeue_scripts() {
if( ! is_page('Contact') ):
wp_dequeue_script('contact-form-7-js');
endif;
}
add_action( 'wp_enqueue_scripts', 'mg_dequeue_scripts' );

18. #WCBTN
#6 Content Delivery Network (CDN)
800ms
70ms
520m
s
340ms

19. #WCBTN
#6 Content Delivery Network (CDN)
32ms
25ms
62ms
20ms
Updates
U
pdates
Updates Updates

20. #WCBTN
#6 Content Delivery Network (CDN)
*Only for pictures

21. Mauricio Gelves
@maugelves
Software Engineer
Freelance WordPress Developer
Brand Ambassador
Web: maugelves.com
YouTube: mauriciogelves
Instagram: @maugelves
Twitter: @maugelves
#WCBTN

22. #WCBTN
Thank you!
¡Gracias!