SlideShare a Scribd company logo
Practical tips for 2023
How and why ($) to
improve web
performance
How and Why ($) to improve web performance.pdf
3
How do your website users feel?
1 second
loading time
improvement
-14%
users leaving the
website at landing
(bounce rate)
+13%
users reaching
website goals
(conversion rate)
Source: How Renault improved its bounce and conversion rates by measuring and optimizing Largest Contentful Paint

Recommended for you

Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018

This document summarizes the results of performance testing and experiments on the Etsy mobile listing page. It describes testing lazy loading images, reducing CSS file size, switching to SVGs, and reducing JavaScript file size. Synthetic tests and real user monitoring showed improvements in load times, especially on mobile. Further work is still needed to fully optimize frontend performance and architecture to better match the development culture. Performance directly impacts conversion rates, so continued optimization can increase sales.

web performancefront end
Google at WordCamp US: Performance IS User Experience
Google at WordCamp US: Performance IS User ExperienceGoogle at WordCamp US: Performance IS User Experience
Google at WordCamp US: Performance IS User Experience

Google sponsored WordCamp US this year in Nashville, TN. In the booth, Google showed attendees this presentation, which includes data about the state of the WordPress ecosystem. The data comes from HTTP Archive (httparchive.org), which is built on Lighthouse and WebPageTest.

http archivewebpagetestlighthouse
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorOptimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor

This document discusses using edge computing technologies like content delivery networks (CDNs) to overcome technical barriers to SEO implementation and perform edge SEO. CDNs allow SEO implementations to be done serverlessly at the edge without touching origin source code. Examples of edge SEO include dynamically generating meta titles and tags, redirecting, AB testing, collecting pseudo server logs, and dynamically rendering JavaScript to resolve issues. Edge SEO provides benefits like speed, security, and enables implementations that may otherwise be restricted by platforms. Potential issues include impacting all requests and introducing latency, but recent developments have reduced these concerns.

edge seoedge seo dan tayloroptimization 2020
How and Why ($) to improve web performance.pdf
Takeaways 1. Web Performance (Web Vitals)
2. Business impact of Web Vitals
3. Top recommendations for 2023
Andrea Verlicchi
● Tons of websites
● Front-end development
● Web performance
consultant
8 Google Hackathon, London

Recommended for you

Core Web Vitals - Why You Need to Pay Attention
Core Web Vitals - Why You Need to Pay AttentionCore Web Vitals - Why You Need to Pay Attention
Core Web Vitals - Why You Need to Pay Attention

Learn about the following: What Are Core Web Vitals Why They Are Important Today Why They Will Be Critical Next Year How to Improve Them Now The Secret Advantage That No One Is Talking About Why This Is All Good News For Your Website

core web vitalsseointernet marketing
Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]

This document discusses client-side performance optimizations for websites. It begins by explaining how client-side loading accounts for 80-90% of total page load time on average. It then provides an overview of tools for analyzing performance bottlenecks. The document outlines several basic optimization techniques, including reducing HTTP requests, leveraging browser caching through headers and cache busters, optimizing images, prioritizing critical resources, and improving JavaScript and CSS performance. It emphasizes the importance of measuring performance before and after making changes.

wpoclient-side performanceweb performance
Core Web Vitals in Website Design.pdf
Core Web Vitals in Website Design.pdfCore Web Vitals in Website Design.pdf
Core Web Vitals in Website Design.pdf

Wondering what Google’s Core Web Vitals update is about? In this blog, we explain what the metrics are, why they are important, and how you can improve them. https://www.webguru-india.com/blog/core-web-vitals/

professional web designersweb design services
Roadmap 1. Web performance, Search
Engine Optimisation, and
business impact
2. Measuring web performance
3. Quiz game! 🎉
4. Improvement tips for 2023
Web performance, SEO,
and business impact
11
How do your website users feel?
Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Loading
Buy now
First Input Delay (FID)
Interactivity
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Visual stability
Ad
Buy now

Recommended for you

Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications

Todays web front-end applications architecture. All resources shared at the end of presentation. Full sources on: https://lnkd.in/gyQuFKK https://lnkd.in/gZK8Sp3

webpacknodejsreact
MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...

My slides from DrupalJam 2014... About why users abandon your website and best practices to align content and speed to create a fast user experience, and continue to keep it aligned for every release

performance managementdrupalcondrupalconf
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...

Raiders of the Fast Start: Frontend Performance Archeology There are a lot of books, articles, and online tutorials out there with fantastic advice on how to make your websites performant. It all seems easy in theory, but applying best practices to real-world code is anything but straightforward. Diagnosing and fixing frontend performance issues on a large legacy codebase is like being an archaeologist excavating the remains of a lost civilization. You don’t know what you will find until you start digging! Pick up your trowels and come along with Etsy’s Frontend Systems team as we become archaeologists digging into frontend performance on our large, legacy mobile codebase. I’ll share real-life lessons you can use to guide your own excavations into legacy code: What tools and metrics we used to diagnose issues and track progress. How we went beyond server-driven best practices to focus on the client. Which fixes successfully increased conversion, and which didn’t. Our work, like all good archaeology, went beyond artifacts and unearthed new insights into our culture. We at Etsy pride ourselves on our culture of performance, but, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. Based on what we’ve learned, we are making the case for a new, organization-wide, frontend-focused performance culture that will solve the problems we face today.

