Simple tricks to improve the performance of your site

Mauricio Gelves
Mauricio GelvesDesarrollador freelance de WordPress, WooCommerce y Frontend at maugelves.com
#WCBTN
Simple tricks (I always use) to
improve the performance of your site
Mauricio Gelves - @maugelves
#WCBTN
My 6 WPO Tips
#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)
#WCBTN
#1 Images - Plugins
reSmush.it
EWWW Image Optimizer
Compress JPEG & PNG images
ShortPixel Image Optimizer
WP Smush
#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
#WCBTN
#3 Cache
Try NOT to use Cache Plugins
Delegate that responsibility to the Browser and Server
Browser Cache Server Cache
&
#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.
<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>
#WCBTN
#3 Cache
Server Cache Who knows how Cache actually Works?
We hear «Cache» all the time but…
#WCBTN
#3 Cache - Server Cache
maugelves.com
cached
version
maugelves.com
Server Cache for Dummies those who never wanted to ask
#WCBTN
#4 gZIP Compression
Why send this ?
132kb
When you can send this
18kb
#WCBTN
#4 gZIP Compression
maugelves.com
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
#WCBTN
Watch this
Cached HTML cached
version
+
gZIP Compression
=
Cached gZIP HTML
*Use such speed under your own responsibility
#WCBTN
#5 Remove unnecessary assets
Why do you load them
in the Homepage?
#WCBTN
#5 Conditional Tags & dequeue
is_admin()
is_single()
is_post_type_archive()
is_page()
is_front_page()
https://codex.wordpress.org/Conditional_Tags
<?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' );
#WCBTN
#6 Content Delivery Network (CDN)
800ms
70ms
520m
s
340ms
#WCBTN
#6 Content Delivery Network (CDN)
32ms
25ms
62ms
20ms
Updates
U
pdates
Updates Updates
#WCBTN
#6 Content Delivery Network (CDN)
*Only for pictures
Mauricio Gelves
@maugelves
Software Engineer
Freelance WordPress Developer
Brand Ambassador
Web: maugelves.com
YouTube: mauriciogelves
Instagram: @maugelves
Twitter: @maugelves
#WCBTN
#WCBTN
Thank you!
¡Gracias!
1 of 22

Recommended

Speed Loading by
Speed LoadingSpeed Loading
Speed LoadingShea Frederick
1K views19 slides
Be IT Conference 2015 | MentorMate - Adding multiplayer to your mobile game: ... by
Be IT Conference 2015 | MentorMate - Adding multiplayer to your mobile game: ...Be IT Conference 2015 | MentorMate - Adding multiplayer to your mobile game: ...
Be IT Conference 2015 | MentorMate - Adding multiplayer to your mobile game: ...Polina Dekova
323 views17 slides
Simplify Web UX Coding using OSGi Modularity Magic - Paul Fraser (A2Z Living) by
Simplify Web UX Coding using OSGi Modularity Magic - Paul Fraser (A2Z Living)Simplify Web UX Coding using OSGi Modularity Magic - Paul Fraser (A2Z Living)
Simplify Web UX Coding using OSGi Modularity Magic - Paul Fraser (A2Z Living)mfrancis
484 views15 slides
Svelte the future of frontend development by
Svelte   the future of frontend developmentSvelte   the future of frontend development
Svelte the future of frontend developmenttwilson63
556 views40 slides
Node Js Websocket Js Meetup Slides by
Node Js Websocket Js Meetup SlidesNode Js Websocket Js Meetup Slides
Node Js Websocket Js Meetup SlidesMakoto Inoue
746 views17 slides
Intro to JavaScript by
Intro to JavaScriptIntro to JavaScript
Intro to JavaScriptAaron Lamphere
149 views30 slides

More Related Content

Similar to Simple tricks to improve the performance of your site

