As you\u2019ve heard us talk about at length, Google is set to release its new pagespeed requirements, known as Core Web Vitals, as part of the Google Page Experience<\/a> algorithm update.<\/p>\n Originally scheduled for sometime in May, we reported last week that the update is now delayed until June<\/a> to give publishers enough time to prepare for its rollout.<\/p>\n A little extra time isn\u2019t a bad thing given that fewer than 20% of websites are currently passing Core Web Vitals<\/a>, and that percentage drops even lower if sites are running digital ads. <\/p>\n Core Web Vitals have set such a high bar that many publishers have questioned whether it\u2019s even possible to hit these new requirements while running ads.<\/p>\n It\u2019s a fair question, as it\u2019s no secret that ads are slow, and tricks like lazy loading and deferred loading that help improve pagespeed now cause publishers to fail Cumulative Layout Shift<\/a> (CLS).<\/p>\n But it can be done. <\/p>\n We can say this definitively, today, as we own and operate one of the first sites to pass Core Web Vitals while running Mediavine Ad Management.<\/p>\n The Hollywood Gossip is officially passing Core Web Vitals<\/strong> for both mobile and desktop<\/strong> using the exact same Mediavine Script Wrapper and full suite of ad placements as all Mediavine publishers.<\/p>\n Needless to say, passing Core Web Vitals is awesome if you can do it. <\/p>\n Not only will you see improved rankings from existing search results, you\u2019ll be eligible to appear in previously AMP-only carousels as well. (We\u2019re very<\/em> excited to be able to AMP on THG.)<\/p>\n So how did our celebrity gossip<\/a> blog pass with flying colors? We\u2019re excited to break it down for you and help you do the same!<\/p>\n Before you can pass Core Web Vitals with ads, your site itself needs to pass \u2014 and debugging your website if it\u2019s already failing from ads can be challenging.\u00a0<\/p>\n So let\u2019s start at the beginning. <\/p>\n Your first step should be to turn on both of the Mediavine Optimize for PageSpeed settings as well as the Optimize Ads for CLS<\/a> features. <\/p>\n This should get the Script Wrapper out the way of your Core Web Vitals.<\/p>\n Note: Mediavine and its scripts may still appear in some of the PageSpeed Insights results, and that\u2019s okay! Mediavine ads are the fastest in the industry, but ads will be ads. They\u2019re slow.<\/em><\/p>\n Remember, the reason we\u2019re telling you this is that with Mediavine Ad Management<\/a>, you can still pass. These settings will make your site as efficient as it gets while running ads.<\/p>\n Now that ads are out of the way, let\u2019s focus on your site: What can you do to balance pagespeed needs with the potential impact from layout shift? Glad you asked!<\/p>\n Below, we\u2019ll take you through a step-by-step process of how we achieved passing grades for THG. A lot of these are things you\u2019ve heard us discuss before that you can start doing today.<\/p>\n Perhaps one of the easiest optimizations you can do is lazy loading of images<\/a>. After ads and videos, images are often the biggest culprit when it comes to slower load times. <\/p>\n We used the lazysizes<\/a> library on THG, but if you\u2019re on WordPress, good news: Trellis<\/a> does this right out the gate (using the same library), and there are are lots of plugin solutions for other themes.<\/p>\n Now that you\u2019re lazy loading images, as we touched on earlier, there\u2019s a chance for layout shift (CLS) as images load and move content around. You can solve for this by setting a placeholder where the image will load. <\/p>\n THG uses a CSS ratio hack to accomplish this; Trellis has this functionality built into its core, but it\u2019s something you should confirm that your lazy loading script is handling for you.<\/p>\n Lazy loaded images are great, but not every image can be lazy loaded; your logo and images appearing in the first screen view can\u2019t utilize this tactic. For those, making sure you have solid image compression and are serving next gen images like WebP will be essential for pagespeed. <\/p>\n Of course, next gen images will also make your lazy loaded images much quicker as the user scrolls, which is an added benefit. With THG, we actually use the Cloudinary service to handle this, but if you\u2019re on Trellis, our free Trellis Images<\/a> service is included with your yearly API. <\/p>\n Again, there are third-party plugins built to handle this with other themes.<\/p>\n We know that Google fonts and other custom typography may look beautiful, but it also means your website can\u2019t show any text until that font loads. <\/p>\n That\u2019s why Chrome and other browsers introduced font fallbacks, but unfortunately, while that fallback font is swapped with your Google Font, layout shift can still occur as a result. <\/p>\n The easiest solution? Skip the font fallback and the loading of custom fonts by using a system or web safe font. THG uses system fonts, but you can easily select other web safe fonts. <\/p>\n This can be accomplished via some quick CSS or right in the Trellis settings<\/a>.<\/p>\n This one is a little more theme and plugin dependent.<\/p>\n THG was using the Font Awesome icon library to handle menu and search icons. As was the case when loading the heading and body fonts, nothing could be displayed until these fonts loaded. <\/p>\n When they pop in, these icons can cause both pagespeed and\/or layout shifts, depending on the fallback chosen. Since there\u2019s no system version of font icons, we recommend switching over to SVGs. <\/p>\n THG did this, and we\u2019ve done it with Trellis and our Grow Social<\/a> plugin. Again, this will likely be more theme and plugin dependent and not typically handled by your optimization plugin.<\/p>\n Stylesheets tell the browser how to make your website look, so it makes sense a site can\u2019t load until stylesheets are downloaded. That\u2019s why it\u2019s considered \u201cblocking\u201d as it prevents a page from loading prior to this.<\/p>\n The solution? Asynchronously load CSS. <\/p>\n On THG, we use the loadCSS<\/a> library. The catch? While waiting for the stylesheet to load asynchronously, there is a Flash of Unstyled Content (FOUC \u2026 yes, there\u2019s an actual technical term and acronym). <\/p>\n That FOUC can cause (you guessed it) layout shift.<\/p>\n So how do you stop FOUC? First, you need to generate critical CSS, which are just the styles needed to render the first screen view of your content. <\/p>\n This critical CSS will be loaded directly inline with your HTML, not via an external stylesheet. Then you can safely async the rest of your stylesheets.\u00a0<\/p>\n For THG, we hand-generate these using the critical<\/a> node module. Trellis does this automatically via our Trellis API (included in your yearly fee), and many plugins offer integrations with other APIs to do the same.<\/p>\n Bonus points for Trellis: It will also remove unused styles from your stylesheets, which will speed up your site even more. Because THG generates styles by hand and not via an API, this wasn\u2019t doable (but hey, we\u2019re still passing).<\/p>\n This is one everyone can and should handle, as JavaScript is one of the biggest causes of slow site speeds. Every piece of JavaScript you install, whether it\u2019s a tracking pixel from Facebook or an influencer network, social media sharing tools, push notifications, recommended content, etc., are all slowing you down.<\/p>\n With THG, we ditched them all. <\/p>\n Right now, the only third-party JavaScript we run is from Mediavine. That\u2019s a third party we trust. You can\u2019t have lightning fast pagespeed and low CLS until you do<\/strong>. <\/p>\n If you really want to take this to the next level, consider axing even first-party JavaScript that\u2019s served by plugins on your site. The more you reduce, the faster your site will load.<\/p>\n Here\u2019s a somewhat surprising one: Comments powered by third-party JavaScript will slow down your site and ones that are built in (like WordPress) can create a lot of DOM elements, which also slows things down. <\/p>\n THG used Facebook and Disqus for its comments and moved both behind a Load Comments button. The good news for Trellis publishers is that comments are lazy loaded by default.<\/p>\n You can easily do this with a plugin for other themes on WordPress, as well.<\/p>\n You should add the \u201cdefer\u201d attribute to all JavaScript on your page to make sure it\u2019s loaded after the page loads. This or \u201casync\u201d needs to be on every external script tag on your page to prevent JavaScript from blocking or otherwise slowing down your page load. <\/p>\n THG uses a special script loader to handle this, and Trellis automatically does this for you, but if you run an optimization plugin, this should be an easy thing to configure. <\/p>\n Just be careful if there are certain scripts which depend on each other. Such as\u2026<\/p>\n This is a tough one, but loading jQuery and other JavaScript frameworks can potentially block other JavaScript from running, even if it\u2019s deferred. This can cause the whole site to stop loading until jQuery is ready.\u00a0<\/p>\n With The Hollywood Gossip, we moved any JavaScript that was dependent on jQuery until after First Input Delay, and all JavaScript required for initial page load to non-jQuery. <\/p>\n For your WordPress site, we recommend instead you just pick a theme (have we mentioned Trellis?) and plugins (looking at you, Create<\/a> and Grow Social<\/a>) that don\u2019t depend on jQuery.<\/p>\n If all of that felt overwhelming, we understand, because it was for us too. That\u2019s one of the reasons we built Trellis \u2014 and Mediavine in general \u2014 the way we have. <\/p>\n We know not everyone has a programer for a webmaster like The Hollywood Gossip does, which is why all of these tricks and best practices are built-in and done by default with Trellis and all Mediavine plugins.<\/p>\n We also recognize that people run themes and plugins not built by Mediavine. <\/p>\n In those situations, most of these techniques can still be accomplished via optimization plugins. If you\u2019re nervous configuring these yourself, we recommend looking for a developer or agency that can help you.<\/p>\n But please remember, less is more<\/strong>. Only you can decide what to remove from your site. If you hire someone or use an optimization script or plugin, it can only do so much in the end.<\/p>\n The key to hitting Core Web Vitals and creating a great experience for readers is to run a script and plugin audit<\/a>. Removing anything slowing down your site is a win on every front.<\/p>\n And, at the end of the day, this may come as a surprise to the three of you who read all the way to the end, but if you can\u2019t hit Core Web Vitals and the new Page Experience requirements, don\u2019t worry. It\u2019s just one of many signals Google takes into account. <\/p>\n There\u2019s lots of SEO<\/a> you can do without any technical knowledge, and above all else, Google rewards sites with great original content.<\/p>\n<\/p><\/div>\n\n Leif Lessons<\/span>
\n <\/h2>\n\n
Optimizing Ads for Core Web Vitals<\/h2>\n
Optimizing The Hollywood Gossip for Core Web Vitals<\/h2>\n
1. Lazy Load Images<\/strong><\/h3>\n
2. Use Image Placeholders<\/strong><\/h3>\n
3. Serve Next Gen Images<\/strong><\/h3>\n
4. Switch to System \/ Web Safe Fonts\u00a0<\/strong><\/h3>\n
![\"infographic](\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2021\/04\/speed-safe-fonts-updated.jpg.webp\")
<\/figure>\n5. Remove Font Icons<\/strong><\/h3>\n
6. Removing Blocking CSS \/ Load CSS Asynchronously<\/strong><\/h3>\n
7. Serve Critical CSS<\/strong><\/h3>\n
8. Remove as Much Third-party JavaScript as Possible<\/strong><\/h3>\n
10. Defer (or Async) JavaScript<\/strong><\/h3>\n
11. Ditch jQuery<\/strong><\/h3>\n
![\"core](\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2021\/04\/thg-cwv-checklist.jpg\")
![\"core](\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2021\/04\/thg-cwv-checklist.jpg.webp\")
<\/figure>\nHow can you do all of these pagespeed tricks?<\/h2>\n