SlideShare a Scribd company logo
1 of 30
ChrisSimmance
@under2builds
Under2
2 Seconds is the New Slow:
How businesses can build a
better web
http://www.slideshare.net/chrissimmance
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
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
• Why the web is broken
• Common site speed myths
• Bottleneck spotting
• Web dev issue identification
• Questions
WHAT AM I TALKING ABOUT?
under2.agency
under2.agency
under2.agency
under2.agency
under2.agency
under2.agency
under2.agency
under2.agency
• 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
under2.agency
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
PROPER IMAGE OPTIMISATION BEST PRACTICE
under2.agency
Show fullscreen version of non optimised image
• Compression tools
• http://tinypng.com
• https://compressor.io/
• https://imageoptim.com/ (Mac app and website service)
• Test different compression rates to test your results
PROPER IMAGE OPTIMISATION BEST PRACTICE
under2.agency
Show fullscreen version of non optimised image
PROPER IMAGE OPTIMISATION BEST PRACTICE
under2.agency
Show fullscreen version
of 90% optimised image and overlay the filesize in kb
PROPER IMAGE OPTIMISATION BEST PRACTICE
under2.agency
Show fullscreen version
of 80% optimised image and overlay the filesize in kb
PROPER IMAGE OPTIMISATION BEST PRACTICE
under2.agency
Show fullscreen version
of 70% optimised image and overlay the filesize in kb
PROPER IMAGE OPTIMISATION BEST PRACTICE
under2.agency
Show fullscreen version
of 70% optimised image and overlay the filesize in kb
PROPER IMAGE OPTIMISATION BEST PRACTICE
under2.agency
Show fullscreen version
of 70% optimised image and overlay the filesize in kb
under2.agency
https://performance.sucuri.net/
• Shorter CSS selectors and class names = smaller filesize
400bytes 342bytes
276bytes
HOW TO SOLVE SITE SPEED BOTTLENECKS – CSS
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
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
under2.agency
under2.agency
under2.agency
• The web is old and creaky
• Stop being lazy and think more
• Build stuff better for all our sakes
Thanks for your attention
under2.agency
chris@under2.agency
@under2builds

More Related Content

What's hot

Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
Headless SEO: Optimising Next Gen Sites | brightonSEO 2021Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
Headless SEO: Optimising Next Gen Sites | brightonSEO 2021Alex Wright
 
Software Testing for SEO
Software Testing for SEOSoftware Testing for SEO
Software Testing for SEOMichael King
 
SearchLeeds 2019 - Nichola stott - The state of PWAs
SearchLeeds 2019 - Nichola stott - The state of PWAsSearchLeeds 2019 - Nichola stott - The state of PWAs
SearchLeeds 2019 - Nichola stott - The state of PWAsSearchLeeds
 
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...Link-Assistant.Com
 
Nine Things we're Checking for a Mobile First Index by Nichola Stott in The I...
Nine Things we're Checking for a Mobile First Index by Nichola Stott in The I...Nine Things we're Checking for a Mobile First Index by Nichola Stott in The I...
Nine Things we're Checking for a Mobile First Index by Nichola Stott in The I...We Are Marketing
 
How to scale SEO work NOBODY wants to do (including your competitors) to rapi...
How to scale SEO work NOBODY wants to do (including your competitors) to rapi...How to scale SEO work NOBODY wants to do (including your competitors) to rapi...
How to scale SEO work NOBODY wants to do (including your competitors) to rapi...Hamlet Batista
 
Automated Duplicate Content Consolidation with Google Cloud Functions
Automated Duplicate Content Consolidation with Google Cloud FunctionsAutomated Duplicate Content Consolidation with Google Cloud Functions
Automated Duplicate Content Consolidation with Google Cloud FunctionsHamlet Batista
 
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Hamlet Batista
 
SEO for Large/Enterprise Websites - Data & Tech Side
SEO for Large/Enterprise Websites - Data & Tech SideSEO for Large/Enterprise Websites - Data & Tech Side
SEO for Large/Enterprise Websites - Data & Tech SideDominic Woodman
 
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...Izabela Wisniewska
 
Headless CMS – the foundation of modern SEO
Headless CMS – the foundation of modern SEOHeadless CMS – the foundation of modern SEO
Headless CMS – the foundation of modern SEOCory Schmidt
 
11 Advanced Uses of Screaming Frog Nov 2019 DMSS
11 Advanced Uses of Screaming Frog Nov 2019 DMSS11 Advanced Uses of Screaming Frog Nov 2019 DMSS
11 Advanced Uses of Screaming Frog Nov 2019 DMSSOliver Brett
 
