turbo boost your website
TRANSCRIPT
Turbo Boost
Your
Website
hello!
I am Jasper FrumauI am here because I love to talking about webtech
You can find me at @jasperfrumau & imagewize.com
Many sites are like
watching grass grow
1.
2.
Why is speed vital?
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)
3.
There are ways to speed
things up
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
4
Front end techniques
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
optimize your images
� making images smaller - lossless compression
� Resize if scaled� media queries / srcset
Content Delivery
� Gzip / Deflate� Expire Headers, Cache Control
headers� Mod Page Speed� CDN
5
Backend techniques
Server Side Caching Options
� Memcached Memcache database caching
� Redis Memcache database caching� APC (alternative php cache)
opcode cacher� xCache opcode cacher� Varnish
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
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