Google Core Web Vitals - News!
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Loading
Buy now
First Input Delay (FID)
Interactivity
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Visual stability
Ad
Buy now
Good Ok Poor
200 ms 500 ms
Interaction to Next Paint (INP)
March 2024
How does Google know?
Chrome User Experience
(CrUX)
Google Chrome CrUX Report
The Core Web Vitals impact your Google Search ranking
Source: https://developers.google.com/search/blog/2020/11/timing-for-page-experience
Core
Web
Vitals
Mobile friendly
HTTPS
No intrusive interstitials
Search signals for
page experience
Loading
Largest Contentful Paint (LCP)
Interactivity
First Input Delay (FCP)
Visual stability
Cumulative Layout Shift (CLS)
The Core Web Vitals impact the Google search ranking
SISTRIX
Visibility
Index
90%
95%
100%
105%
15/06/2021 27/06/2021 11/07/2021 25/07/2021
Good domains
110%
Google Update
31/08/2021
22/08/2021
08/08/2021
Poor domains
4%
Increase in
ranking
Source: https://www.sistrix.com/blog/core-web-vitals-is-a-measurable-ranking-factor/

Recommended for you

5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season

Retail TouchPoints' 2014 Holiday Connected Consumer Series session presented by Instart Logic #HolidayCCS

instart logicretail touchpointsmobile shopper
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)

This document discusses web performance optimization and provides tips to improve performance. It emphasizes that performance is important for user experience, search engine optimization, conversion rates, and costs. It outlines common causes of performance issues like round-trip times, payload sizes, browser rendering delays, and inefficient JavaScript. Specific recommendations are given to optimize images, stylesheets, scripts, and browser rendering through techniques like compression, caching, deferred loading, and efficient coding practices. A variety of tools for measuring and improving performance are also listed.

pagespeedyslowperformance
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)

Web performance optimization can be done at three levels - general, server-side, and technology. At the general level, techniques include minimizing HTTP requests, optimizing images, minifying files, avoiding redirects and empty sources. Server-side optimizations involve techniques like content delivery networks, cookie-free domains, caching, and gzip compression. At the technology level for dynamic sites like Joomla, optimizations include flushing buffers early and optimizing database queries. Performance can be measured using various online tools.

performance optimizationincrease website speed
Average Google Click-Through Rate (CTR) by Position
Source: https://clictadigital.com/what-is-the-average-google-click-through-rate-by-position/
Position
on
SERP
10
10% 20% 30% 50%
40%
43,32%
37,36%
29,90%
19,38%
10,95%
10,00%
5,28%
4,13%
4,13%
3,11%
0%
Percentage of clicks
9
34,2%
Average increase
in organic traffic
by climbing 1 rank
8
7
6
5
4
3
2
1
High conversion +
low traffic cost
Good performance
Low conversion +
high traffic cost
Poor performance
Success =
Traffic ×
Conversion
Sustainability
Source: CO2 emissions on the Web
Source: CO2 emissions on the Web
Shaving off a single kilobyte in a file that
is being loaded on 2 million pages
reduces CO2 emissions by an estimated
3000 kg per month.
Sustainability
118 kg 5X

Recommended for you

Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018

There are a lot of books, articles, and online tutorials out there with fantastic advice on how to make your websites performant. It all seems easy in theory, but applying best practices to real-world code is anything but straightforward. Diagnosing and fixing frontend performance issues on a large legacy codebase is like being an archaeologist excavating the remains of a lost civilization. You don’t know what you will find until you start digging! Pick up your trowels and come along with Etsy’s Frontend Systems team as we become archaeologists digging into frontend performance on our large, legacy mobile codebase. I’ll share real-life lessons you can use to guide your own excavations into legacy code: What tools and metrics we used to diagnose issues and track progress. How we went beyond server-driven best practices to focus on the client. Which fixes successfully increased conversion, and which didn’t. Our work, like all good archaeology, went beyond artifacts and unearthed new insights into our culture. We at Etsy pride ourselves on our culture of performance, but, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. Based on what we’ve learned, we are making the case for a new, organization-wide, frontend-focused performance culture that will solve the problems we face today. Presentation from https://perfmattersconf.com/

The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018

This presentation by Bastian Grimm is an integral part of SEMrush webinar https://www.semrush.com/webinars/

semrushsite speedhow to make site fast
Best Digital Marketing Course in Faridabad
Best Digital Marketing Course in FaridabadBest Digital Marketing Course in Faridabad
Best Digital Marketing Course in Faridabad

