SlideShare una empresa de Scribd logo
1 de 45
Descargar para leer sin conexión
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Site Speed for Content
Marketers
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Why does site speed matter?
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Just ask your users…
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Every 1 second of improvement
=
Up to a 2% conversion increase.
Reduced page load time by 2.2 seconds
=
Downloads increased by 15.4%
(10 million+ downloads per year)
Source: https://www.thinkwithgoogle.com/articles/speed-is-key-optimize-your-mobile-experience.html
Source: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Today we're including a new signal in our search ranking
algorithms: site speed. Like us, our users place a lot of
value in speed.
We use a variety of sources to determine the speed of a
site relative to other sites.
(April 2010)
Source: https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
What can I do about it?
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
“80 – 90% of the end-user response time is
spent on the frontend. Start there.”
- Steve Souders
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Page Size
Total: 2.3mb
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
(Almost) Live Demo
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Yahoo YSlow + Google PageSpeed rulesets
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Images
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
680px
1024px
JPEG, 95%
680px
1024px
PNG
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Original version
Image optimization
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Images: things to consider
1) Format & Compression– JPEG for photos, PNG for images with
fewer colours / transparency. Balance file size & aesthetics.
2) Dimensions – What is the maximum width and height at which the
image will be displayed?
3) Replacements – “The fastest HTTP request is the one not made.”
Aim to use fonts for text, vector graphics for logos and shapes,
and CSS effects (shadows, gradients, etc.) wherever possible.
Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-
optimization
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Fonts
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Icon Font
(93kb – 166kb)
Inline SVG
(~1kb)
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Read more: https://css-tricks.com/icon-fonts-vs-svg/
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Original version
Image optimization
Font optimization
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Fonts: things to consider
1) Typefaces, Weights, Styles – How many are necessary? Weigh
aesthetics against added requests.
2) Hosting – By using externally hosted fonts (such as Google
Fonts or Typekit), there is a greater chance your visitor will
already have the file cached.
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Scripts & Stylesheets
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
jQuery 2.x has the same API as jQuery 1.x,
but does not support Internet Explorer 6, 7,
or 8.
253kb
84kb
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-
efficiency/optimize-encoding-and-transfer
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Original version
Image optimization
Font optimization
Script minification
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
1) Unnecessary scripts – Clunky social sharing plugins, etc.
2) Minify + concatenate – Make this a part of your build process.
Don’t use development versions of scripts on live site.
3) Caching – Calling popular scripts like jQuery from a CDN
increases chances of caching.
4) Placement – Investigate your critical rendering path.
Scripts: things to consider
Read more: https://developers.google.com/web/fundamentals/performance/critical-
rendering-path/adding-interactivity-with-javascript
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Gzip
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
bootstrap-3.1.1.min.css
98 KB gzip 17 KB
83% saving
Read more: https://developers.google.com/web/fundamentals/performance/optimizing-
content-efficiency/optimize-encoding-and-transfer#text-compression-with-gzip
Instructions: Apache | Nginx | IIS
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Original version
Image optimization
Font optimization
Script minification
Gzip
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
What about mobile?
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
640px 1024px 1920px
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Responsive images with srcset
Read more: https://builtvisible.com/responsive-images-for-busy-people-a-quick-primer/
WordPress: https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Original version
Optimized version
Mobile version
(responsive images)
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Challenges
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
“Performance more often comes down to a
cultural challenge, rather than simply a
technical one.”
- Laura Hogan
Tom Bennet | Head of Product Development | tom@builtvisible.com
On culture: http://designforperformance.com/changing-culture/
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Prefetch / prerender – Do your users follow
predictable navigation paths?
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tip of the iceberg…
Tom Bennet | Head of Product Development | tom@builtvisible.com
© Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Thanks!

Más contenido relacionado

La actualidad más candente

Search engine optimization
Search engine optimizationSearch engine optimization
Search engine optimization
cquinndesign
 

La actualidad más candente (20)

Turn Your WordPress Website into a Traffic Driving Machine
Turn Your WordPress Website into a Traffic Driving MachineTurn Your WordPress Website into a Traffic Driving Machine
Turn Your WordPress Website into a Traffic Driving Machine
 
