On 31 March 2021 I held a talk about the new ranking factory by Google called Core Web Vitals. In this talk I gave a short explanation about Cumulative Layout Shift (CLS), First Input Delay (FID) and Largest Contentful Point (LCP).
The State of Performance in the WordPress EcosystemRick Viscomi
In this talk we will be using these tools to focus on the state of performance in the WordPress ecosystem; is it faster, and more importantly, why or why not?
Google at WordCamp US: Performance IS User ExperienceRick Viscomi
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.
By Claudio Saavedra.
Now that WebKit2 is a core part of Web, the GNOME community has finally closed the gap and can be proud to present its users with a browser of world-class quality. But WebKit2 is just the start: there are plenty of challenges ahead and this is the best time for us to embrace them.
In this talk we discuss the state of Web, the advantages and possibilities that WebKit2 brings to the browser, and our plans for the future.
JavascriptMVC: Another choice of web frameworkAlive Kuo
JavascriptMVC is another client side web MVC framework based on jQuery. It has totally solution to build a web application. This slide will introduce basic features of JavascriptMVC3.2
Core Web Vitals is a guidance from Google to delivering a great user experience on the web. There're three new metrics to define the website has a good experience or not. The metrics are Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.
The State of Performance in the WordPress EcosystemRick Viscomi
In this talk we will be using these tools to focus on the state of performance in the WordPress ecosystem; is it faster, and more importantly, why or why not?
Google at WordCamp US: Performance IS User ExperienceRick Viscomi
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.
By Claudio Saavedra.
Now that WebKit2 is a core part of Web, the GNOME community has finally closed the gap and can be proud to present its users with a browser of world-class quality. But WebKit2 is just the start: there are plenty of challenges ahead and this is the best time for us to embrace them.
In this talk we discuss the state of Web, the advantages and possibilities that WebKit2 brings to the browser, and our plans for the future.
JavascriptMVC: Another choice of web frameworkAlive Kuo
JavascriptMVC is another client side web MVC framework based on jQuery. It has totally solution to build a web application. This slide will introduce basic features of JavascriptMVC3.2
Core Web Vitals is a guidance from Google to delivering a great user experience on the web. There're three new metrics to define the website has a good experience or not. The metrics are Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.
In a world where mobile apps, single page applications and API-based companies are the new normal, what a content management solution needs to do to adapt.
This talk will present 2 years of real world experience using Plone as the CMS component for companies that require some level of content management but integrated with their core solutions.
Inclusive Design for Web Development TeamsShayne Rempel
Is your agency practicing inclusive design? Does inclusive design add measurable value? Learn which testing tools & resources will help increase your agency's value to clients.
It only takes incremental shifts to our existing workflows to make our websites more accessible and user-friendly to all.
A talk briefing on what certifications are available by Google Cloud, why should one consider taking the exams, and what's the best ways to approach it with a sprinkle of personal experience in taking these exams myself.
On May 14th, 2014 David Marshall, Senior Web and Application Developer at the Harvard School of Public Health, gave a talk entitled "Responsive Design: Building for a Modern Web."
David is a senior web and application developer at the Harvard School of Public Health, where he is responsible for maintaining the main website and other web applications. He recently rebuilt the HSPH website to make its design responsive and to reduce page size and load times. His current work focuses on PHP development for the WordPress CMS as well as on CSS3 and HTML5. Prior to joining the web team at HSPH, David’s work as an independent contractor included founding Club Site Solutions, a company that developed specialized websites and online registration systems for private clubs.
Super speed around the globe - SearchLeeds 2018Bastian Grimm
My talk covering some of the very latest in web performance optimisation (paint timings, critical rendering path, custom web fonts, etc.) for technical marketers & SEOs from SearchLeeds 2018.
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...Branded3
Especially in a mobile-first world, fast loading websites are of utmost importance. Also, Google has been very vocal about anything web performance in the last few years and is pushing hard to innovate repeatedly. But performance is so much more! User satisfaction should be the main goal because expectations are clear: You’ve got two to three seconds maximum to deliver, so make it count. During Bastian's SearchLeeds 2018 talk he walked through various advanced topics around web performance optimisation going way beyond Accelerated Mobile Pages (and other short-term solutions) to make any website really, really fast.
Parallel programing in web applications - public.pptxGuy Bary
This presentation is about the intricacies of web performance, obstacles that impact rendering and loading time, and explores solutions that can help to reduce execution bottlenecks and rendering latency.
This presentation covers the basics of the web application execution model, including the modern event loop, v8 and chromium. In addition, we will discuss and highlight APIs that could be used to optimize and monitor web performance.
You Can Work on the Web Patform! (GOSIM 2023)Igalia
Have you ever wanted to work on a web browser? Servo is an experimental web
engine written in Rust. Its small code base and friendly community mean that it
is an ideal project for those looking to dip their toes into the world of web
browser engineering.
In this, Martin Robinson covers the basics of building and running
Servo on your own computer. In addition, we'll take a tour of Servo's main
subsystems and see what kind of work goes into building them. Additionally,
we'll cover a variety of types of contributions to Servo, adapted to different
kinds of experience and specialization. By the end you should have the tools
you need to explore contributing yourself.
(c) GOSIM Workshop 2023
Sept 23-24
Grand Hyatt, Pudong, Shanghai
https://workshop2023.gosim.org/
https://www.bilibili.com/video/BV1Hw411r7Q6/
Optimizing a React application for Core Web VitalsJuan Picado
The performance of your web application can define the success of your website, the core web vitals are key metrics that help you to keep track and improve the user experience. This talk we will see how to optimize and measure a React application performance using some basic techniques, like code splitting with webpack, SEO optimization and bottleneck resolutions with examples.
In a world where mobile apps, single page applications and API-based companies are the new normal, what a content management solution needs to do to adapt.
This talk will present 2 years of real world experience using Plone as the CMS component for companies that require some level of content management but integrated with their core solutions.
Inclusive Design for Web Development TeamsShayne Rempel
Is your agency practicing inclusive design? Does inclusive design add measurable value? Learn which testing tools & resources will help increase your agency's value to clients.
It only takes incremental shifts to our existing workflows to make our websites more accessible and user-friendly to all.
A talk briefing on what certifications are available by Google Cloud, why should one consider taking the exams, and what's the best ways to approach it with a sprinkle of personal experience in taking these exams myself.
On May 14th, 2014 David Marshall, Senior Web and Application Developer at the Harvard School of Public Health, gave a talk entitled "Responsive Design: Building for a Modern Web."
David is a senior web and application developer at the Harvard School of Public Health, where he is responsible for maintaining the main website and other web applications. He recently rebuilt the HSPH website to make its design responsive and to reduce page size and load times. His current work focuses on PHP development for the WordPress CMS as well as on CSS3 and HTML5. Prior to joining the web team at HSPH, David’s work as an independent contractor included founding Club Site Solutions, a company that developed specialized websites and online registration systems for private clubs.
Super speed around the globe - SearchLeeds 2018Bastian Grimm
My talk covering some of the very latest in web performance optimisation (paint timings, critical rendering path, custom web fonts, etc.) for technical marketers & SEOs from SearchLeeds 2018.
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...Branded3
Especially in a mobile-first world, fast loading websites are of utmost importance. Also, Google has been very vocal about anything web performance in the last few years and is pushing hard to innovate repeatedly. But performance is so much more! User satisfaction should be the main goal because expectations are clear: You’ve got two to three seconds maximum to deliver, so make it count. During Bastian's SearchLeeds 2018 talk he walked through various advanced topics around web performance optimisation going way beyond Accelerated Mobile Pages (and other short-term solutions) to make any website really, really fast.
Parallel programing in web applications - public.pptxGuy Bary
This presentation is about the intricacies of web performance, obstacles that impact rendering and loading time, and explores solutions that can help to reduce execution bottlenecks and rendering latency.
This presentation covers the basics of the web application execution model, including the modern event loop, v8 and chromium. In addition, we will discuss and highlight APIs that could be used to optimize and monitor web performance.
You Can Work on the Web Patform! (GOSIM 2023)Igalia
Have you ever wanted to work on a web browser? Servo is an experimental web
engine written in Rust. Its small code base and friendly community mean that it
is an ideal project for those looking to dip their toes into the world of web
browser engineering.
In this, Martin Robinson covers the basics of building and running
Servo on your own computer. In addition, we'll take a tour of Servo's main
subsystems and see what kind of work goes into building them. Additionally,
we'll cover a variety of types of contributions to Servo, adapted to different
kinds of experience and specialization. By the end you should have the tools
you need to explore contributing yourself.
(c) GOSIM Workshop 2023
Sept 23-24
Grand Hyatt, Pudong, Shanghai
https://workshop2023.gosim.org/
https://www.bilibili.com/video/BV1Hw411r7Q6/
Optimizing a React application for Core Web VitalsJuan Picado
The performance of your web application can define the success of your website, the core web vitals are key metrics that help you to keep track and improve the user experience. This talk we will see how to optimize and measure a React application performance using some basic techniques, like code splitting with webpack, SEO optimization and bottleneck resolutions with examples.
During this talk about web performance, you will discover how to make your website faster and more usable, and how this leads to an improvement in user experience and an increase of visibility of your site on search engines, even reducing digital marketing costs.
Andrea will share his extensive web performance experience and provide practical, high-impact, and easily applicable tips on how to improve performance in 2023.
Andrea Verlicchi is a Google Developer Expert for Web Performance, he has extensive experience in this sector, having worked with some of the largest companies in the world to improve their web performance. Andrea writes about the web in important specialized magazines and regularly shares his know-how in conferences and Meetups all over Europe.
The need for Speed: Advanced #webperf - SEOday 2018Bastian Grimm
My deck on #webperf from SEOday 2018 in Cologne. Especially in a mobile-first world, fast loading websites are of outmost importance. Also, Google has been very vocal about anything web performance in the last years and is pushing hard to innovate repeatedly. But performance is so much more! User satisfaction should be the main goal because expectations are clear: You’ve got two seconds maximum to deliver, so make it count. In this deck I will be walking you through various advanced topics around web performance optimisation going way beyond Accelerated Mobile Pages (and other short-term solutions) to make any website really, really fast.
How do you make your Web site blazingly fast? This presentation describes what Google and end-users mean by "fast", and lists some tools to help you get better server response and page load times for your Web site.
9 Useful Things that Every Web Developer Needs to KnowSimobo
The presentation covers the following points:
1) How to check the legitimacy of a website?
2) How to view a website in different screen sizes?
3) How to find what font or color a website is using?
4) How to detect the font of a text present inside an image?
5) How to take a full/custom screenshot and annotate it?
6) How to determine the development quality a website?
7) How to speed up a website?
8) How to optimize code for optimal website performance?
9) How to quickly make a static <div> based design responsive?
Die neuen Bewertungskriterien von Google ab 05 / 2021Phil Marx
Ab Mai 2021 wird Google die Core Web Vitals mehr ins Ranking aufnehmen. Was sind Cumulative Layout Shift, Largest Contentful Paint und First Input Delay für Metriken? Wie werden sie erfasst? Wie kann man die eigene Seite prüfen?
Wie veröffentlicht man einen Podcast unter WordPress? Beim WordPress-Meetup Dortmund habe ich das Plugin Podlove Podcast Publisher vorgestellt und live demonstriert.
Die Präsentation vom WordPress Meetup Berlin am 26. Juli 2018 über besondere Aspekte, die man bei der Umsetzung der DSGVO beim Einsatz von WordPress beachten sollte. Da zu gibt es einige Plugin-Tipps.
WordPress Transients API is a powerful tool for caching data with an expiration date. But you always have to have a look on the database the transients are stored in.
Transients can mess up your and your clients database without any benefit. A poor implementation of transients can slow down the database and consequently the webpage instead.
I want to raise awareness for a lightweight way to use the Transients API. Additionally you’ll get an approach to reduce queries and fragmentation of the database.
Gen Z and the marketplaces - let's translate their needsLaura Szabó
The product workshop focused on exploring the requirements of Generation Z in relation to marketplace dynamics. We delved into their specific needs, examined the specifics in their shopping preferences, and analyzed their preferred methods for accessing information and making purchases within a marketplace. Through the study of real-life cases , we tried to gain valuable insights into enhancing the marketplace experience for Generation Z.
The workshop was held on the DMA Conference in Vienna June 2024.
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBrad Spiegel Macon GA
Brad Spiegel Macon GA’s journey exemplifies the profound impact that one individual can have on their community. Through his unwavering dedication to digital inclusion, he’s not only bridging the gap in Macon but also setting an example for others to follow.
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
2.Cellular Networks_The final stage of connectivity is achieved by segmenting...JeyaPerumal1
A cellular network, frequently referred to as a mobile network, is a type of communication system that enables wireless communication between mobile devices. The final stage of connectivity is achieved by segmenting the comprehensive service area into several compact zones, each called a cell.
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfFlorence Consulting
Quattordicesimo Meetup di Milano, tenutosi a Milano il 23 Maggio 2024 dalle ore 17:00 alle ore 18:30 in presenza e da remoto.
Abbiamo parlato di come Axpo Italia S.p.A. ha ridotto il technical debt migrando le proprie APIs da Mule 3.9 a Mule 4.4 passando anche da on-premises a CloudHub 1.0.
Instagram has become one of the most popular social media platforms, allowing people to share photos, videos, and stories with their followers. Sometimes, though, you might want to view someone's story without them knowing.
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC
Ellisha Heppner, Grant Management Lead, presented an update on APNIC Foundation to the PNG DNS Forum held from 6 to 10 May, 2024 in Port Moresby, Papua New Guinea.
2. Hi there! 👋
Phil Marx
IT specialist
Works with WordPress since 2009
Working with WordPress and Clients since 2018
Twitter: @JustPhilMarx
2
3. Agenda
● One important prerequisite
● Core Web Vitals
○ Cumulative Layout Shift
○ Largest Contentful Paint
○ First Input Delay
● Check your own Core Web Vitals
● General notes for optimizing your site
3
4. Basis for webpage rating by
Google
● Google (likely) uses an Moto G4-engine with slow network
connection (3G)
● Motorola Moto G4:
○ First release: May 2016
○ 360 x 640 Pixel screen size
13
6. Cumulative Layout Shift
● Describes the shift of contents after initial design
○ Dynamic loading of contents
○ Dynamic resizing of widgets
○ Big images without dimension specification
https://web.dev/cls/
15
8. Basis of calculation
● Which percentage of the viewport is affected by the
moving element (impact fraction)?
● By what percentage does the element move (distance
fraction)?
● Values get multiplied and summed up
17
9. Example
● Element takes 50% of
viewport; 75% of
viewport is changed
after move
(Impact Fraction: 0,75)
● Element moved by 25%
(Distance Fraction: 0,25)
● 0,75 x 0,25 = 0,1875
18
Bild: Google, CC BY 4.0
10. Rating
● Rating:
○ <= 0,1: „Good Experience“
○ 0,1 – 0,25: „Needs improvement“
○ > 0,25: „Poor Experience“
● Layout shifts based on user interactions have no impact
(max. 500ms between interaction and shift)
19
https://web.dev/cls/
11. How to avoid CLS?
● Load relevant JS/JavaScript as soon as possible (or inline)
● Define sizes for every picture/content box
● Avoid dynamic layouts with JavaScript (Mansonry!)
● Use dynamic design definitions with CSS (Flexbox / Grid)
● Use CSS animations instead of JavaScript (transform(),
scale())
20
https://web.dev/optimize-cls/
17. How to improve LCP?
● Arrange elements with specific values in the viewport
instead dynamically, where possible (Flexbox/Grid)
● Use small file sizes (for pictures use srcset)
● Use Caching / CDN for big sites
● Preload critical elements ( <link rel=„preload“ …> )
● Load non-critical CSS/JavaScript in footer
26
https://web.dev/optimize-lcp/
19. First Input Delay
● Describes the delay between user interaction and reaction
of your browser
○ Browser has to process JavaScript / CSS
○ Main Thread can only handle one task
○ If Javascript / CSS is processed, a click on a link can‘t
be processed
https://web.dev/fid/
28
21. Rating
● Time between interaction and reaction of the browser
○ <= 100ms: „Good“
○ 100ms – 300ms: „Needs Improvement“
○ > 300ms: „Poor“
30
https://web.dev/fid/
22. How to improve FID?
● Keep your site structure simple
● Avoid complex JavaScript / CSS files
● Split up big files to smaller chunks
● Avoid external contents like Like-Button
● Load uncritical files in footer
31
https://web.dev/optimize-fid/
29. Have a good basis
● Fast webserver / database
● Only use necessary CSS / JavaScript files
● Use CSS animation or Vanilla JavaScript instead of
complex librarys (jQuery)
● Avoid external libraries
● Avoid unnecessary plugins / multi purpose themes
● Optimize your pictures for web usage
● Keep your code streamlined
38
30. Plugin-Tipps
● Caching / Optimization plugins (WP Rocket / Autoptimize)
● Select which JavaScript to load (Asset Cleanup)
● WP CLI -> Profile-Command
● No plugin can enhance a bad basis / bad code
significantly
39
31. 40
Thanks! 👋
Quetions? Just ask!
@JustPhilMarx / webfalken.de
Thanks to SlidesCarnival for Slides template and Icons (CC BY 4.0)
Editor's Notes
BERT: Bidirectional Encoder Representations from Transformers / Neurales Netz für Natural Language Processing
Moto G4 seit Chrome v81 (Mai 2020) Standard in Entwicklungs-Tools/Lighthouse