Certainly! Here's a description for your digital marketing course in Faridabad: --- **Master Digital Marketing in Faridabad: Your Gateway to Success** Unlock the power of digital marketing with our comprehensive course in Faridabad. Whether you're a seasoned professional looking to upgrade your skills or a beginner eager to delve into the world of online marketing, our course offers practical insights and hands-on training to propel your career forward. **Why Choose Our Digital Marketing Course?** - **Expert-Led Training:** Learn from industry experts with years of experience in digital marketing strategies, tools, and trends. - **Comprehensive Curriculum:** From SEO and SEM to social media marketing and analytics, our course covers all facets of digital marketing essential for today's businesses. - **Practical Approach:** Gain practical experience through live projects, case studies, and simulations that mirror real-world scenarios. - **Certification:** Earn a valuable certification upon completion, showcasing your expertise and enhancing your credibility in the job market. - **Career Guidance:** Receive personalized career guidance and placement assistance to help you land your dream job or advance within your current role. **Who Should Attend?** - Marketing professionals seeking to specialize in digital marketing. - Entrepreneurs aiming to leverage digital channels for business growth. - Students and recent graduates aspiring to kickstart a career in digital marketing. **Course Details:** - **Duration:** [Specify duration] - **Location:** [Specify location in Faridabad] - **Timing:** [Specify timing options] - **Start Date:** [Specify upcoming start date] **Enroll Today:** Don't miss out on this opportunity to upgrade your skills and accelerate your career in digital marketing. Join our course in Faridabad and become a certified digital marketing expert ready to thrive in the digital age.

digital marketingdigital strategybest outdoor advertising
Measuring
web performance
Real User Monitoring Lab
The big picture,
spot anomalies
Find the cause,
test solutions
Pagespeed
insights
Lighthouse
Chrome User
Experience Report
(CrUX)
The big picture,
spot anomalies
Find the cause,
test solutions
Real User Monitoring Lab
● On every page, while users
browse the web
● Real users, real devices,
connections, locations
● User interactions
● Summary, dashboard
● A single, specific URL
● Emulation, one location
● Detailed! Video, waterfall,
CPU, memory, etc.
● No user interactions
● Immediate results
Lab
Real User Monitoring
The big picture,
spot anomalies
Find the cause,
test solutions

Recommended for you

HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks

These are the slides from my talk "Your WebPerf Sucks" at HK CodeConf 2015 (http://hongkong.codeconf.io) at Science Park in Hong Kong, October 24th. Web Performance is an important aspect of building for the web and this talk highlights different aspects of what is important and what can be done to improve web performance and build faster sites. While mentioning different aspects of possible improvements, the main focus lies on optimising the critical rendering path to get pages on the screen faster and what tools can help to do so.

mobileoptimisationfirst paint
Core web vitals is the thing you should focus on if you own a website in 2021
Core web vitals is the thing you should focus on if you own a website in 2021Core web vitals is the thing you should focus on if you own a website in 2021
Core web vitals is the thing you should focus on if you own a website in 2021

Core Web Vitals will roll out in 2021, we are going to explain the specifics of Core Web Vitals and help you understand how your search rankings will be affected. Here are some actions to take right away!

core web vitalsgoogle core web vitals 2021
Come e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdfCome e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdf

Durante questo talk sulle prestazioni web, scoprirai come rendere il tuo sito web più veloce ed usabile, e come questo comporti un miglioramento dell’esperienza utente e l’aumento della visibilità del tuo sito sui motori di ricerca, riducendo persino i costi di marketing digitale. Andrea condividerà la sua esperienza nel campo delle web performance e fornirà suggerimenti pratici, ad alto impatto e facilmente applicabili alla maggior parte dei siti web su come migliorare le performance nel 2023.

web performancecore web vitalsseo
Quiz time! 🎉
Thanks for playing
Improvement tips
for 2023
● Largest real-world impact
● Relevant and applicable to most sites
● Realistic to implement

Recommended for you

Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxCome e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx

Durante questo talk sulle prestazioni web, scoprirai come rendere il tuo sito web più veloce ed usabile, e come questo comporti un miglioramento dell’esperienza utente e l’aumento della visibilità del tuo sito sui motori di ricerca, riducendo persino i costi di marketing digitale. Andrea condividerà la sua esperienza nel campo delle web performance e fornirà suggerimenti pratici, ad alto impatto e facilmente applicabili alla maggior parte dei siti web su come migliorare le performance nel 2023. Andrea Verlicchi, web performance consultant @ Cognizant Netcentric, ha acquisito una vasta esperienza nel settore lavorando ad ottimizzare le prestazioni web, prima di alcuni tra i più grandi brand nel settore e-commerce della moda e del lusso, poi di clienti nel settore della chimica e dell'automotive. Andrea è da qualche mese Google Developer Expert per le Web Performance, ha scritto di web su importanti riviste online specializzate, e condivide regolarmente quello che ha imparato a conferenze e Meetup, in Italia e all'estero.

web performance
2022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.02022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.0

Responsive images automator, to automatically audit, generate and test responsive images, presentated at CSS Day 2022 in Faenza, Italy.

csscss dayresponsive images
Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standardResponsive images, an html 5.1 standard
Responsive images, an html 5.1 standard

CSS Day 2017 Faenza, Italy. They are a W3C recommendation since novembre 2016, featuring the new "picture" tag and the "srcset" and "sizes" attributes in the "img" tag. In this talk we'll see what they are, how to use them in which cases to prefer what usage, and some best practices to give a boost you your web applications or websites.

lazy loadresponsive imagesbest practices
Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Loading
Buy now
First Input Delay (FID)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now
Ensure the LCP resource
is discoverable 🔍
from the HTML source
72% of mobile pages
LCP element = an image
39% of those images
not discoverable from HTML source
Sources: Web Almanac
● Load the image using an <img> element
with the src or srcset attribute
● Prefer server-side rendering (SSR) over
client-side rendering (CSR)
● If your image needs to be referenced
from an external CSS or JS file,
include it in the HTML source via a
<link rel="preload"> tag.

Recommended for you

Agile CSS development with Compass and Sass
Agile CSS development with Compass and SassAgile CSS development with Compass and Sass
Agile CSS development with Compass and Sass

The document provides an overview of Sass and Compass for agile CSS development. It discusses features of Sass like variables, nesting, mixins, extends and partials. It also covers how Compass, which is built on Sass, provides additional features like sprites, browser prefixes, gradients and animations through mixins. The presentation demonstrates how Sass and Compass can be used to write more maintainable and reusable CSS through these features and tools. It also provides instructions on installing and using Sass, Compass and configuring projects for development.

csssassdevelopment
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 FaenzaSviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza

Queste sono le slide della presentazione "Sviluppo CSS Agile con Compass (SASS)" che si è tenuta al #CSSDay a Faenza (RA) il 27 marzo 2015.

compassfront-end developmentcss
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery

CSS 3 introduces new styles, transforms, transitions, and animations. Transitions allow gradual change between states over time, while animations define automatic transitions through predefined states (keyframes). While CSS 3 works across doctypes, browser support varies, requiring vendor prefixes or JavaScript fallbacks for older browsers. Transitions and animations can enhance UX but should be used judiciously depending on necessity and performance impact.

transitionsweb designcss 3
Ensure the LCP resource
is prioritized 🔺
● Add fetchpriority="high" to the
<img> tag of your LCP image
● Never set loading="lazy" on the
<img> tag of your LCP image
● Defer non-critical resources when
possible
Use a CDN 🌐 to optimize
document and resource
server-time (TTFB)
Serve your content as geographically
close to your users as possible.
Cache that content so recently-requested
content can be served again quickly.

Recommended for you

RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx

Your comprehensive guide to RPA in healthcare for 2024. Explore the benefits, use cases, and emerging trends of robotic process automation. Understand the challenges and prepare for the future of healthcare automation

rpa in healthcarerpa in healthcare usarpa in healthcare industry
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and slides: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx

MuleSoft Meetup on APM and IDP

mulesoftai
● Increase how long content is cached for.
● Cache content indefinitely, and purge the
cache on updates.
● Move dynamic logic from your origin
server to the edge
Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
First Input Delay (FID)
Interactivity
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now
Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
200 ms 500 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
Interaction to Next Paint (INP)
Interactivity
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Stabilità visiva
Ad
Buy now
Avoid or break up 💥
long tasks

Recommended for you

Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and transcript: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx

This is a slide deck that showcases the updates in Microsoft Copilot for May 2024

microsoftmicrosoft copilot
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf

Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 : - Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants. - REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.

genaicloudrgpd
Tasks include rendering, layout, parsing
and compiling and executing scripts.
50ms of main-thread blocking
threshold for a task to be considered “long”.
19 is the median number
of long tasks on mobile
Sources: Web Almanac
● Break up long tasks into smaller ones,
yielding often to the main thread
● Consider using APIs such as
isInputPending and the
Scheduler API.
Avoid unnecessary
🟨 JavaScript
460 kb / page
median of JS code served to each page
Too much Javascript
create an environment where tasks are
competing for the main thread’s attention
Sources: Web Almanac, Optimize LCP / Make it discoverable

Recommended for you

WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

Profile portofolio

Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf

Sustainability requires ingenuity and stewardship. Did you know Pigging Solutions pigging systems help you achieve your sustainable manufacturing goals AND provide rapid return on investment. How? Our systems recover over 99% of product in transfer piping. Recovering trapped product from transfer lines that would otherwise become flush-waste, means you can increase batch yields and eliminate flush waste. From raw materials to finished product, if you can pump it, we can pig it.

pigging solutionsprocess piggingproduct transfers
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference

We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner! We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too! Check out our proposed agenda below 👇👇 08:30 ☕ Welcome coffee (30') 09:00 Opening note/ Intro to UiPath Community (10') Cristina Vidu, Global Manager, Marketing Community @UiPath Dawid Kot, Digital Transformation Lead @Proservartner 09:10 Cloud migration - Proservartner & DOVISTA case study (30') Marcin Drozdowski, Automation CoE Manager @DOVISTA Pawel Kamiński, RPA developer @DOVISTA Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 09:40 From bottlenecks to breakthroughs: Citizen Development in action (25') Pawel Poplawski, Director, Improvement and Automation @McCormick & Company Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company 10:05 Next-level bots: API integration in UiPath Studio (30') Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 10:35 ☕ Coffee Break (15') 10:50 Document Understanding with my RPA Companion (45') Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath 11:35 Power up your Robots: GenAI and GPT in REFramework (45') Krzysztof Karaszewski, Global RPA Product Manager 12:20 🍕 Lunch Break (1hr) 13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30') Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance 13:50 Communications Mining - focus on AI capabilities (30') Thomasz Wierzbicki, Business Analyst @Office Samurai 14:20 Polish MVP panel: Insights on MVP award achievements and career profiling