Voices that matter: High Performance Web Sites by
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesStoyan Stefanov
1.6K views77 slides
Mehr Performance für WordPress - WordCamp Köln by
Mehr Performance für WordPress - WordCamp KölnMehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WordCamp KölnWalter Ebert
3.8K views57 slides
implement lighthouse-ci with your web development workflow by
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowWordPress
113 views55 slides
Video performance munichfrontend by
Video performance munichfrontendVideo performance munichfrontend
Video performance munichfrontendDoug Sillars
147 views99 slides
High-Speed HTML5 by
High-Speed HTML5High-Speed HTML5
High-Speed HTML5Peter Lubbers
7.9K views62 slides
SVG 101 by
SVG 101SVG 101
SVG 101Sang-Min Yoon
698 views53 slides

Similar to Simple tricks to improve the performance of your site(20)

Voices that matter: High Performance Web Sites by Stoyan Stefanov
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web Sites
Stoyan Stefanov1.6K views
Mehr Performance für WordPress - WordCamp Köln by Walter Ebert
Mehr Performance für WordPress - WordCamp KölnMehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WordCamp Köln
Walter Ebert3.8K views
implement lighthouse-ci with your web development workflow by WordPress
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
WordPress113 views
Video performance munichfrontend by Doug Sillars
Video performance munichfrontendVideo performance munichfrontend
Video performance munichfrontend
Doug Sillars147 views
[html5tx] Adaptive Images in Responsive Web Design by Christopher Schmitt
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
Christopher Schmitt5.3K views
Continues Deployment - Tech Talk week by rantav
Continues Deployment - Tech Talk weekContinues Deployment - Tech Talk week
Continues Deployment - Tech Talk week
rantav1.2K views
HTML5: Are We There Yet? by judyunrein
HTML5: Are We There Yet?HTML5: Are We There Yet?
HTML5: Are We There Yet?
judyunrein169 views
[rwdsummit2012] Adaptive Images in Responsive Web Design by Christopher Schmitt
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design
Christopher Schmitt6.8K views
A holistic approach to web performance by Austin Gil
A holistic approach to web performanceA holistic approach to web performance
A holistic approach to web performance
Austin Gil3K views
Weniger aus Bilder holen by Walter Ebert
Weniger aus Bilder holenWeniger aus Bilder holen
Weniger aus Bilder holen
Walter Ebert1.9K views
AD113 Speed Up Your Applications w/ Nginx and PageSpeed by edm00se
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
edm00se1K views
AWS Webcast - What's New with Amazon Elastic Transcoder by Amazon Web Services
AWS Webcast - What's New with Amazon Elastic TranscoderAWS Webcast - What's New with Amazon Elastic Transcoder
AWS Webcast - What's New with Amazon Elastic Transcoder
Amazon Web Services2.6K views
Probo.ci Drupal 4 Gov Devops 1/2 day Presentation by Zivtech, LLC
Probo.ci Drupal 4 Gov Devops 1/2 day Presentation Probo.ci Drupal 4 Gov Devops 1/2 day Presentation
Probo.ci Drupal 4 Gov Devops 1/2 day Presentation
Zivtech, LLC366 views
Going on an HTTP Diet: Front-End Web Performance by Adam Norwood
Going on an HTTP Diet: Front-End Web PerformanceGoing on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web Performance
Adam Norwood386 views

More from Mauricio Gelves

Introducción a GitFlow by
Introducción a GitFlowIntroducción a GitFlow
Introducción a GitFlowMauricio Gelves
372 views43 slides
Segui questi 10 passi per diventare Freelance con WordPress by
Segui questi 10 passi per diventare Freelance con WordPressSegui questi 10 passi per diventare Freelance con WordPress
Segui questi 10 passi per diventare Freelance con WordPressMauricio Gelves
230 views26 slides
Gutenberg Blocks Development for Programmers with no time by
Gutenberg Blocks Development for Programmers with no timeGutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no timeMauricio Gelves
196 views12 slides
WordPress: el mejor amigo para tu emprendimiento by
WordPress: el mejor amigo para tu emprendimientoWordPress: el mejor amigo para tu emprendimiento
WordPress: el mejor amigo para tu emprendimientoMauricio Gelves
1K views37 slides
Sviluppo dei blocchi di Gutenberg per programmatori senza tempo by
Sviluppo dei blocchi di Gutenberg per programmatori senza tempoSviluppo dei blocchi di Gutenberg per programmatori senza tempo
Sviluppo dei blocchi di Gutenberg per programmatori senza tempoMauricio Gelves
285 views19 slides
Gutenberg Blocks Development for Programmers with NO time by
Gutenberg Blocks Development for Programmers with NO timeGutenberg Blocks Development for Programmers with NO time
Gutenberg Blocks Development for Programmers with NO timeMauricio Gelves
290 views19 slides

