2 Seconds is the New Slow - Chris Simmance - under2

Editor's Notes

1. THE WEB – WHAT IS IT?
2. 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.
3. 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.
4. THE WEB – THE KEY ISSUES It is not used as originally intendedIt 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
5. 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
6. THE WEB – THE FUTURE The future of the web is……. SlowToo 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 changesLaying more, wider and more packed cables. EXPENSIVE
7. Using heavy media without compressionImages, tools, video fonts Over reliance on 3rd party APIs and toolsAn 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 thingsLots 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 impactPlugins 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 needsThe 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 themesAs above showing a site that is built on a page builder and premium theme that’s slow (Show WP and Squarespace)
8. Speed plugins are not the be-all and end-allStats on the number of users of each pluginWP SuperCache – 1.3miWP Rocket – 463kW3 Total Cache – 1.2miAutoptimize – 650k Many speed plugins have other factors such as PHP and SQL look ups that can negate some of the impactShane 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 issuePackage 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)
9. 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
10. Shared server bandwidth:Dedicated – You own 100% of the resources of that siteVPS – 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 ServerSome hosting companies do not allow this type of cachingOur 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.  
11. 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
12. 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
13. Original Image 655kb
14. 90% - 549kb
15. 80% - 318kb
16. 70% - 229kb
17. 60% - 181kb
18. 50% - 150kb
19. 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
20. 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
21. 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
22. HOW TO SOLVE SITE SPEED BOTTLENECKS – Requests
23. 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 
24. 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?
25. 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?