The New Renaissance of JavaScript
The New Renaissance of JavaScriptThe New Renaissance of JavaScript
The New Renaissance of JavaScriptHamlet Batista
 
Lessons from the other side
Lessons from the other sideLessons from the other side
Lessons from the other sideTim Plummer
 
Technical SEO for international markets - Leonie Mann - Brighton SEO 2021
Technical SEO for international markets- Leonie Mann - Brighton SEO 2021Technical SEO for international markets- Leonie Mann - Brighton SEO 2021
Technical SEO for international markets - Leonie Mann - Brighton SEO 2021Leonie Mann
 
Inbound 2017: Back to Our Roots with Technical SEO
Inbound 2017: Back to Our Roots with Technical SEOInbound 2017: Back to Our Roots with Technical SEO
Inbound 2017: Back to Our Roots with Technical SEOStephanie Wallace
 

What's hot (18)

Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
Headless SEO: Optimising Next Gen Sites | brightonSEO 2021Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
 
Software Testing for SEO
Software Testing for SEOSoftware Testing for SEO
Software Testing for SEO
 
SearchLeeds 2019 - Nichola stott - The state of PWAs
SearchLeeds 2019 - Nichola stott - The state of PWAsSearchLeeds 2019 - Nichola stott - The state of PWAs
SearchLeeds 2019 - Nichola stott - The state of PWAs
 
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
 
SEO for Large Websites
SEO for Large WebsitesSEO for Large Websites
SEO for Large Websites
 
Nine Things we're Checking for a Mobile First Index by Nichola Stott in The I...
Nine Things we're Checking for a Mobile First Index by Nichola Stott in The I...Nine Things we're Checking for a Mobile First Index by Nichola Stott in The I...
Nine Things we're Checking for a Mobile First Index by Nichola Stott in The I...
 
How to scale SEO work NOBODY wants to do (including your competitors) to rapi...
How to scale SEO work NOBODY wants to do (including your competitors) to rapi...How to scale SEO work NOBODY wants to do (including your competitors) to rapi...
How to scale SEO work NOBODY wants to do (including your competitors) to rapi...
 
Automated Duplicate Content Consolidation with Google Cloud Functions
Automated Duplicate Content Consolidation with Google Cloud FunctionsAutomated Duplicate Content Consolidation with Google Cloud Functions
Automated Duplicate Content Consolidation with Google Cloud Functions
 
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
 
SEO for Large/Enterprise Websites - Data & Tech Side
SEO for Large/Enterprise Websites - Data & Tech SideSEO for Large/Enterprise Websites - Data & Tech Side
SEO for Large/Enterprise Websites - Data & Tech Side
 
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
 
Headless CMS – the foundation of modern SEO
Headless CMS – the foundation of modern SEOHeadless CMS – the foundation of modern SEO
Headless CMS – the foundation of modern SEO
 
11 Advanced Uses of Screaming Frog Nov 2019 DMSS
11 Advanced Uses of Screaming Frog Nov 2019 DMSS11 Advanced Uses of Screaming Frog Nov 2019 DMSS
11 Advanced Uses of Screaming Frog Nov 2019 DMSS
 
The New Renaissance of JavaScript
The New Renaissance of JavaScriptThe New Renaissance of JavaScript
The New Renaissance of JavaScript
 
SEO Meets Automation
SEO Meets AutomationSEO Meets Automation
SEO Meets Automation
 
Lessons from the other side
Lessons from the other sideLessons from the other side
Lessons from the other side
 
Technical SEO for international markets - Leonie Mann - Brighton SEO 2021
Technical SEO for international markets- Leonie Mann - Brighton SEO 2021Technical SEO for international markets- Leonie Mann - Brighton SEO 2021
Technical SEO for international markets - Leonie Mann - Brighton SEO 2021
 
Inbound 2017: Back to Our Roots with Technical SEO
Inbound 2017: Back to Our Roots with Technical SEOInbound 2017: Back to Our Roots with Technical SEO
Inbound 2017: Back to Our Roots with Technical SEO
 

Similar to 2 Seconds is the New Slow - Chris Simmance - under2

Website Optimization How to Increase Page Performance and More
Website Optimization How to Increase Page Performance and More Website Optimization How to Increase Page Performance and More
Website Optimization How to Increase Page Performance and More Boundify
 
Site Performance Optimization - Joomla!
Site Performance Optimization - Joomla!Site Performance Optimization - Joomla!
Site Performance Optimization - Joomla!Hans Kuijpers
 