#uipathcommunity#automation#automationdeveloper
● Use the coverage tool in Chrome
DevTools to find unused code
● If unused because it will be used later,
move to separate bundle - code splitting
● Using a tag manager?
Periodically check your tags.
Avoid large 🐙
rendering updates
Javascript is not the only thing that
can affect your website's responsiveness.
Rendering can be expensive
and can interfere with your website's
ability to respond to user inputs.
Sources: Web Almanac, Optimize LCP / Make it discoverable
● Avoid using
requestAnimationFrame() for doing
any non-visual work.
● Keep your DOM size small.
● Use CSS containment
(contain property)

Recommended for you

Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems

Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states. In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing. Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.

Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence

Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently. Visit- https://onliveserver.com/linux-web-hosting/

cheap linux hosting
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant

Password Rotation in 2024 is still Relevant

passwordmanagementrotation
Google Core Web Vitals
Good Ok Poor
2.5 s 4.0 s
Good Ok Poor
100 ms 300 ms
Largest Contentful Paint (LCP)
Caricamento
Buy now
First Input Delay (FID)
Interattività
Buy now
👆
Good Ok Poor
0.10 0.25
Cumulative Layout Shift (CLS)
Visual stability
Ad
Buy now
Set explicit sizes 🖼
on any content loaded
from the page
Sources: Web Almanac,
0px initial default height
for unsized images
72% of pages
have at least one unsized image
● Explicitly set width and height attributes
(or equivalent CSS properties)
on images
● Use the aspect-ratio CSS property
to reserve space for other lazy loaded
content (ads, embedded videos, etc.)
● If aspect is unknown, use min-height

Recommended for you

Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces

An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)

augmented realitycross realityvirtual reality
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf

Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).

solar storms
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition

The DealBook is our annual overview of the Ukrainian tech investment industry. This edition comprehensively covers the full year 2023 and the first deals of 2024.

Ensure pages are eligible
for back/forward cache
(bfcache) 💭
35% of pages are
ineligible for the bfcache
Sources: Web Almanac
● Check if your pages are eligible for the
bfcache using bfcache tester in DevTools
● Work on the reasons why they are not
Sources: bfcache tester in DevTools
Avoid animations and
transitions 🎞 that use layout-
inducing CSS properties

Recommended for you

Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure

Recent advancements in the NIST-JARVIS infrastructure: JARVIS-Overview, JARVIS-DFT, AtomGPT, ALIGNN, JARVIS-Leaderboard

jarvisjarvis-dftalignn
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time

Is your patent a vanity piece of paper for your office wall? Or is it a reliable, defendable, assertable, property right? The difference is often quality. Is your patent simply a transactional cost and a large pile of legal bills for your startup? Or is it a leverageable asset worthy of attracting precious investment dollars, worth its cost in multiples of valuation? The difference is often quality. Is your patent application only good enough to get through the examination process? Or has it been crafted to stand the tests of time and varied audiences if you later need to assert that document against an infringer, find yourself litigating with it in an Article 3 Court at the hands of a judge and jury, God forbid, end up having to defend its validity at the PTAB, or even needing to use it to block pirated imports at the International Trade Commission? The difference is often quality. Quality will be our focus for a good chunk of the remainder of this season. What goes into a quality patent, and where possible, how do you get it without breaking the bank? ** Episode Overview ** In this first episode of our quality series, Kristen Hansen and the panel discuss: ⦿ What do we mean when we say patent quality? ⦿ Why is patent quality important? ⦿ How to balance quality and budget ⦿ The importance of searching, continuations, and draftsperson domain expertise ⦿ Very practical tips, tricks, examples, and Kristen’s Musts for drafting quality applications https://www.aurorapatents.com/patently-strategic-podcast.html

patentspatent applicationpatent prosecution
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx

Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.

rpa in transportationrpa in transportation industryrpa in transportation sector
15% less likely to have "good" CLS
if you animate any CSS property that
could affect layout
Absolutely positioned elements that
animate top or left will cause layout shifts
Sources: Web Almanac, Optimize LCP / Make it discoverable
● Never animate or transition CSS
properties that require browsers to
update page layout
● Instead of animating top or left,
animate transform:translateX() or
transform:translateY()
Let’s wrap up
2022 © cognizant netcentric
60

Recommended for you

Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...

Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)

user modelinguser profilinguser model
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck

YOUR RELIABLE WEB DESIGN & DEVELOPMENT TEAM — FOR LASTING SUCCESS WPRiders is a web development company specialized in WordPress and WooCommerce websites and plugins for customers around the world. The company is headquartered in Bucharest, Romania, but our team members are located all over the world. Our customers are primarily from the US and Western Europe, but we have clients from Australia, Canada and other areas as well. Some facts about WPRiders and why we are one of the best firms around: More than 700 five-star reviews! You can check them here. 1500 WordPress projects delivered. We respond 80% faster than other firms! Data provided by Freshdesk. We’ve been in business since 2015. We are located in 7 countries and have 22 team members. With so many projects delivered, our team knows what works and what doesn’t when it comes to WordPress and WooCommerce. Our team members are: - highly experienced developers (employees & contractors with 5 -10+ years of experience), - great designers with an eye for UX/UI with 10+ years of experience - project managers with development background who speak both tech and non-tech - QA specialists - Conversion Rate Optimisation - CRO experts They are all working together to provide you with the best possible service. We are passionate about WordPress, and we love creating custom solutions that help our clients achieve their goals. At WPRiders, we are committed to building long-term relationships with our clients. We believe in accountability, in doing the right thing, as well as in transparency and open communication. You can read more about WPRiders on the About us page.

web development agencywpriderswordpress development
2022 © cognizant netcentric
61
How and Why ($) to improve web performance.pdf
● + organic traffic
● + brand perception
● + conversion rate
● – carbon footprint
How and Why ($) to improve web performance.pdf

Recommended for you

Feedback form
Contact us

More Related Content

Similar to How and Why ($) to improve web performance.pdf

Front-End Performance Checklist 2020
Front-End Performance Checklist 2020Front-End Performance Checklist 2020
Front-End Performance Checklist 2020
Harsha MV
 
Lighthouse
LighthouseLighthouse
Lighthouse
Hsin-Hao Tang
 
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5th Finger
 
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
Katie Sylor-Miller
 
Google at WordCamp US: Performance IS User Experience
Google at WordCamp US: Performance IS User ExperienceGoogle at WordCamp US: Performance IS User Experience
Google at WordCamp US: Performance IS User Experience
Rick Viscomi
 
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorOptimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Dan Taylor
 
Core Web Vitals - Why You Need to Pay Attention
Core Web Vitals - Why You Need to Pay AttentionCore Web Vitals - Why You Need to Pay Attention
Core Web Vitals - Why You Need to Pay Attention
TAC Marketing Group
 
Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]
Jakob
 
Core Web Vitals in Website Design.pdf
Core Web Vitals in Website Design.pdfCore Web Vitals in Website Design.pdf
Core Web Vitals in Website Design.pdf
WebGuru Infosystems Pvt. Ltd.
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
Ömer Göktuğ Poyraz
 
MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Katie Sylor-Miller
 
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
G3 Communications
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
Betclic Everest Group Tech Team
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
clickramanm
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Katie Sylor-Miller
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018
Anton Shulke
 
Best Digital Marketing Course in Faridabad
Best Digital Marketing Course in FaridabadBest Digital Marketing Course in Faridabad
Best Digital Marketing Course in Faridabad
vinitrana992
 
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks
Holger Bartel
 
Core web vitals is the thing you should focus on if you own a website in 2021
Core web vitals is the thing you should focus on if you own a website in 2021Core web vitals is the thing you should focus on if you own a website in 2021
Core web vitals is the thing you should focus on if you own a website in 2021
World Web Technology Pvt Ltd
 

Similar to How and Why ($) to improve web performance.pdf (20)

Front-End Performance Checklist 2020
Front-End Performance Checklist 2020Front-End Performance Checklist 2020
Front-End Performance Checklist 2020
 
Lighthouse
LighthouseLighthouse
Lighthouse
 
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
 
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
 
Google at WordCamp US: Performance IS User Experience
Google at WordCamp US: Performance IS User ExperienceGoogle at WordCamp US: Performance IS User Experience
Google at WordCamp US: Performance IS User Experience
 
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorOptimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
 
Core Web Vitals - Why You Need to Pay Attention
Core Web Vitals - Why You Need to Pay AttentionCore Web Vitals - Why You Need to Pay Attention
Core Web Vitals - Why You Need to Pay Attention
 
Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]Client-side Web Performance Optimization [paper]
Client-side Web Performance Optimization [paper]
 
Core Web Vitals in Website Design.pdf
Core Web Vitals in Website Design.pdfCore Web Vitals in Website Design.pdf
Core Web Vitals in Website Design.pdf
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
 
MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
 
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018
 
Best Digital Marketing Course in Faridabad
Best Digital Marketing Course in FaridabadBest Digital Marketing Course in Faridabad
Best Digital Marketing Course in Faridabad
 
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks
 
Core web vitals is the thing you should focus on if you own a website in 2021
Core web vitals is the thing you should focus on if you own a website in 2021Core web vitals is the thing you should focus on if you own a website in 2021
Core web vitals is the thing you should focus on if you own a website in 2021
 

More from Andrea Verlicchi

Come e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdfCome e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdf
Andrea Verlicchi
 
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxCome e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Andrea Verlicchi
 