Search London - The technical factors that every small or local business shou...
Search London - The technical factors that every small or local business shou...Search London - The technical factors that every small or local business shou...
Search London - The technical factors that every small or local business shou...
 
Search engine optimization
Search engine optimizationSearch engine optimization
Search engine optimization
 
PubWest Presentation v1.0
PubWest Presentation v1.0PubWest Presentation v1.0
PubWest Presentation v1.0
 
Found vs. Chosen: How to Earn the Long Click with Content Hubs
Found vs. Chosen: How to Earn the Long Click with Content HubsFound vs. Chosen: How to Earn the Long Click with Content Hubs
Found vs. Chosen: How to Earn the Long Click with Content Hubs
 
How to Make Visual Content on a Shoestring Budget
How to Make Visual Content on a Shoestring BudgetHow to Make Visual Content on a Shoestring Budget
How to Make Visual Content on a Shoestring Budget
 
The Future Of Technical SEO Isn't Your Website
The Future Of Technical SEO Isn't Your WebsiteThe Future Of Technical SEO Isn't Your Website
The Future Of Technical SEO Isn't Your Website
 
Controlling Your Links: How to Build a Private Network
Controlling Your Links: How to Build a Private NetworkControlling Your Links: How to Build a Private Network
Controlling Your Links: How to Build a Private Network
 
The Secret Weapon of Content Marketing: Native Advertising
The Secret Weapon of Content Marketing: Native AdvertisingThe Secret Weapon of Content Marketing: Native Advertising
The Secret Weapon of Content Marketing: Native Advertising
 
Seo copywriting checklist_backlinko
Seo copywriting checklist_backlinkoSeo copywriting checklist_backlinko
Seo copywriting checklist_backlinko
 
Internal website linking and SEO content structure - Tea-Time SEO Series of D...
Internal website linking and SEO content structure - Tea-Time SEO Series of D...Internal website linking and SEO content structure - Tea-Time SEO Series of D...
Internal website linking and SEO content structure - Tea-Time SEO Series of D...
 
London Book Fair v1.0
London Book Fair v1.0London Book Fair v1.0
London Book Fair v1.0
 
How Marketers Can Work With Code
How Marketers Can Work With CodeHow Marketers Can Work With Code
How Marketers Can Work With Code
 
Getting found on Google - WordCamp Asheville 2014
Getting found on Google  - WordCamp Asheville 2014Getting found on Google  - WordCamp Asheville 2014
Getting found on Google - WordCamp Asheville 2014
 
Relevance and the importance of keeping in your lane
Relevance and the importance of keeping in your laneRelevance and the importance of keeping in your lane
Relevance and the importance of keeping in your lane
 
The Ins and Outs of YouTube SEO
The Ins and Outs of YouTube SEOThe Ins and Outs of YouTube SEO
The Ins and Outs of YouTube SEO
 
Fresh Egg Social Media presentation: Google+ and Friends
Fresh Egg Social Media presentation: Google+ and FriendsFresh Egg Social Media presentation: Google+ and Friends
Fresh Egg Social Media presentation: Google+ and Friends
 
Relevance, Trust, Authority - Giving Google What It Wants
Relevance, Trust, Authority - Giving Google What It WantsRelevance, Trust, Authority - Giving Google What It Wants
Relevance, Trust, Authority - Giving Google What It Wants
 
Panda Diet for Overweight Websites
Panda Diet for Overweight WebsitesPanda Diet for Overweight Websites
Panda Diet for Overweight Websites
 
WordPress SEO 101
WordPress SEO 101WordPress SEO 101
WordPress SEO 101
 

Similar a Site speed for content marketers

SPUnite17 Migrating your Customizations from On-prem to SharePoint Online
SPUnite17 Migrating your Customizations from On-prem to SharePoint OnlineSPUnite17 Migrating your Customizations from On-prem to SharePoint Online
SPUnite17 Migrating your Customizations from On-prem to SharePoint Online
NCCOMMS
 

Similar a Site speed for content marketers (20)

Unlocking insights with Google Tag Manager | Tom Bennet | LearnInbound, March...
Unlocking insights with Google Tag Manager | Tom Bennet | LearnInbound, March...Unlocking insights with Google Tag Manager | Tom Bennet | LearnInbound, March...
Unlocking insights with Google Tag Manager | Tom Bennet | LearnInbound, March...
 
