Turbo Boost Your Website

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

thanks!

Any questions?

You can find me at@jasperfrumau

jasper@imagewize.com

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