turbo boost your website
TRANSCRIPT
![Page 1: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/1.jpg)
Turbo Boost
Your
Website
![Page 2: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/2.jpg)
hello!
I am Jasper FrumauI am here because I love to talking about webtech
You can find me at @jasperfrumau & imagewize.com
![Page 3: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/3.jpg)
Many sites are like
watching grass grow
1.
![Page 4: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/4.jpg)
2.
Why is speed vital?
![Page 5: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/5.jpg)
Because
� 40% of people abandon a website that takes more than 3 seconds to load.
� If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.
� Google Cares (TTFB <=200 ms)
![Page 6: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/6.jpg)
3.
There are ways to speed
things up
![Page 7: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/7.jpg)
the options
Frontend techniques
� concatenation & minification� CDN - Cloudflare, MaxCDN� image optimization� content delivery: gzip / expire
headers / etags� mobile conscious delivery
Backend Techniques
� memcached (data)� opcache (page rendering)� Device Specific Image Rendering� Varnish / proxy� NGINX� Future: HTTP 2PHP7 / HHVM
![Page 8: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/8.jpg)
4
Front end techniques
![Page 9: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/9.jpg)
Concatenate & Minify
� Browsers only load x no of files at the same time (2 -6 connections)). And servers impose restrictions too so combine them
� Smaller Files are better so minify ‘em. jQuery 1.11.3 minified = 3* smaller than regular uncompressed version
� Render Blocking Files should be minimized
![Page 10: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/10.jpg)
optimize your images
� making images smaller - lossless compression
� Resize if scaled� media queries / srcset
![Page 11: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/11.jpg)
Content Delivery
� Gzip / Deflate� Expire Headers, Cache Control
headers� Mod Page Speed� CDN
![Page 12: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/12.jpg)
5
Backend techniques
![Page 13: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/13.jpg)
Server Side Caching Options
� Memcached Memcache database caching
� Redis Memcache database caching� APC (alternative php cache)
opcode cacher� xCache opcode cacher� Varnish
![Page 14: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/14.jpg)
Google Page Speed With PageSpeed Insights you can identify ways to make your site faster and more mobile-friendly.
Minimize & Concatenate W3 Total Cache, gulp uglify/cssmin,/concat cssminify.com, javascript-minifier.com
Browser InspectorsBuilt-in Browser Developer Tools to analyse sites like Firebug and Chrome DevTools
.htaccess / nginx confweb server configuration rules to make the site snappier and tell browsers what to do
CacheW3 Total Cache (WordPress) , WP Super Cache, Magento Cache Settings, xCache, APC, Redis
Image OptimizersPixelmator, jpegoptim, optipng, Photoshop, Gulp/NPM, EWWW Image Optimizer, RICG Plugin
Tools
![Page 16: Turbo Boost Your Website](https://reader033.vdocuments.mx/reader033/viewer/2022042707/58ebdc1b1a28ab660b8b46fb/html5/thumbnails/16.jpg)
Resources & Bibliography
Loading time facts Kissmetrics
responsiveimages.org
ricg responsive images WordPress plugin
Mobile detect PHP script
Max CDN
W3 Total Cache WordPress Plugin
Varnish cache
Optipng
Jpegoptim
eWWW Optimizer WordPress Plugin
Google PageSpeed
Google Chrome Developer Tools
Pixelmator Saving for the Web with Pixelmator
Photoshop, Affinity Photo, Gimp
https://unsplash.com/ Free high resolution images used in presentation
.htaccess boilerplate (expire headers/gzip and so on on Apache)
NGINX Config File
Varnish Caching
HTTP 2 Implementations
WordPress and PHP 7 at Hongkiat’s Blog