Business Success With Core Web Vitals | Izzi Smith
Business Success With Core Web Vitals | Izzi SmithBusiness Success With Core Web Vitals | Izzi Smith
Business Success With Core Web Vitals | Izzi Smith
 
Business Success with Core Web Vitals
Business Success with Core Web VitalsBusiness Success with Core Web Vitals
Business Success with Core Web Vitals
 
Steeltoe and the Open Source .NET Renaissance
Steeltoe and the Open Source .NET RenaissanceSteeltoe and the Open Source .NET Renaissance
Steeltoe and the Open Source .NET Renaissance
 
Umbraco - The Friendly CMS
Umbraco - The Friendly CMSUmbraco - The Friendly CMS
Umbraco - The Friendly CMS
 
Google PageSpeed: 5 Steps to 100% (Mobile) Success
Google PageSpeed: 5 Steps to 100% (Mobile) SuccessGoogle PageSpeed: 5 Steps to 100% (Mobile) Success
Google PageSpeed: 5 Steps to 100% (Mobile) Success
 
Programmable Video Fundamentals
Programmable Video FundamentalsProgrammable Video Fundamentals
Programmable Video Fundamentals
 
SPUnite17 Migrating your Customizations from On-prem to SharePoint Online
SPUnite17 Migrating your Customizations from On-prem to SharePoint OnlineSPUnite17 Migrating your Customizations from On-prem to SharePoint Online
SPUnite17 Migrating your Customizations from On-prem to SharePoint Online
 
Brighton SEO - Site Speed for Content Marketers
Brighton SEO - Site Speed for Content MarketersBrighton SEO - Site Speed for Content Marketers
Brighton SEO - Site Speed for Content Marketers
 
Forge - DevCon 2017, Darmstadt Germany: Innovate with Forge
Forge - DevCon 2017, Darmstadt Germany: Innovate with ForgeForge - DevCon 2017, Darmstadt Germany: Innovate with Forge
Forge - DevCon 2017, Darmstadt Germany: Innovate with Forge
 
Launch Applications the Amazon Way - AWS Online Tech Talks
Launch Applications the Amazon Way - AWS Online Tech TalksLaunch Applications the Amazon Way - AWS Online Tech Talks
Launch Applications the Amazon Way - AWS Online Tech Talks
 
CON307_Building Effective Container Images
CON307_Building Effective Container ImagesCON307_Building Effective Container Images
CON307_Building Effective Container Images
 
Adobe Summit 2017: More Gain, Less Pain - Optimize your content for a better ...
Adobe Summit 2017: More Gain, Less Pain - Optimize your content for a better ...Adobe Summit 2017: More Gain, Less Pain - Optimize your content for a better ...
Adobe Summit 2017: More Gain, Less Pain - Optimize your content for a better ...
 
Optimize Content for a Better Customer Journey
Optimize Content for a Better Customer JourneyOptimize Content for a Better Customer Journey
Optimize Content for a Better Customer Journey
 
From Mainframe to Microservices
From Mainframe to MicroservicesFrom Mainframe to Microservices
From Mainframe to Microservices
 
DevOps on AWS
DevOps on AWSDevOps on AWS
DevOps on AWS
 
DevOps on AWS
DevOps on AWSDevOps on AWS
DevOps on AWS
 
ARC330_How the BBC Built a Massive Media Pipeline Using Microservices
ARC330_How the BBC Built a Massive Media Pipeline Using MicroservicesARC330_How the BBC Built a Massive Media Pipeline Using Microservices
ARC330_How the BBC Built a Massive Media Pipeline Using Microservices
 
re:Invent CON320 Tracing and Debugging for Containerized Services
re:Invent CON320 Tracing and Debugging for Containerized Servicesre:Invent CON320 Tracing and Debugging for Containerized Services
re:Invent CON320 Tracing and Debugging for Containerized Services
 
Innovations fueled by IoT and the Cloud
Innovations fueled by IoT and the CloudInnovations fueled by IoT and the Cloud
Innovations fueled by IoT and the Cloud
 

Más de Builtvisible

Más de Builtvisible (20)

