Successfully reported this slideshow.
Your SlideShare is downloading. ×

2 Seconds is the New Slow - Chris Simmance - under2

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

2 Seconds is the New Slow - Chris Simmance - under2

  1. 1. ChrisSimmance @under2builds Under2 2 Seconds is the New Slow: How businesses can build a better web http://www.slideshare.net/chrissimmance
  2. 2. We’re Under2 Digital: We existto build fast stuff for the web Whether that’s a website, plugin or tool We can build it and make it fast. No Bloat, No BS, Just quality dev work at fair prices Everything loads in Under 2 seconds! WHO AREWE? under2.agency
  3. 3. I’m Chris Simmance • I love Digital • I run Under2 • I’ve worked with some great brands • I have a technology addiction • I also have an awesome dog! • I speak at top events WHO AM I? under2.agency
  4. 4. • Why the web is broken • Common site speed myths • Bottleneck spotting • Web dev issue identification • Questions WHAT AM I TALKING ABOUT? under2.agency
  5. 5. under2.agency
  6. 6. under2.agency
  7. 7. under2.agency
  8. 8. under2.agency
  9. 9. under2.agency
  10. 10. under2.agency
  11. 11. under2.agency
  12. 12. • Speed plugins are not the be-all and end-all • Many speed plugins have other factors such additional PHP and SQL look ups that can negate some of the impact • Image optimisation plugins sound great, but sometimes aren’t! under2.agency
  13. 13. under2.agency
  14. 14. under2.agency 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
  15. 15. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of non optimised image
  16. 16. • Compression tools • http://tinypng.com • https://compressor.io/ • https://imageoptim.com/ (Mac app and website service) • Test different compression rates to test your results
  17. 17. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of non optimised image
  18. 18. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of 90% optimised image and overlay the filesize in kb
  19. 19. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of 80% optimised image and overlay the filesize in kb
  20. 20. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of 70% optimised image and overlay the filesize in kb
  21. 21. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of 70% optimised image and overlay the filesize in kb
  22. 22. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of 70% optimised image and overlay the filesize in kb
  23. 23. under2.agency https://performance.sucuri.net/
  24. 24. • Shorter CSS selectors and class names = smaller filesize 400bytes 342bytes 276bytes HOW TO SOLVE SITE SPEED BOTTLENECKS – CSS
  25. 25. under2.agency • Minification • Concatenation • Refactoring your code down to make the same functionality in less code • Removing JS plugins that are not needed. • Only including functionality on pages that it's needed on HOW TO SOLVE SITE SPEED BOTTLENECKS – JS
  26. 26. under2.agency • Remove anything that you don’t need • Merge multiple CSS files into as few as possible • Merge multiple JS files in as few as possible – then async or defer • Optimise images for less requests • Lazy load images below the fold • Move external scripts into Google Tag Manager or load after page load HOW TO SOLVE SITE SPEED BOTTLENECKS – Requests
  27. 27. under2.agency
  28. 28. under2.agency
  29. 29. under2.agency • The web is old and creaky • Stop being lazy and think more • Build stuff better for all our sakes
  30. 30. Thanks for your attention under2.agency chris@under2.agency @under2builds

