September 14th goes down as a very special day in NitroPack's history, with our very first webinar with Google now a reality!
We dedicated this event to all things Core Web Vitals, WordPress, and practical steps for excellent site performance.
The mighty trio Salvatore Denaro (Sr Technical Solutions Consultant @Google), Ivaylo Hristov (CTO & Co-Founder @NitroPack), and Deyan Georgiev (CEO & Co-Founder @NitroPack) discussed the real-world value of good Core Web Vitals in a 60-minute session with over 2000 registered guests.
Our First Joint Webinar With Google: The Backstory
It all started with a friendly meetup at WordCamp Europe 2022, where we exchanged thoughts on the future of the web performance industry.
People define such moments as an "instant click."
As a company that challenges the speed optimization industry from day one, we're 100% committed to helping users understand the ins and outs of site speed improvements.
And what better partner than Google themselves?
Special techniques, demonstrations, insights, and a dedicated Q&A session – read on for the highlights from our exclusive webinar with Google.
Webinar Day!
We had a fantastic turnout with close to 1000 people during the event!
The chat overflowed with greetings from 19+ countries, and we couldn't be happier to welcome this vibrant community.
The 60-minute talk was divided into three parts:
- Core Web Vital Basics & WordPress Sites w/ Salvatore Denaro
- Site Performance & Techniques for Improving Core Web Vitals w/ Ivaylo Hristov
- Open Q&A session to wrap everything up
Read on to scan the highlights of the event.
Get Into the Nuts and Bolts of Core Web Vitals
Salvatore Denaro presented a selection of helpful links for all users to explore the metrics and the CWV methodology in detail:
All links open in a new tab so you can read them at a later time:
FID: https://web.dev/fid/
LCP: https://web.dev/lcp/
CLS: https://web.dev/cls
INP: https://web.dev/inp/
Core Web Vitals Science: https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
Core Web Vitals Methodology: https://web.dev/defining-core-web-vitals-thresholds/
The 3-Legged Stool Analogy
As advised by Sal, maintaining a holistic approach when gathering data is the best way to pinpoint your weak spots and plan for improvements. RUM data, Lab data, and Best Practices are all interconnected and essential for great site performance.
→ Catch that particular part at the 9:04 timestamp.
Improve Core Web Vitals for WordPress
Guests showed huge interest when Sal shared specific tips for the WordPress site owners and web professionals dealing with Core Web Vitals issues.
If you're particularly curious about this presentation section, go ahead and jump to the 11:27 timestamp. It's a gold mine for improvement ideas!
Loading Perception Demo: Optimized vs. Unoptimized Site on Mobile
Ivaylo kicked off with a page loading simulation on a mobile device over a 3G network to demonstrate the page's stability (improvements in CLS and LCP) and speed when optimized.
If you're interested in more before and after results with NitroPack, check our case studies:
Optimizing Fonts on Your Website
He then demonstrated how the most common fix for loading custom fonts on your site might be just a partial solution. Although briefly mentioned, the topic of font optimization regarding speed and performance was a source of heated discussion.
Stay tuned, though! Our development and product team have something in store for this particular challenge.
Get Granular With Your Core Web Vitals
This webinar was all about Core Web Vitals, and it comes as no surprise that Ivaylo proceeded to extend upon ways to improve your metrics.
→ Here's a quick overview of some of his tips that start at 25:46.
1. Improve LCP
2. Improve FID
- Use Chrome Dev Tools to pinpoint offending scripts that need to be replaced/fixed
- Reduce the amount of CSS you ship to your website visitors for faster layout operations
- Layout operations: before (left) & after (right) optimization
3. Improve CLS
- Improve the way you load your text and icon fonts
- Optimize dynamic elements on all website pages
Key Takeaways So Far
To sum it up, seasoned technical professionals from Google and NitroPack agree that good Core Web Vitals and user experience are the results from:
- Making data-driven decisions when deciding on which metrics to improve
- Prioritizing RUM (Real User Monitoring) data over Lab Data
- Following the best practices and guidelines provided by Google
Ask Me Anything!
We closed the webinar with a 20-min Q&A session answering a handful of questions from a hefty list our guests so generously generated.
Here are some of the questions that really stood out to me:
How to increase server response time on low configuration servers running a WordPress website?
If anything, your goal should be to decrease server response time. Do that by adding full page caching to your pages. The next step would be to optimize your database or pinpoint what's holding your application back by disabling all plugins and enabling them one by one. A helpful WordPress plugin to catch the culprit is Query Monitor.
I use a site speed optimization plugin, but PageSpeed still says "Core Web Vitals Failed." Why is that? Does it have to do anything with the 28-day delay?
When implementing site performance improvements, you won't see a next-day change in your stats in RUM data. But you can either monitor your own data or calculate how many days are needed before you see the impact, i.e., you'll need roughly 11 days for a 5% impact to become evident.
I work with a lot of dental clients, and they are obsessed with embedding video into the primary section of their websites above the fold on desktop and not on mobile. With a terrible performance score, this isn't good practice, correct?
In general, it's best to first display an optimized image with a play button and defer it to the embedded video at the bottom of the page.
How to improve LCP for a text block?
As long as you're using compression, text compresses really well. It's best to keep text boxes as simple as possible without adding fancy dynamics.
Why does reading fluctuate - sometimes we have a 92 performance score, and sometimes we have an 87 performance score?
Your readings fluctuate because the connection to the machine running Lighthouse fluctuates. The machine that you're testing is fluctuating. A good rule of thumb is to run Lighthouse three times and take a medium number instead of the highest and lowest ones.
How can I reduce unused JavaScript if the JavaScript is from plugins on my website?
See which plugins have the most negative impact in terms of JS using Chrome DevTools. Remove the culprits and find replacements that are more CSS-forward.
→ Jump straight to 38:21 to watch the Q&A session in full.
If you too have questions you’d like to share with us, please drop them in the comment section here or below the video on Youtube.