Webinar: How to benefit from changing consumer demand
Webinar: How to benefit from changing consumer demandWebinar: How to benefit from changing consumer demand
Webinar: How to benefit from changing consumer demand
 
GA4 Mini Training Webinar Deck.pdf
GA4 Mini Training Webinar Deck.pdfGA4 Mini Training Webinar Deck.pdf
GA4 Mini Training Webinar Deck.pdf
 
Webinar: How and why to use social media to inform creative content
Webinar: How and why to use social media to inform creative contentWebinar: How and why to use social media to inform creative content
Webinar: How and why to use social media to inform creative content
 
Webinar: How to supercharge local SEO strategies for multi-location businesses
Webinar: How to supercharge local SEO strategies for multi-location businessesWebinar: How to supercharge local SEO strategies for multi-location businesses
Webinar: How to supercharge local SEO strategies for multi-location businesses
 
How to prepare for Google's page experience update
How to prepare for Google's page experience updateHow to prepare for Google's page experience update
How to prepare for Google's page experience update
 
Optimising your faceted navigation to target long-tail keywords
Optimising your faceted navigation to target long-tail keywordsOptimising your faceted navigation to target long-tail keywords
Optimising your faceted navigation to target long-tail keywords
 
Ecommerce quick wins you can implement today to boost SEO performance
Ecommerce quick wins you can implement today to boost SEO performanceEcommerce quick wins you can implement today to boost SEO performance
Ecommerce quick wins you can implement today to boost SEO performance
 
Checking google index status at scale
Checking google index status at scaleChecking google index status at scale
Checking google index status at scale
 
How to build a flexible content strategy
How to build a flexible content strategyHow to build a flexible content strategy
How to build a flexible content strategy
 
How to make change happen in your organisation by talking your devs language
How to make change happen in your organisation by talking your devs languageHow to make change happen in your organisation by talking your devs language
How to make change happen in your organisation by talking your devs language
 
Google for jobs – Matt Hunt's top tips from Tea-time SEO
Google for jobs – Matt Hunt's top tips from Tea-time SEOGoogle for jobs – Matt Hunt's top tips from Tea-time SEO
Google for jobs – Matt Hunt's top tips from Tea-time SEO
 
Crawling ecommerce sites – Maria Camanes' top tips from Tea-time SEO
Crawling ecommerce sites – Maria Camanes' top tips from Tea-time SEOCrawling ecommerce sites – Maria Camanes' top tips from Tea-time SEO
Crawling ecommerce sites – Maria Camanes' top tips from Tea-time SEO
 
Reducing site speed - Rachel Costello's top tips from Tea-time SEO
Reducing site speed - Rachel Costello's top tips from Tea-time SEOReducing site speed - Rachel Costello's top tips from Tea-time SEO
Reducing site speed - Rachel Costello's top tips from Tea-time SEO
 
Webinar: Common challenges with e commerce seo optimisation
Webinar: Common challenges with e commerce seo optimisationWebinar: Common challenges with e commerce seo optimisation
Webinar: Common challenges with e commerce seo optimisation
 
Webinar: Turn browsers to customers with product page improvements
Webinar: Turn browsers to customers with product page improvementsWebinar: Turn browsers to customers with product page improvements
Webinar: Turn browsers to customers with product page improvements
 
Building a culture of measurement: PR Week Breakfast Briefing
Building a culture of measurement: PR Week Breakfast BriefingBuilding a culture of measurement: PR Week Breakfast Briefing
Building a culture of measurement: PR Week Breakfast Briefing
 
PPC Cost Analysis | Search Marketing Summit Australia 2
PPC Cost Analysis | Search Marketing Summit Australia 2PPC Cost Analysis | Search Marketing Summit Australia 2
PPC Cost Analysis | Search Marketing Summit Australia 2
 
Addressing Site Quality | Search Marketing Summit Australia
Addressing Site Quality | Search Marketing Summit AustraliaAddressing Site Quality | Search Marketing Summit Australia
Addressing Site Quality | Search Marketing Summit Australia
 
SEO for Faceted Navigation | Get STAT City Crawl
SEO for Faceted Navigation | Get STAT City CrawlSEO for Faceted Navigation | Get STAT City Crawl
SEO for Faceted Navigation | Get STAT City Crawl
 