Front end performance on Shopify.com
Front end performance on Shopify.comFront end performance on Shopify.com
Front end performance on Shopify.comBryson Gilbert
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuningJohn McCaffrey
 
Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Rapid Prototyping with Sass, Compass and Middleman by Bermon PainterRapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Rapid Prototyping with Sass, Compass and Middleman by Bermon PainterCodemotion
 
Delivering Fantastic Brand Experiences With Low-Code
Delivering Fantastic Brand Experiences With Low-CodeDelivering Fantastic Brand Experiences With Low-Code
Delivering Fantastic Brand Experiences With Low-CodeCyber-Duck
 
Introduction to SQL Server Security
Introduction to SQL Server SecurityIntroduction to SQL Server Security
Introduction to SQL Server SecurityJason Strate
 
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...Izabela Wisniewska
 
Stupid Website Redesign Mistakes Your Company Will Make
Stupid Website Redesign Mistakes Your Company Will MakeStupid Website Redesign Mistakes Your Company Will Make
Stupid Website Redesign Mistakes Your Company Will MakeJacob Hagberg
 
Data people services_presentation
Data people services_presentationData people services_presentation
Data people services_presentationDataPeople Limited
 
A Day in the Life of a HipChat Developer
A Day in the Life of a HipChat DeveloperA Day in the Life of a HipChat Developer
A Day in the Life of a HipChat DeveloperAtlassian
 
APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...
APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...
APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...apidays
 
How to build a social network on serverless
How to build a social network on serverlessHow to build a social network on serverless
How to build a social network on serverlessYan Cui
 
Increase Your WordPress Website's Google PageSpeed Score
Increase Your WordPress Website's Google PageSpeed ScoreIncrease Your WordPress Website's Google PageSpeed Score
Increase Your WordPress Website's Google PageSpeed ScoreBrainspire Solutions
 
Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Dave Olsen
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Bastian Grimm
 
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...Branded3
 

Similar to 2 Seconds is the New Slow - Chris Simmance - under2 (20)

Website Optimization How to Increase Page Performance and More
Website Optimization How to Increase Page Performance and More Website Optimization How to Increase Page Performance and More
Website Optimization How to Increase Page Performance and More
 
Site Performance Optimization - Joomla!
Site Performance Optimization - Joomla!Site Performance Optimization - Joomla!
Site Performance Optimization - Joomla!
 
Front end performance on Shopify.com
Front end performance on Shopify.comFront end performance on Shopify.com
Front end performance on Shopify.com
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 
Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Rapid Prototyping with Sass, Compass and Middleman by Bermon PainterRapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
 
Delivering Fantastic Brand Experiences With Low-Code
Delivering Fantastic Brand Experiences With Low-CodeDelivering Fantastic Brand Experiences With Low-Code
Delivering Fantastic Brand Experiences With Low-Code
 
Web Design
Web DesignWeb Design
Web Design
 
Introduction to SQL Server Security
Introduction to SQL Server SecurityIntroduction to SQL Server Security
Introduction to SQL Server Security
 
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
 
Site Man Pro
Site Man ProSite Man Pro
Site Man Pro
 
Stupid Website Redesign Mistakes Your Company Will Make
Stupid Website Redesign Mistakes Your Company Will MakeStupid Website Redesign Mistakes Your Company Will Make
Stupid Website Redesign Mistakes Your Company Will Make
 
Data people services_presentation
Data people services_presentationData people services_presentation
Data people services_presentation
 
A Day in the Life of a HipChat Developer
A Day in the Life of a HipChat DeveloperA Day in the Life of a HipChat Developer
A Day in the Life of a HipChat Developer
 
APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...
APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...
APIdays Barcelona 2019 - How to build a social network on Serverless with Yan...
 
How to build a social network on serverless
How to build a social network on serverlessHow to build a social network on serverless
How to build a social network on serverless
 
Increase Your WordPress Website's Google PageSpeed Score
Increase Your WordPress Website's Google PageSpeed ScoreIncrease Your WordPress Website's Google PageSpeed Score
Increase Your WordPress Website's Google PageSpeed Score
 
Web performance tuning
Web performance tuning Web performance tuning
Web performance tuning
 
Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018
 
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
 

Recently uploaded

Miss Immigrant USA Activity Pageant Program.pdf
Miss Immigrant USA Activity Pageant Program.pdfMiss Immigrant USA Activity Pageant Program.pdf
Miss Immigrant USA Activity Pageant Program.pdfMagdalena Kulisz
 
What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...
What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...
What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...Ahrefs
 
The Evolution of Internet : How consumers use technology and its impact on th...
The Evolution of Internet : How consumers use technology and its impact on th...The Evolution of Internet : How consumers use technology and its impact on th...
The Evolution of Internet : How consumers use technology and its impact on th...sowmyrao14
 