2022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.02022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.0
Andrea Verlicchi
 
Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standardResponsive images, an html 5.1 standard
Responsive images, an html 5.1 standard
Andrea Verlicchi
 
Agile CSS development with Compass and Sass
Agile CSS development with Compass and SassAgile CSS development with Compass and Sass
Agile CSS development with Compass and Sass
Andrea Verlicchi
 
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 FaenzaSviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Andrea Verlicchi
 
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
Andrea Verlicchi
 

More from Andrea Verlicchi (7)

Come e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdfCome e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdf
 
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxCome e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
 
2022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.02022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.0
 
Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standardResponsive images, an html 5.1 standard
Responsive images, an html 5.1 standard
 
Agile CSS development with Compass and Sass
Agile CSS development with Compass and SassAgile CSS development with Compass and Sass
Agile CSS development with Compass and Sass
 
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 FaenzaSviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
 
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
 

Recently uploaded

RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 

Recently uploaded (20)

RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 

How and Why ($) to improve web performance.pdf

  • 1. Practical tips for 2023 How and why ($) to improve web performance
  • 3. 3 How do your website users feel?
  • 4. 1 second loading time improvement -14% users leaving the website at landing (bounce rate) +13% users reaching website goals (conversion rate) Source: How Renault improved its bounce and conversion rates by measuring and optimizing Largest Contentful Paint
  • 6. Takeaways 1. Web Performance (Web Vitals) 2. Business impact of Web Vitals 3. Top recommendations for 2023
  • 7. Andrea Verlicchi ● Tons of websites ● Front-end development ● Web performance consultant
  • 9. Roadmap 1. Web performance, Search Engine Optimisation, and business impact 2. Measuring web performance 3. Quiz game! 🎉 4. Improvement tips for 2023
  • 10. Web performance, SEO, and business impact
  • 11. 11 How do your website users feel?
  • 12. Google Core Web Vitals Good Ok Poor 2.5 s 4.0 s Good Ok Poor 100 ms 300 ms Largest Contentful Paint (LCP) Loading Buy now First Input Delay (FID) Interactivity Buy now 👆 Good Ok Poor 0.10 0.25 Cumulative Layout Shift (CLS) Visual stability Ad Buy now
  • 13. Google Core Web Vitals - News! Good Ok Poor 2.5 s 4.0 s Good Ok Poor 100 ms 300 ms Largest Contentful Paint (LCP) Loading Buy now First Input Delay (FID) Interactivity Buy now 👆 Good Ok Poor 0.10 0.25 Cumulative Layout Shift (CLS) Visual stability Ad Buy now Good Ok Poor 200 ms 500 ms Interaction to Next Paint (INP) March 2024
  • 14. How does Google know? Chrome User Experience (CrUX) Google Chrome CrUX Report
  • 15. The Core Web Vitals impact your Google Search ranking Source: https://developers.google.com/search/blog/2020/11/timing-for-page-experience Core Web Vitals Mobile friendly HTTPS No intrusive interstitials Search signals for page experience Loading Largest Contentful Paint (LCP) Interactivity First Input Delay (FCP) Visual stability Cumulative Layout Shift (CLS)
  • 16. The Core Web Vitals impact the Google search ranking SISTRIX Visibility Index 90% 95% 100% 105% 15/06/2021 27/06/2021 11/07/2021 25/07/2021 Good domains 110% Google Update 31/08/2021 22/08/2021 08/08/2021 Poor domains 4% Increase in ranking Source: https://www.sistrix.com/blog/core-web-vitals-is-a-measurable-ranking-factor/
  • 17. Average Google Click-Through Rate (CTR) by Position Source: https://clictadigital.com/what-is-the-average-google-click-through-rate-by-position/ Position on SERP 10 10% 20% 30% 50% 40% 43,32% 37,36% 29,90% 19,38% 10,95% 10,00% 5,28% 4,13% 4,13% 3,11% 0% Percentage of clicks 9 34,2% Average increase in organic traffic by climbing 1 rank 8 7 6 5 4 3 2 1
  • 18. High conversion + low traffic cost Good performance Low conversion + high traffic cost Poor performance Success = Traffic × Conversion
  • 20. Source: CO2 emissions on the Web Shaving off a single kilobyte in a file that is being loaded on 2 million pages reduces CO2 emissions by an estimated 3000 kg per month. Sustainability 118 kg 5X
  • 22. Real User Monitoring Lab The big picture, spot anomalies Find the cause, test solutions
  • 23. Pagespeed insights Lighthouse Chrome User Experience Report (CrUX) The big picture, spot anomalies Find the cause, test solutions Real User Monitoring Lab
  • 24. ● On every page, while users browse the web ● Real users, real devices, connections, locations ● User interactions ● Summary, dashboard ● A single, specific URL ● Emulation, one location ● Detailed! Video, waterfall, CPU, memory, etc. ● No user interactions ● Immediate results Lab Real User Monitoring The big picture, spot anomalies Find the cause, test solutions
  • 28. ● Largest real-world impact ● Relevant and applicable to most sites ● Realistic to implement
  • 29. Google Core Web Vitals Good Ok Poor 2.5 s 4.0 s Good Ok Poor 100 ms 300 ms Largest Contentful Paint (LCP) Loading Buy now First Input Delay (FID) Interattività Buy now 👆 Good Ok Poor 0.10 0.25 Cumulative Layout Shift (CLS) Stabilità visiva Ad Buy now
  • 30. Ensure the LCP resource is discoverable 🔍 from the HTML source
  • 31. 72% of mobile pages LCP element = an image 39% of those images not discoverable from HTML source Sources: Web Almanac
  • 32. ● Load the image using an <img> element with the src or srcset attribute ● Prefer server-side rendering (SSR) over client-side rendering (CSR) ● If your image needs to be referenced from an external CSS or JS file, include it in the HTML source via a <link rel="preload"> tag.
  • 33. Ensure the LCP resource is prioritized 🔺
  • 34. ● Add fetchpriority="high" to the <img> tag of your LCP image ● Never set loading="lazy" on the <img> tag of your LCP image ● Defer non-critical resources when possible
  • 35. Use a CDN 🌐 to optimize document and resource server-time (TTFB)
  • 36. Serve your content as geographically close to your users as possible. Cache that content so recently-requested content can be served again quickly.
  • 37. ● Increase how long content is cached for. ● Cache content indefinitely, and purge the cache on updates. ● Move dynamic logic from your origin server to the edge
  • 38. Google Core Web Vitals Good Ok Poor 2.5 s 4.0 s Good Ok Poor 100 ms 300 ms Largest Contentful Paint (LCP) Caricamento Buy now First Input Delay (FID) Interactivity Buy now 👆 Good Ok Poor 0.10 0.25 Cumulative Layout Shift (CLS) Stabilità visiva Ad Buy now
  • 39. Google Core Web Vitals Good Ok Poor 2.5 s 4.0 s Good Ok Poor 200 ms 500 ms Largest Contentful Paint (LCP) Caricamento Buy now Interaction to Next Paint (INP) Interactivity Buy now 👆 Good Ok Poor 0.10 0.25 Cumulative Layout Shift (CLS) Stabilità visiva Ad Buy now
  • 40. Avoid or break up 💥 long tasks
  • 41. Tasks include rendering, layout, parsing and compiling and executing scripts. 50ms of main-thread blocking threshold for a task to be considered “long”. 19 is the median number of long tasks on mobile Sources: Web Almanac
  • 42. ● Break up long tasks into smaller ones, yielding often to the main thread ● Consider using APIs such as isInputPending and the Scheduler API.
  • 44. 460 kb / page median of JS code served to each page Too much Javascript create an environment where tasks are competing for the main thread’s attention Sources: Web Almanac, Optimize LCP / Make it discoverable
  • 45. ● Use the coverage tool in Chrome DevTools to find unused code ● If unused because it will be used later, move to separate bundle - code splitting ● Using a tag manager? Periodically check your tags.
  • 47. Javascript is not the only thing that can affect your website's responsiveness. Rendering can be expensive and can interfere with your website's ability to respond to user inputs. Sources: Web Almanac, Optimize LCP / Make it discoverable
  • 48. ● Avoid using requestAnimationFrame() for doing any non-visual work. ● Keep your DOM size small. ● Use CSS containment (contain property)
  • 49. Google Core Web Vitals Good Ok Poor 2.5 s 4.0 s Good Ok Poor 100 ms 300 ms Largest Contentful Paint (LCP) Caricamento Buy now First Input Delay (FID) Interattività Buy now 👆 Good Ok Poor 0.10 0.25 Cumulative Layout Shift (CLS) Visual stability Ad Buy now
  • 50. Set explicit sizes 🖼 on any content loaded from the page
  • 51. Sources: Web Almanac, 0px initial default height for unsized images 72% of pages have at least one unsized image
  • 52. ● Explicitly set width and height attributes (or equivalent CSS properties) on images ● Use the aspect-ratio CSS property to reserve space for other lazy loaded content (ads, embedded videos, etc.) ● If aspect is unknown, use min-height
  • 53. Ensure pages are eligible for back/forward cache (bfcache) 💭
  • 54. 35% of pages are ineligible for the bfcache Sources: Web Almanac
  • 55. ● Check if your pages are eligible for the bfcache using bfcache tester in DevTools ● Work on the reasons why they are not Sources: bfcache tester in DevTools
  • 56. Avoid animations and transitions 🎞 that use layout- inducing CSS properties
  • 57. 15% less likely to have "good" CLS if you animate any CSS property that could affect layout Absolutely positioned elements that animate top or left will cause layout shifts Sources: Web Almanac, Optimize LCP / Make it discoverable
  • 58. ● Never animate or transition CSS properties that require browsers to update page layout ● Instead of animating top or left, animate transform:translateX() or transform:translateY()
  • 60. 2022 © cognizant netcentric 60
  • 61. 2022 © cognizant netcentric 61
  • 63. ● + organic traffic ● + brand perception ● + conversion rate ● – carbon footprint