More from Mauricio Gelves(20)

Segui questi 10 passi per diventare Freelance con WordPress by Mauricio Gelves
Segui questi 10 passi per diventare Freelance con WordPressSegui questi 10 passi per diventare Freelance con WordPress
Segui questi 10 passi per diventare Freelance con WordPress
Mauricio Gelves230 views
Gutenberg Blocks Development for Programmers with no time by Mauricio Gelves
Gutenberg Blocks Development for Programmers with no timeGutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no time
Mauricio Gelves196 views
WordPress: el mejor amigo para tu emprendimiento by Mauricio Gelves
WordPress: el mejor amigo para tu emprendimientoWordPress: el mejor amigo para tu emprendimiento
WordPress: el mejor amigo para tu emprendimiento
Mauricio Gelves1K views
Sviluppo dei blocchi di Gutenberg per programmatori senza tempo by Mauricio Gelves
Sviluppo dei blocchi di Gutenberg per programmatori senza tempoSviluppo dei blocchi di Gutenberg per programmatori senza tempo
Sviluppo dei blocchi di Gutenberg per programmatori senza tempo
Mauricio Gelves285 views
Gutenberg Blocks Development for Programmers with NO time by Mauricio Gelves
Gutenberg Blocks Development for Programmers with NO timeGutenberg Blocks Development for Programmers with NO time
Gutenberg Blocks Development for Programmers with NO time
Mauricio Gelves290 views
Flexbox y Grid: Los mejores amigos del maquetador by Mauricio Gelves
Flexbox y Grid: Los mejores amigos del maquetadorFlexbox y Grid: Los mejores amigos del maquetador
Flexbox y Grid: Los mejores amigos del maquetador
Mauricio Gelves668 views
Desarrollo de bloques de Gutenberg para programadores con poco tiempo by Mauricio Gelves
Desarrollo de bloques de Gutenberg para programadores con poco tiempoDesarrollo de bloques de Gutenberg para programadores con poco tiempo
Desarrollo de bloques de Gutenberg para programadores con poco tiempo
Mauricio Gelves458 views
Follow these 10 steps to become a freelancer with WordPress by Mauricio Gelves
Follow these 10 steps to become a freelancer with WordPressFollow these 10 steps to become a freelancer with WordPress
Follow these 10 steps to become a freelancer with WordPress
Mauricio Gelves1.7K views
Domina el CSS de tu Web con la ténica BEM (bonito, elegante y molón) by Mauricio Gelves
Domina el CSS de tu Web con la ténica BEM (bonito, elegante y molón) Domina el CSS de tu Web con la ténica BEM (bonito, elegante y molón)
Domina el CSS de tu Web con la ténica BEM (bonito, elegante y molón)
Mauricio Gelves281 views
10 pasos para convertirte en Freelance con WordPress by Mauricio Gelves
10 pasos para convertirte en Freelance con WordPress10 pasos para convertirte en Freelance con WordPress
10 pasos para convertirte en Freelance con WordPress
Mauricio Gelves655 views
Gutenberg: Pros and Cons for this big change in WordPress by Mauricio Gelves
Gutenberg: Pros and Cons for this big change in WordPressGutenberg: Pros and Cons for this big change in WordPress
Gutenberg: Pros and Cons for this big change in WordPress
Mauricio Gelves322 views
Il database di WordPress: Dodici tabelle che servono per fare di tutto e di più. by Mauricio Gelves
Il database di WordPress: Dodici tabelle che servono per fare di tutto e di più.Il database di WordPress: Dodici tabelle che servono per fare di tutto e di più.
Il database di WordPress: Dodici tabelle che servono per fare di tutto e di più.
Mauricio Gelves328 views
Vive de vacaciones con WordPress by Mauricio Gelves
Vive de vacaciones con WordPressVive de vacaciones con WordPress
Vive de vacaciones con WordPress
Mauricio Gelves111 views
Quiero aprender WordPress ¿Por donde empiezo? by Mauricio Gelves
Quiero aprender WordPress ¿Por donde empiezo?Quiero aprender WordPress ¿Por donde empiezo?
Quiero aprender WordPress ¿Por donde empiezo?
Mauricio Gelves335 views
Vive de tus sueños con WordPress by Mauricio Gelves
Vive de tus sueños con WordPressVive de tus sueños con WordPress
Vive de tus sueños con WordPress
Mauricio Gelves299 views
Taller de Iniciación a WordPress by Mauricio Gelves
Taller de Iniciación a WordPressTaller de Iniciación a WordPress
Taller de Iniciación a WordPress
Mauricio Gelves283 views
WordPress Database: What's behind those 12 tables by Mauricio Gelves
WordPress Database: What's behind those 12 tablesWordPress Database: What's behind those 12 tables
WordPress Database: What's behind those 12 tables
Mauricio Gelves726 views
La base de datos de WordPress by Mauricio Gelves
La base de datos de WordPressLa base de datos de WordPress
La base de datos de WordPress
Mauricio Gelves2.3K views