From Chance to Choice - Tactical Link Building for International SEO
From Chance to Choice - Tactical Link Building for International SEOFrom Chance to Choice - Tactical Link Building for International SEO
From Chance to Choice - Tactical Link Building for International SEOSzymon Słowik
 
Research and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdf
Research and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdfResearch and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdf
Research and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdfVWO
 
What’s the difference between Affiliate Marketing and Brand Partnerships?
What’s the difference between Affiliate Marketing and Brand Partnerships?What’s the difference between Affiliate Marketing and Brand Partnerships?
What’s the difference between Affiliate Marketing and Brand Partnerships?Partnercademy
 
SEO Forecasting by Nitin Manchanda at Berlin SEO & Content Club
SEO Forecasting by Nitin Manchanda at Berlin SEO & Content ClubSEO Forecasting by Nitin Manchanda at Berlin SEO & Content Club
SEO Forecasting by Nitin Manchanda at Berlin SEO & Content ClubNitin Manchanda
 
Agencia Marketing Branding Measurement Certification Google Ads Abril 2024
Agencia Marketing Branding Measurement Certification Google Ads Abril 2024Agencia Marketing Branding Measurement Certification Google Ads Abril 2024
Agencia Marketing Branding Measurement Certification Google Ads Abril 2024Marketing BRANDING
 
Ryanair Marketing and business development Plan
Ryanair Marketing and business development  PlanRyanair Marketing and business development  Plan
Ryanair Marketing and business development Plandrkarimsaber
 
social media optimization complete indroduction
social media optimization complete indroductionsocial media optimization complete indroduction
social media optimization complete indroductioninfoshraddha747
 
Agencia Marketing Branding Creative Certification Exam Google Diciembre 2023
Agencia Marketing Branding Creative Certification Exam Google Diciembre 2023Agencia Marketing Branding Creative Certification Exam Google Diciembre 2023
Agencia Marketing Branding Creative Certification Exam Google Diciembre 2023Marketing BRANDING
 
14principles of management by hanry fayol.pptx
14principles of management by hanry fayol.pptx14principles of management by hanry fayol.pptx
14principles of management by hanry fayol.pptxswarajkoli3
 
Prezentare Brandfluence 2023 - Social Media Trends
Prezentare Brandfluence 2023 - Social Media TrendsPrezentare Brandfluence 2023 - Social Media Trends
Prezentare Brandfluence 2023 - Social Media TrendsCristian Manafu
 
SEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise SuccessSEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise SuccessLiv Day
 
Agencia Marketing Branding Examen Fundamentals Digital Marketing Google Abril...
Agencia Marketing Branding Examen Fundamentals Digital Marketing Google Abril...Agencia Marketing Branding Examen Fundamentals Digital Marketing Google Abril...
Agencia Marketing Branding Examen Fundamentals Digital Marketing Google Abril...Marketing BRANDING
 
5 Digital Marketing Tips | Devherds Software Solutions
5 Digital Marketing Tips | Devherds Software Solutions5 Digital Marketing Tips | Devherds Software Solutions
5 Digital Marketing Tips | Devherds Software SolutionsDevherds Software Solutions
 
2024's Top PPC Tactics: Triple Your Google Ads Local Leads
2024's Top PPC Tactics: Triple Your Google Ads Local Leads2024's Top PPC Tactics: Triple Your Google Ads Local Leads
2024's Top PPC Tactics: Triple Your Google Ads Local LeadsSearch Engine Journal
 
TAM Sports IPL 17 Advertising Report- M01 - M23
TAM Sports IPL 17 Advertising Report- M01 - M23TAM Sports IPL 17 Advertising Report- M01 - M23
TAM Sports IPL 17 Advertising Report- M01 - M23Social Samosa
 
Codes and Conventions of Film Magazine Covers.pptx
Codes and Conventions of Film Magazine Covers.pptxCodes and Conventions of Film Magazine Covers.pptx
Codes and Conventions of Film Magazine Covers.pptxGeorgeCulica
 
top marketing posters - Fresh Spar Technologies - Manojkumar C
top marketing posters - Fresh Spar Technologies - Manojkumar Ctop marketing posters - Fresh Spar Technologies - Manojkumar C
top marketing posters - Fresh Spar Technologies - Manojkumar CManojkumar C
 

Recently uploaded (20)

Miss Immigrant USA Activity Pageant Program.pdf
Miss Immigrant USA Activity Pageant Program.pdfMiss Immigrant USA Activity Pageant Program.pdf
Miss Immigrant USA Activity Pageant Program.pdf
 
