2 Seconds is the New Slow - Chris Simmance - under2
•Download as PPTX, PDF•
3 likes•2,186 views
Slides on site speed from BrightonSEO
Recommended
Recommended
More Related Content
What's hot
What's hot (18)
Similar to 2 Seconds is the New Slow - Chris Simmance - under2
Similar to 2 Seconds is the New Slow - Chris Simmance - under2 (20)
Recently uploaded
Recently uploaded (20)
2 Seconds is the New Slow - Chris Simmance - under2
- 1. ChrisSimmance @under2builds Under2 2 Seconds is the New Slow: How businesses can build a better web http://www.slideshare.net/chrissimmance
- 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. 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. • Why the web is broken • Common site speed myths • Bottleneck spotting • Web dev issue identification • Questions WHAT AM I TALKING ABOUT? under2.agency
- 10. under2.agency
- 11. under2.agency
- 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. under2.agency
- 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. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of non optimised image
- 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. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of non optimised image
- 18. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of 90% optimised image and overlay the filesize in kb
- 19. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of 80% optimised image and overlay the filesize in kb
- 20. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of 70% optimised image and overlay the filesize in kb
- 21. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of 70% optimised image and overlay the filesize in kb
- 22. PROPER IMAGE OPTIMISATION BEST PRACTICE under2.agency Show fullscreen version of 70% optimised image and overlay the filesize in kb
- 24. • Shorter CSS selectors and class names = smaller filesize 400bytes 342bytes 276bytes HOW TO SOLVE SITE SPEED BOTTLENECKS – CSS
- 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. 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. under2.agency
- 28. under2.agency
- 29. under2.agency • The web is old and creaky • Stop being lazy and think more • Build stuff better for all our sakes
- 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?