How to improve Core Web Vitals on a WordPress website
•Als PPTX, PDF herunterladen•
0 gefällt mir•1,778 views
Talk by Louise at SEO Brighton in April 2022. It is really easy to design and build a beautiful but slow WordPress website! The Google update for Core Web Vitals is a set of SEO ranking signals to help website owners improve the speed and user experience for their website. In this talk Louise will share with you how to adjust your WordPress site to improve your Core Web Vital scores. The strategies are different for each metric so she will go through each one and give you some practical ideas you can take back and action or ask your developer to implement.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie How to improve Core Web Vitals on a WordPress website
Ähnlich wie How to improve Core Web Vitals on a WordPress website (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
How to improve Core Web Vitals on a WordPress website
- 1. How to improve Core Web Vitals on a WordPress website Louise Towler | Indigo Tree Digital SLIDESHARE.NET/LOUISETOWLER1 @INDIGOTREESAYS / @LOUISETOWLER
- 4. @louisetowler / @indigotreesays What areCore WebVitals
- 5. @louisetowler / @indigotreesays source https://web.dev/vitals/
- 6. @louisetowler / @indigotreesays source https://web.dev/vitals/
- 7. @louisetowler / @indigotreesays source https://web.dev/vitals/
- 8. @louisetowler / @indigotreesays How to measureCWV
- 13. @louisetowler / @indigotreesays 1. Optimiseyour hosting
- 14. @louisetowler / @indigotreesays 2. Use a Content DeliveryNetwork(CDN)
- 16. @louisetowler / @indigotreesays 3. Choosea performanceplugin
- 17. @louisetowler / @indigotreesays Now improveyour CWV scores
- 19. @louisetowler / @indigotreesays 4. Load fonts locallyonto your hosting
- 21. @louisetowler / @indigotreesays 5. Specifyimage dimensions
- 22. @louisetowler / @indigotreesays 6. Convertimages to WebP
- 23. @louisetowler / @indigotreesays 7. Preloadimages https://gtmetrix.com/preload-largest-contentful-paint-image.html
- 24. @louisetowler / @indigotreesays 8. Excludespecificimages from lazyload https://gtmetrix.com/preload-largest-contentful-paint-image.html
- 25. @louisetowler / @indigotreesays 9. Use poster attributefor videos
- 27. @louisetowler / @indigotreesays 10. Auditand reducethird-partycode
- 28. @louisetowler / @indigotreesays 11. Fix 4xx and 5xxerrors
- 29. @louisetowler / @indigotreesays 12. Defer,delay,minify
- 30. @louisetowler / @indigotreesays 13. Removeunused JavaScript
- 31. @louisetowler / @indigotreesays 14. Use Brotlicompression
- 33. @louisetowler / @indigotreesays 15. Use font-display:swap
- 34. @louisetowler / @indigotreesays 16. Specifydimensionsfor images, iframes, videos and advertisingbanners
- 35. @louisetowler / @indigotreesays 17. Use CSStransform: translate()in animations
- 37. @louisetowler / @indigotreesays Improving your WordPress website Core Web Vitals 1. Optimise your hosting 2.Use a CDN 3. Choose a performance plugin 4. Load fonts locally 5. Specify image dimensions 6. Convert images to WebP 7. Preload banner images 8. Exclude banner images from lazyload 9. Use poster attribute for videos 10. Audit and reduce third-party code 11. Fix 4xx and 500 errors 12. Defer, delay, minify CSS & JS 13. Remove unused JavaScript 14. Use Brotli compression 15. Use font-display: swap 16. Specify dimensions 17. Use CSS transform: translate()
- 38. @louisetowler / @indigotreesays About IndigoTree
- 39. @louisetowler / @indigotreesays Powering business growth with expert digital solutions
Hinweis der Redaktion
- Founder and MD WordPress agency Based in Hertfordshire
- I am a technology entrepreneur and started my career in STEM as a software developer. In 2002, I started a business building websites for clients, with a clear vision to deliver great user experiences. Today I lead Indigo Tree, a digital agency with a team of 15. More recently I am one of the Winners of this years Women In Innovation awards from Innovate UK. This includes 50K to put towards a new product we are developing plus mentoring and coaching and gives me the opportunity to speak about career opportunities for women and minorities in stem.
- I assume everyone here has heard of CWV Metrics developed by Google
- First metric is Largest Contentful Paint measures loading performance. How long until the largest element in the viewport has loaded Image, article, description To provide a good user experience, this should occur within 2.5 seconds of when the page first starts loading.
- 2nd, First Input Delay measures interactivity. How long until a visitor can interact with your page If you have a contact form with a button the FID will measure how quickly that interaction is processed To provide a good user experience, this should be100 milliseconds or less.
- Finally there is Content Layout Shift measures visual stability. How much do elements on the page jump around as it loads If you have started to read some text and then a video loads above and pushes it down it can be really frustrating To provide a good user experience, this should be 0.1. or less.
- Google recommends using: Page speed insights – online testing for your page https://pagespeed.web.dev/ Search Console – reports on your website https://support.google.com/webmasters/answer/9205520 Chrome user experience report within the Chrome browser developer tools. Must use this in incognito mode to give accurate results
- We also use: GT Metrix – great for digging into the waterfall to see exactly what is loaded when
- WebPageTest Great for investigating exactly what specific element on the page is causing a problem
- It is so important to consider your hosting Cheap hosting is a false economy and great hosting can make a massive difference
- We always recommend Managed WordPress Hosting WP Engine Your TTFB needs to be < 600ms
- Use a content delivery network CDN – Cloudflare and Cloudflare polish Quite a few managed hosting providers integrate really well with Cloudflare and have extensive documentation on how to get the best from this.
- Perfmatters -Simple plugin with brilliant documentation explaining each feature $25 annual single site WP Rocket is a great alternative $40 annual single site
- LCP Find out what is causing the issue in one of the tools, block of text with Google font If text can you break it up into paragraphs and headings
- Can you adjust the fonts? Reduce the number of fonts used Create font files in WOFF2 format Host locally Preload fonts for the banner Either in your theme or using a plugin - Perfmatters can switch your theme to host Google fonts locally
- LCP Due to an image First serve from a CDN such as Cloudflare
- Then make sure you specify image dimensions. This should be part of your theme or page editor, so the correct sizes are generated when you upload an image to the media library But you can also use a plugin such as Perfmatters to insert missing image sizes into the page code
- Convert to webP Much smaller format Cloudflare can also create WebP image files We sometimes use a plugin such as WebP express There is a new plugin from the WordPress Core Performance team which is in beta at the moment but looks very promising to convert images as they are uploaded to the media library Worth experimenting to see what gives the best performance
- Preloading the Largest Contentful Paint (LCP) image can display your hero image or website banner much earlier in the page load. In your theme or performance plugin can target these images and css <link rel=“preload” as=“image” href=“xxx”>
- Lazyloading is where you delay the image loading until they are needed and come into view as the visitor scrolls down the page Exclude banner images and images shown at the top from lazyload Perfmatters and WpRocket plugins have settings where you can target filename or a class name to exclude
- Compress your video before uploading Use YouTube or Vimeo instead of self-hosting. Use a video with poster=“image” attribute when you embed your video If you are using the Perfmatters this can be done automatically for YouTube Other plugins can help with this as well
- FID First Input delay generally happens when the browser’s main-thread is busy doing something else. Long main-thread tasks can be caused by your website being slow or caused by a third-party website so you will need to reduce impact of third-party code report Look at the webpage speed test results for third party domains
- Reduce impact of third-party code (fonts, analytics, GTM, ads, videos We made a massive difference to our FID when we self hosted our Google fonts. But I have made the decision to leave the Cookiebot code for now
- Fix 4xx and 5xx errors in your Waterfall chart
- Defer, delay, minify JavaScript Test whether combining CSS/JS has a positive impact
- Remove unused JavaScript with an asset unloading plugin Review code for forms, maps and other WordPress plugins which may only be used on a few pages
- Gzip was released in 1992. After only a couple of years, it became one of the most widely used compression techniques. Software engineers from Google created Brotli in 2013. Brotli compression is now widely used across Google’s services and other large service providers.
- CLS Use the layout shift debugger to identify the elements with the issue
- flash of invisible text” (FOIT) is the phenomenon in which a web page loads without the type appearing FOUT flash of unstyled text Fix FOIT by adding “font-display: swap” to your font’s CSS Host fonts locally on your server and test preloading them You should avoid Typekit and TTF font format – we tested Typekit for a client and it added 700ms to the load time
- Specify dimensions for images, videos, iframes Specify common ad dimensions in div containers (avoid showing ads)
- Use CSS transform in animations instead of width/height attributes When moving elements, use transform: translate() instead of top, bottom, left, right Delay JavaScript to prevent new content unless it’s triggered by user interaction
- Thank you for your time today and I hope this has been helpful in guiding you on how to improve your Core Web Vitals on your WordPress website Finish with a shameless plug about us
- Thank you for your time today and I hope this has been helpful in guiding you on how to improve your Core Web Vitals on your WordPress website Finish with a shameless plug about us
- Indigo Tree we are website design and development agency with expertise in website strategy, design, development of bespoke WordPress themes and plugins plus technical SEO for a wide range of clients across the UK. At Indigo Tree we are actively involved in the WordPress community: Delivering technical workshops and spoken at WordCamps, Meetups and Conferences Looking forward WordCamp Europe in Porto with some of our team in June