Recently uploaded

Is Entireweb better than Google by
Is Entireweb better than GoogleIs Entireweb better than Google
Is Entireweb better than Googlesebastianthomasbejan
12 views1 slide
WEB 2.O TOOLS: Empowering education.pptx by
WEB 2.O TOOLS: Empowering education.pptxWEB 2.O TOOLS: Empowering education.pptx
WEB 2.O TOOLS: Empowering education.pptxnarmadhamanohar21
16 views16 slides
Marketing and Community Building in Web3 by
Marketing and Community Building in Web3Marketing and Community Building in Web3
Marketing and Community Building in Web3Federico Ast
12 views64 slides
information by
informationinformation
informationkhelgishekhar
9 views4 slides
Building trust in our information ecosystem: who do we trust in an emergency by
Building trust in our information ecosystem: who do we trust in an emergencyBuilding trust in our information ecosystem: who do we trust in an emergency
Building trust in our information ecosystem: who do we trust in an emergencyTina Purnat
106 views18 slides
Affiliate Marketing by
Affiliate MarketingAffiliate Marketing
Affiliate MarketingNavin Dhanuka
16 views30 slides

Recently uploaded(9)

Marketing and Community Building in Web3 by Federico Ast
Marketing and Community Building in Web3Marketing and Community Building in Web3
Marketing and Community Building in Web3
Federico Ast12 views
Building trust in our information ecosystem: who do we trust in an emergency by Tina Purnat
Building trust in our information ecosystem: who do we trust in an emergencyBuilding trust in our information ecosystem: who do we trust in an emergency
Building trust in our information ecosystem: who do we trust in an emergency
Tina Purnat106 views
How to think like a threat actor for Kubernetes.pptx by LibbySchulze1
How to think like a threat actor for Kubernetes.pptxHow to think like a threat actor for Kubernetes.pptx
How to think like a threat actor for Kubernetes.pptx
LibbySchulze15 views
PORTFOLIO 1 (Bret Michael Pepito).pdf by brejess0410
PORTFOLIO 1 (Bret Michael Pepito).pdfPORTFOLIO 1 (Bret Michael Pepito).pdf
PORTFOLIO 1 (Bret Michael Pepito).pdf
brejess04108 views
IETF 118: Starlink Protocol Performance by APNIC
IETF 118: Starlink Protocol PerformanceIETF 118: Starlink Protocol Performance
IETF 118: Starlink Protocol Performance
APNIC354 views

Simple tricks to improve the performance of your site

  • 1. #WCBTN Simple tricks (I always use) to improve the performance of your site Mauricio Gelves - @maugelves
  • 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
  • 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