Google Tag Manager Can Do What? | SMX London
Google Tag Manager Can Do What? | SMX LondonGoogle Tag Manager Can Do What? | SMX London
Google Tag Manager Can Do What? | SMX London
 

Último

Último (20)

AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 

Site speed for content marketers

  • 1. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Site Speed for Content Marketers Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 2. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Why does site speed matter? Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 3. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Just ask your users… Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 4. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Every 1 second of improvement = Up to a 2% conversion increase. Reduced page load time by 2.2 seconds = Downloads increased by 15.4% (10 million+ downloads per year) Source: https://www.thinkwithgoogle.com/articles/speed-is-key-optimize-your-mobile-experience.html Source: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/
  • 5. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Today we're including a new signal in our search ranking algorithms: site speed. Like us, our users place a lot of value in speed. We use a variety of sources to determine the speed of a site relative to other sites. (April 2010) Source: https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html
  • 6. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential What can I do about it? Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 7. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential “80 – 90% of the end-user response time is spent on the frontend. Start there.” - Steve Souders Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 8. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Page Size Total: 2.3mb
  • 9. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential (Almost) Live Demo Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 10. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 11. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 12. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Yahoo YSlow + Google PageSpeed rulesets
  • 13. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 14. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Images Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 15. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 16. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com 680px 1024px JPEG, 95% 680px 1024px PNG
  • 17. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Original version Image optimization
  • 18. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Images: things to consider 1) Format & Compression– JPEG for photos, PNG for images with fewer colours / transparency. Balance file size & aesthetics. 2) Dimensions – What is the maximum width and height at which the image will be displayed? 3) Replacements – “The fastest HTTP request is the one not made.” Aim to use fonts for text, vector graphics for logos and shapes, and CSS effects (shadows, gradients, etc.) wherever possible. Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image- optimization
  • 19. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Fonts Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 20. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 21. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 22. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 23. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Icon Font (93kb – 166kb) Inline SVG (~1kb)
  • 24. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Read more: https://css-tricks.com/icon-fonts-vs-svg/
  • 25. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Original version Image optimization Font optimization
  • 26. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Fonts: things to consider 1) Typefaces, Weights, Styles – How many are necessary? Weigh aesthetics against added requests. 2) Hosting – By using externally hosted fonts (such as Google Fonts or Typekit), there is a greater chance your visitor will already have the file cached.
  • 27. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Scripts & Stylesheets Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 28. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 29. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8. 253kb 84kb
  • 30. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content- efficiency/optimize-encoding-and-transfer
  • 31. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Original version Image optimization Font optimization Script minification
  • 32. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com 1) Unnecessary scripts – Clunky social sharing plugins, etc. 2) Minify + concatenate – Make this a part of your build process. Don’t use development versions of scripts on live site. 3) Caching – Calling popular scripts like jQuery from a CDN increases chances of caching. 4) Placement – Investigate your critical rendering path. Scripts: things to consider Read more: https://developers.google.com/web/fundamentals/performance/critical- rendering-path/adding-interactivity-with-javascript
  • 33. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Gzip Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 34. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com bootstrap-3.1.1.min.css 98 KB gzip 17 KB 83% saving Read more: https://developers.google.com/web/fundamentals/performance/optimizing- content-efficiency/optimize-encoding-and-transfer#text-compression-with-gzip Instructions: Apache | Nginx | IIS
  • 35. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Original version Image optimization Font optimization Script minification Gzip
  • 36. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 37. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential What about mobile? Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 38. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com 640px 1024px 1920px
  • 39. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Responsive images with srcset Read more: https://builtvisible.com/responsive-images-for-busy-people-a-quick-primer/ WordPress: https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/
  • 40. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Original version Optimized version Mobile version (responsive images)
  • 41. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Challenges Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 42. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential “Performance more often comes down to a cultural challenge, rather than simply a technical one.” - Laura Hogan Tom Bennet | Head of Product Development | tom@builtvisible.com On culture: http://designforperformance.com/changing-culture/
  • 43. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Prefetch / prerender – Do your users follow predictable navigation paths?
  • 44. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tip of the iceberg… Tom Bennet | Head of Product Development | tom@builtvisible.com
  • 45. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Thanks!