What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...
What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...
What I learned from auditing over 1,000,000 websites - SERP Conf 2024 Patrick...
 
The Evolution of Internet : How consumers use technology and its impact on th...
The Evolution of Internet : How consumers use technology and its impact on th...The Evolution of Internet : How consumers use technology and its impact on th...
The Evolution of Internet : How consumers use technology and its impact on th...
 
From Chance to Choice - Tactical Link Building for International SEO
From Chance to Choice - Tactical Link Building for International SEOFrom Chance to Choice - Tactical Link Building for International SEO
From Chance to Choice - Tactical Link Building for International SEO
 
Research and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdf
Research and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdfResearch and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdf
Research and Discovery Tools for Experimentation - 17 Apr 2024 - v 2.3 (1).pdf
 
What’s the difference between Affiliate Marketing and Brand Partnerships?
What’s the difference between Affiliate Marketing and Brand Partnerships?What’s the difference between Affiliate Marketing and Brand Partnerships?
What’s the difference between Affiliate Marketing and Brand Partnerships?
 
SEO Forecasting by Nitin Manchanda at Berlin SEO & Content Club
SEO Forecasting by Nitin Manchanda at Berlin SEO & Content ClubSEO Forecasting by Nitin Manchanda at Berlin SEO & Content Club
SEO Forecasting by Nitin Manchanda at Berlin SEO & Content Club
 
Agencia Marketing Branding Measurement Certification Google Ads Abril 2024
Agencia Marketing Branding Measurement Certification Google Ads Abril 2024Agencia Marketing Branding Measurement Certification Google Ads Abril 2024
Agencia Marketing Branding Measurement Certification Google Ads Abril 2024
 
Ryanair Marketing and business development Plan
Ryanair Marketing and business development  PlanRyanair Marketing and business development  Plan
Ryanair Marketing and business development Plan
 
social media optimization complete indroduction
social media optimization complete indroductionsocial media optimization complete indroduction
social media optimization complete indroduction
 
Agencia Marketing Branding Creative Certification Exam Google Diciembre 2023
Agencia Marketing Branding Creative Certification Exam Google Diciembre 2023Agencia Marketing Branding Creative Certification Exam Google Diciembre 2023
Agencia Marketing Branding Creative Certification Exam Google Diciembre 2023
 
14principles of management by hanry fayol.pptx
14principles of management by hanry fayol.pptx14principles of management by hanry fayol.pptx
14principles of management by hanry fayol.pptx
 
Prezentare Brandfluence 2023 - Social Media Trends
Prezentare Brandfluence 2023 - Social Media TrendsPrezentare Brandfluence 2023 - Social Media Trends
Prezentare Brandfluence 2023 - Social Media Trends
 
SEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise SuccessSEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise Success
 
Agencia Marketing Branding Examen Fundamentals Digital Marketing Google Abril...
Agencia Marketing Branding Examen Fundamentals Digital Marketing Google Abril...Agencia Marketing Branding Examen Fundamentals Digital Marketing Google Abril...
Agencia Marketing Branding Examen Fundamentals Digital Marketing Google Abril...
 
5 Digital Marketing Tips | Devherds Software Solutions
5 Digital Marketing Tips | Devherds Software Solutions5 Digital Marketing Tips | Devherds Software Solutions
5 Digital Marketing Tips | Devherds Software Solutions
 
2024's Top PPC Tactics: Triple Your Google Ads Local Leads
2024's Top PPC Tactics: Triple Your Google Ads Local Leads2024's Top PPC Tactics: Triple Your Google Ads Local Leads
2024's Top PPC Tactics: Triple Your Google Ads Local Leads
 
TAM Sports IPL 17 Advertising Report- M01 - M23
TAM Sports IPL 17 Advertising Report- M01 - M23TAM Sports IPL 17 Advertising Report- M01 - M23
TAM Sports IPL 17 Advertising Report- M01 - M23
 
Codes and Conventions of Film Magazine Covers.pptx
Codes and Conventions of Film Magazine Covers.pptxCodes and Conventions of Film Magazine Covers.pptx
Codes and Conventions of Film Magazine Covers.pptx
 
top marketing posters - Fresh Spar Technologies - Manojkumar C
top marketing posters - Fresh Spar Technologies - Manojkumar Ctop marketing posters - Fresh Spar Technologies - Manojkumar C
top marketing posters - Fresh Spar Technologies - Manojkumar C
 

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
  • 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
  • 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
  • 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

  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 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
  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……. 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
  7. 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)
  8. 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)
  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 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.  
  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?