Anúncio

How to improve Core Web Vitals on a WordPress website

Founder em Indigo Tree Digital
8 de Apr de 2022
Anúncio

Mais conteúdo relacionado

Apresentações para você(20)

Similar a How to improve Core Web Vitals on a WordPress website(20)

Anúncio

Último(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
  2. @louisetowler / @indigotreesays About me
  3. @louisetowler / @indigotreesays
  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
  9. @louisetowler / @indigotreesays Google’stools
  10. @louisetowler / @indigotreesays GTMetrix
  11. @louisetowler / @indigotreesays WebPageTest
  12. @louisetowler / @indigotreesays Hosting
  13. @louisetowler / @indigotreesays 1. Optimiseyour hosting
  14. @louisetowler / @indigotreesays 2. Use a Content DeliveryNetwork(CDN)
  15. @louisetowler / @indigotreesays WordPressPlugins
  16. @louisetowler / @indigotreesays 3. Choosea performanceplugin
  17. @louisetowler / @indigotreesays Now improveyour CWV scores
  18. @louisetowler / @indigotreesays
  19. @louisetowler / @indigotreesays 4. Load fonts locallyonto your hosting
  20. @louisetowler / @indigotreesays
  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
  26. @louisetowler / @indigotreesays
  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
  32. @louisetowler / @indigotreesays https://webvitals.dev/cls
  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
  36. @louisetowler / @indigotreesays Summary
  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
  40. 01442 877473 hello@indigotree.co.uk ©Copyright 2022Indigo Tree

Notas do Editor

  1. Founder and MD WordPress agency Based in Hertfordshire
  2. 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.
  3. I assume everyone here has heard of CWV Metrics developed by Google
  4. 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.
  5. 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.
  6. 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.
  7. 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
  8. We also use: GT Metrix – great for digging into the waterfall to see exactly what is loaded when
  9. WebPageTest Great for investigating exactly what specific element on the page is causing a problem
  10. It is so important to consider your hosting Cheap hosting is a false economy and great hosting can make a massive difference
  11. We always recommend Managed WordPress Hosting WP Engine Your TTFB needs to be < 600ms
  12. 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.
  13. Perfmatters -Simple plugin with brilliant documentation explaining each feature $25 annual single site WP Rocket is a great alternative $40 annual single site
  14. 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
  15. 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
  16. LCP Due to an image First serve from a CDN such as Cloudflare
  17. 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
  18. 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
  19. 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”>
  20. 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
  21. 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
  22. 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
  23. 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
  24. Fix 4xx and 5xx errors in your Waterfall chart
  25. Defer, delay, minify JavaScript Test whether combining CSS/JS has a positive impact
  26. 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
  27. 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.
  28. CLS Use the layout shift debugger to identify the elements with the issue
  29. 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
  30. Specify dimensions for images, videos, iframes Specify common ad dimensions in div containers (avoid showing ads)
  31. 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
  32. 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
  33. 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
  34. 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
Anúncio