Make Fast Sites
-
Upload
jon-henshaw -
Category
Marketing
-
view
102 -
download
1
Transcript of Make Fast Sites
@henshaw #pubcon
Did you know there was already a standard for web pages called HTML?
It makes AMP markup redundant and unnecessary
@henshaw #pubcon
Identify and test which JS and CSS code is actually being used
@henshaw #pubcon
Google Fonts are great, but they can also slow down your site
@henshaw #pubcon
Consider using system fonts instead
body { font-family:-apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif; }
@henshaw #pubcon
SRCSET can deliver smaller and different images to improve speed and UX
@henshaw #pubcon
SRCSET is an IMG attribute
<img src=“cat.png” alt=“my cat” srcset=“cat-hd.png 2x, cat-sm.png 320w, cat-sm-had.png 320w 2x, cat-med.png 768w, cat-med-hd.png 768 2x”>
@henshaw #pubcon
Specify device width
<img src=“cat.png” alt=“my cat” srcset=“cat-hd.png 2x, cat-sm.png 320w, cat-sm-had.png 320w 2x, cat-med.png 768w, cat-med-hd.png 768w 2x”>
@henshaw #pubcon
Specify Screen Resolution
<img src=“cat.png” alt=“my cat” srcset=“cat-hd.png 2x, cat-sm.png 320w, cat-sm-had.png 320w 2x, cat-med.png 768w, cat-med-hd.png 768w 2x”>
@henshaw #pubcon
WordPress supports SRCSET natively, but it doesn’t work if you want to use different images
@henshaw #pubcon
Compress with ImageOptim https://imageoptim.com/
@henshaw #pubcon
Compress with FileOptimizer https://coywolf.io/fileoptimizer
@henshaw #pubcon
EWWW Image Optimizer https://coywolf.io/ewww
@henshaw #pubcon
Test Gzip https://coywolf.io/gziptest
@henshaw #pubcon
Gzip Resource https://coywolf.io/gzip
@henshaw #pubcon
HTTP/2, CDN, Security, and SSL https://coywolf.io/freessl
@henshaw #pubcon
A good UX is clear, focused and doesn't overwhelm the visitor
@henshaw #pubcon
Pages overloaded with content and numerous ads disorients the visitor.
@henshaw #pubcon
Focus on the primary purpose and consider a linear presentation of content
@henshaw #pubcon
Use prefetch to load pages or resources in the background
<link rel="prefetch" href="/signup-form/ as="html"><link rel="prefetch" href="/js/script.js" as="script">
@henshaw #pubcon
Use prerender for pages you’re confident the user will visit next
<link rel="prerender" href="/tutorial/step-4/">
<link rel="prerender" href="/landingpage/">
@henshaw #pubcon
Adapted from https://makefastsites.com/
@henshaw #pubcon
My next big thing… https://coywolf.marketing/