Editor's Notes

  • THE WEB – WHAT IS IT?
  • These are the current internet cables that allow for connections worldwide. These are only the sea cables, there are many many trunk cables over land too.
  • This is the map of the most recent audit of the UK’s trunk cables. There are many many more cables that provide businesses and homes with the net.
  • THE WEB – THE KEY ISSUES
    It is not used as originally intended It was originally intended to be used for sharing of non-real time plain text resources and educational papers etc the high bandwidth items now being sent are only able to be coped with due to the new capabilities of the fibreoptics and compression tools. There is a diminishing return as the pipes cannot keep being laid and compression can only go so far.
     
    Instead of using the faster speeds to offer better experiences, websites now fit in more “stuff” onto pages. More tracking scripts to sell you stuff, more images, more video, more feeds from other sources, more faff because of lazy developers.
     
     
    For example, 1 CNN article has: - 11 web fonts = 444KB - 4 stylesheets = 314KB - 20 different frames - 29 XML HTTP requests = 500KB
  • The internet infrastructure is not built for heavy media files
    There are security risks on the physical cables that need mitigating
    The number of people online is only going to increase
    Currently 50%+ of the traffic on the web is robots, this will grow

    IoT is only adding to this strain

    The pipes themselves are almost 20 years old now
  • THE WEB – THE FUTURE

    The future of the web is……. Slow Too much pushing through a shit network
    Net Neutrality? Paying for access on faster pipes and nodes to get websites faster. 2 tier web for those who pay for speed and those who don’t.

    The use of satellite? Using microwave satellites can transmit 1000GBPs pass data long distances

    Brute force changes Laying more, wider and more packed cables. EXPENSIVE

  • Using heavy media without compression Images, tools, video fonts
    Over reliance on 3rd party APIs and tools An API has to be called, sent and then loaded. If the API has low bandwidth or if it were high traffic volumes then it will load slowly.
    People want shiny things Lots of new tech that people like to adopt isn’t always as optimal for the user or load time but early adoption is a natural state of people.
    Installing lots of plugins and widgets without considering the impact Plugins often have SQL or PHP calls that require lots of lookups and thus slow things down. Shane to go into more detail

    Using free code sources that are not optimal for their needs The likes of Twitter Bootstrap – Shane to give a live example of a site using it and the elements it wastes
    Same goes for the use of free or premium web themes As above showing a site that is built on a page builder and premium theme that’s slow (Show WP and Squarespace)

  • Speed plugins are not the be-all and end-all Stats on the number of users of each plugin WP SuperCache – 1.3mi WP Rocket – 463k W3 Total Cache – 1.2mi Autoptimize – 650k
    Many speed plugins have other factors such as PHP and SQL look ups that can negate some of the impact Shane to run through these stats
    Caching should be done at server level rather than locally (DON’T JUST CACHE – MEMCACHE, REDISCACHE, VARNISH, OBJECT CACHE) Shane to run through why this is the case and take questions – this is explained in detail later on
    Image optimisation plugins sound great, but aren’t! Onto next slide
    What are typical hosting issues? To many sites on the same server, too many apache processes running = slower response times. Cheap hosting etc
    How to ensure hosting isn’t the load time issue Package to suit the needs of the user. TTFB The faster the server and the more well connected the data center, the better your time to first byte and server response times.
    When is a fast host is not the issue? Fast hosts aren’t fast if you’re using PHP v5 of out of date code for example Explained in detail later on in the silides
    Shared hosting or not shared hosting? Is shared hosting ever a suitable option (Viruses and GDPR)
  • When an issue or group of issues cause a ‘blockage’ that restricts the flow of data
    Common bottlenecks include

    Shared server bandwidth

    Out of date server software

    Reliance on shared resources (APIs)

    Trying to send too much through the pipe (HTTP Requests)

    Poorly coded websites EXAMPLE 2.2k rebuilt to 17 lines 59% of the code was bloat and the rest was lazy front end code from pagebuilder

    Tools available online - Gtmetrics, Pingdom etc 
    Server tools – NewRelic, Command line tools etc
    Browse around the staging server to see if it's sluggish



  • Shared server bandwidth: Dedicated – You own 100% of the resources of that site VPS – You own 100% of the resources on the site and can host multiple sites on there, you control the sites this server shares the resource with.
    Reliance on 3rd party software: External Scripts with Google Tag Manager
    Create a new tag and give it a relevant name
    Choose Custom HTML tag type
    Paste in your external script into the HTML area
    In the Trigger Configuration choose to fire this tag on DomReady
    Change the triggering to trigger on all pages or choose selected pages
    DEFER OR ASYNC IT
    DO YOU REALLLY NEED IT TO DO A TASK OR IS IT LAZINESS?
    Out of date server software: Server software - Apache, IIS etc  DB Software  Language Processors – PHP, IIS, Ruby, etc
    PHP = 83.5% of the internet PHP 5.5 IS END OF LIFE AND NO LONGER SUPPORTED FOR SPEED/SECURITY
    Up to date server software also good for security as well as speed increases. Chart shows requests per second (rps) for a WordPress website
     
     
    Compression of images, files and headers  GZIP - CAN BE DONE ON CPANNEL VIA COMPRESSION LINK OR BY ADDING CODE TO .HTACCESS ON APACHE. SLIGHTLY DIFFERENT ON NGINX niginx.conf file add the following GZIP ON;
    Server Caching: The best option
    Server caching works as a proxy server between the content and the users
    Usually stores flat files in the cache for additional speed an minimal server resource
    Files are periodically checked vs file server to keep cache up to date.
    Varnish cache is the most popular
    File Caching: Has a similar approach to Server Caching just without the Proxy Server Some hosting companies do not allow this type of caching Our hosting, WP Engine and some others actually Ban Caching plugins

    Browser Caching: Still requires the server hit on the first load then stores files on the users machine.
     
  • HOW TO SOLVE SITE SPEED BOTTLENECKS - Images


    Proper image optimisation: JPG
    PNG
    GIF
    SVG – Can be added with no HTTP requests

    New / Modern image types

    Progressive JPEG: Increases in quality during load – fade in effect - Not supported in older browsers. A tickbox on PSD
    WebP - Google Image format: Typically 26% smaller than PNG's and 25-36% smaller than Jpegs - Some CDN's have WebP enabled by default

    Base64 encoding: Can load images without an HTTP request BUT does in fact increase the HTML size of the page. Don’t use for all images
  • Proper image optimisation: JPG
    PNG
    GIF
    SVG – Can be added with no HTTP requests

    New / Modern image types

    Progressive JPEG: Increases in quality during load – fade in effect - Not supported in older browsers. A tickbox on PSD
    WebP - Google Image format: Typically 26% smaller than PNG's and 25-36% smaller than Jpegs - Some CDN's have WebP enabled by default

    Base64 encoding: Can load images without an HTTP request BUT does in fact increase the HTML size of the page. Don’t use for all images
  • Original Image 655kb
  • 90% - 549kb
  • 80% - 318kb
  • 70% - 229kb
  • 60% - 181kb
  • 50% - 150kb
  • HOW TO SOLVE SITE SPEED BOTTLENECKS – TTFB & HTML


    Cutting down TTFB:
    Increase your server RAM

    Increase your server CPU

    Better hosting

    CDN's

    Rule of thumb – Under 100ms is pretty good

    https://performance.sucuri.net/ 
    Using only the essential HTML needed with no bloat: - CNN Code – 168 lines of code 23.39kb - My rewrite – 49 lines of code @ 2.09kb (1.62kb minified)

    Reducing CSS and JS weights

    Reducing HTTP requests

    CDNs
  • Minification
    Shorter CSS selectors and class names = smaller filesize
    Use of shorthand CSS
    CSS Specificity
    Above the fold content

    Forward thinking on functionality of the site and creating common code blocks for your HTML that use the same CSS rather than individual CSS
    ALTERNATIVELY USE SHORTHAND
  • HOW TO SOLVE SITE SPEED BOTTLENECKS – JS

    Not needed = Do you really need a lighbox plugin when you can create your own basic one with a few lines of code
  • HOW TO SOLVE SITE SPEED BOTTLENECKS – Requests
  • HOW TO SOLVE SITE SPEED BOTTLENECKS – CDN

    Creates copies of your site on various servers around the world. 
    Allows users a shorter path to view your content 
  • HOW TO SOLVE SITE SPEED BOTTLENECKS – CDN


    Look at developers previous work for warning signs
    Send over a list of requirements early on
    Keep on top of the development team to ensure the list isn’t missed

    Keep communication really clear and include everyone

    Always keep asking about the speed of the site during development

    Are they building your site with an off the shelf theme or framework?

    Are they using any CSS frameworks like Bootstrap, Foundation etc?

    Are the really building your website with speed at the forefront?

    Are they doing everything right with image optimisation




    Off the shelf frameworks include EVERYTHNG even if you're only using 10% of the theme

    Example for WordPress, are they creating specific thumbnail sized based on your designs or are they shrinking larger images in the browser to fit a smaller space?
  • WHAT’S MY POINT AFTER ALL THIS?

    Look at developers previous work for warning signs
    Send over a list of requirements early on
    Keep on top of the development team to ensure the list isn’t missed

    Keep communication really clear and include everyone

    Always keep asking about the speed of the site during development

    Are they building your site with an off the shelf theme or framework?

    Are they using any CSS frameworks like Bootstrap, Foundation etc?

    Are the really building your website with speed at the forefront?

    Are they doing everything right with image optimisation




    Off the shelf frameworks include EVERYTHNG even if you're only using 10% of the theme

    Example for WordPress, are they creating specific thumbnail sized based on your designs or are they shrinking larger images in the browser to fit a smaller space?

×