Jordan Cauley, Author at Mediavine

Google’s Core Web Vitals: What You Need to Know

Jordan Cauley — Fri, 29 May 2020 15:58:33 +0000

Pagespeed

Google’s Core Web Vitals: What You Need to Know

Jordan Cauley

•

May 29, 2020

As we discussed earlier this month, Google has updated Pagespeed Insights (PSI) to incorporate Lighthouse 6. Lighthouse is Google’s open-source tool for improving the quality of web pages. Its latest version brings a number of key changes, among them the newly-launched Core Web Vitals incorporated into Google Search Console.

What are Web Vitals?

There is almost nothing that Google loves more than performance metrics and associated acronyms, so it’s little surprise that they’ve introduced some new ones and rolled them into a new grouping called Web Vitals. Web Vitals is a group comprised of three important metrics:

Largest Contentful Paint (LCP): A measure of load performance, generally gauging whether your largest content load happens with 2.5 seconds.
First Input Delay (FID): A measure of interactivity, or the idea that when a user taps on something, the browser should respond nearly instantly.
Cumulative Layout Shift (CLS): A measure of visual stability, or the concept that items in the browser window shouldn’t move as a page loads.

Below, we’ll break down all three in a bit more detail — beginning with the old standbys and ending with the newer CLS — and what you can do to improve results to achieve optimal pagespeed.

Largest Contentful Paint (LCP)

Despite its word salad of a name, Largest Contentful Paint is a fairly simple concept and if you’re reading this, you’re likely already taking a lot of steps to improve it. Bettering LCP scores requires a lot of traditional page load advice. By that, we mean steps like using a CDN and/or caching plugin, pre-loading or pre-connecting to third-party scripts and images, minifying or reducing CSS, thinking critically about what plugins you’re running, and making sure your host is using http/2 and gzip. Other measures you can take to improve LCP include making sure your images are optimized with modern formats and not loading unnecessarily large images. Also, try to avoid using large, edge-to-edge background images. If you do have larger assets you need in the content, try to avoid using them in the first couple of screen views. Let lazy loading do what it’s designed to do and reap the benefits of higher pagespeed scores.

First Input Delay (FID)

First input delay is another metric that has a been around for awhile. It measures how long before a page becomes “interactive” and can receive input events, such as scrolling the page, clicking links or typing in forms. As you’ve probably heard before, it pays dividends to make sure any JavaScript on your pages is minified and deferred if possible. As always, think critically about the plugins and tools you’re loading on your pages. Try to keep only the things that provide the most value.

Cumulative Layout Shift (CLS)

The first two items aren’t particularly new and, for the most part, folks aren’t seeing major new items in these values. However, the advent of CLS has been a bit of a surprise and caused a little bit of concern. It is important to remember when considering Cumulative Layout Shift is that it’s calculated based on visual changes to the page, when those changes take place inside the viewport or browser window. This means that well-managed, lazy-loaded content should not impact your CLS score in most cases. If the content is loaded and finishes rendering to the page before it comes into view, it should not impact your CLS score. That said, there are steps you can take to help reduce your chances of CLS issues:

Make sure what you use for lazy-loaded images or iframes uses a match size placeholder or includes height and width attributes.
Ensure web fonts are being loaded as early as possible. Here’s a link with helpful details on advanced font strategies.
On our end, Mediavine is working on additional CLS optimizations to improve our ad load performance as well.

The Web Vitals description of CLS reads like it might make lazy loading a bad thing, but in reality, it prioritizes using lazy loading effectively. Additionally, even if your CLS number is a little low, removing lazy loading from pages will likely impact your score even more than having a imperfect CLS number, so remember the big picture and don’t panic. The guidance provided by these tools generally dovetails with Mediavine pagespeed resources and advice you’ve heard a lot over the years. As always, we’re here to help navigate these changes and make your sites lighter and faster, however we can.

About the author

Jordan Cauley

Share this page

The post Google’s Core Web Vitals: What You Need to Know appeared first on Mediavine.

Lighthouse Version 6 Changes: What’s New For Content Creators

Jordan Cauley — Tue, 19 May 2020 17:00:07 +0000

Back to Blog

General Blogging

Lighthouse Version 6 Changes: What’s New For Content Creators

Jordan Cauley

•

May 19, 2020

Version 6 of Lighthouse, Google’s open-source tool for improving the quality of web pages, will soon be here. If you don’t know what Lighthouse is, or why changes to it are important, we have one word for you: Pagespeed. Yes, Mediavine thinks about pagespeed so much that we turned two words into one to write it even faster. Jokes and poor spelling aside, the goal of faster pages and websites influences everything we do as a company. Our Script Wrapper, which powers the ad technology for 6,800 websites, is lightweight and built for speed. So are Mediavine’s WordPress plugins; pagespeed concerns ultimately led to the creation of Trellis. Moreover, we are constantly looking for ways to help our publishers maximize scores in Google’s PageSpeed Insights (PSI), and that means doing everything we can to give Mediavine products an advantage. As we spend our lives worrying about how our tools perform on PSI, when Google changes how it measures pagespeed, we take it very seriously. That change is coming in the form of the Lighthouse 6 update.

What is Lighthouse?

You might not have used Lighthouse directly, but you’ve probably used PSI, which utilizes speed metrics powered by Lighthouse. Lighthouse is actually a variety of tools that measure the time it takes to load a page, while providing a meaningful user experience. When you visit PageSpeed Insights or use a Lighthouse Audit tool, Lighthouse uses a browser to measure a website as it loads. That site is rendered using either your local version of Chrome or via a “headless” copy of Chrome that runs on a server, probably in California — if screen shots that include Mediavine’s CCPA are any indication. Some of the metrics Lighthouse uses have names that aren’t the most self-explanatory or instructive, so here’s a little glossary:

First Contentful Paint: Yes, that is its real name. It marks the time at which the first text or image is loaded into view, and measures how long it takes a browser to render the first element on the page.
Speed Index: Measures how quickly the contents are visibly loaded, and the visual progression of the page load.
Largest Contentful Paint: Reports the render time of the largest content element in the viewport.
Time to Interactive: How long until a page is fully interactive, meaning it displays content and event handlers are in place for visible elements.
Total Blocking Time: Sum of time between your first contentful paint and time to interactive.
Cumulative Layout Shift: Measures how often a layout change happens as new content is loaded to the page.

What’s Changing in Version 6?

The metrics themselves, and the weight of those metrics, will change with the move from Version 5 to Version 6 of Lighthouse. Specifically, Version 6 introduces Largest Contentful Paint, Total Blocking Time and Cumulative Layout Shift. These new Lighthouse metrics mark a shift in prioritizing user experience concerns rather than speed for speed’s sake. Users are often frustrated by Layout Shift, which occurs when elements are added to a web page unexpectedly. One example of this is lazy loaded images that aren’t properly spaced. This experience is one of the reasons Mediavine integrated support for Jump to Recipe buttons into our Script Wrapper. Tip: You can improve Largest Contentful Paint scores by avoiding adding large images to the first viewport of your site.

What Do Lighthouse Changes Mean For Me?

As we mentioned briefly above, PSI has been using Lighthouse 5 metrics for the last year or so but soon will start using Version 6. It’s not clear exactly when the updated Lighthouse will be integrated with PSI; Google will make that transition when it’s ready. According to the official Lighthouse Twitter, and other sources close to the product, we can expect it to be in effect by the end of May. In any case, Lighthouse 6 will alter the way scores are calculated, while introducing new metrics for quantifying page performance. As with any update, there will likely be minor changes in your pagespeed score, hopefully for the better. In any case, don’t panic. The easiest and most effective way to improve pagespeed is to remove plugins that aren’t providing value for your site and users. It’s also worth noting (shameless plug alert) that some of our initial Trellis test sites have seen an upward bump in their scores. As always, stay tuned to our blog and social channels for more on Trellis, and email us with any pagespeed related questions.

About the author

Jordan Cauley

Share this page

The post Lighthouse Version 6 Changes: What’s New For Content Creators appeared first on Mediavine.

Amazon Affiliate Updates to Create

Jordan Cauley — Wed, 18 Dec 2019 20:05:27 +0000

Back to Blog

Create

Amazon Affiliate Updates to Create

Jordan Cauley

•

December 18, 2019

Update: The Create WordPress plugin has been acquired by one of its original engineers, John-Michael (JM) L’Allier. Now independently managed, Create remains in active development and continues to serve publishers under JM’s leadership. If you have any questions, please visit https://create.studio or email support@create.studio. Today we’re releasing version 1.5.4 for Create by Mediavine^®. A few weeks ago we began to get more support tickets about our recommended products feature. We were using a now unsupported method not returning useful information from Amazon URLs. We know that affiliate link support has become an important part of both Recommended Products and Lists for many of our users. Providing reliable data on Amazon products was our focus and we went to the source, the Amazon Products API. Starting with the 1.5.4 release Create fetches product data from Amazon’s API and takes care of refreshing images on a daily basis in full compliance with Amazon Products API Terms of Service. What does this mean for you? Well, in order for you to take advantage of these features, you will need to get Amazon Products API tokens. We have a detailed help document to help you find your Amazon Products API tokens, but here is the gist below: In order to qualify for Amazon Products API Tokens, there are some specific requirements, and you can learn about those and obtain your tokens here: https://affiliate-program.amazon.com/assoc_credentials/home Once you have your tokens you will have to add them to your Create Settings. First, if you haven’t already, take a moment to register Create so you can get access to Affiliate Support. Then visit the Affiliates Tab in Create Settings. Here is where you will be able to enable Amazon Affiliates. Once you’ve enabled Amazon Affiliates, you’ll have access to the API Token Fields. Add your Access Key, your Secret Access Key and your Associate Tag. Be aware that Amazon takes its time to provision API access, typically between 24 and 48 hours. Create will lock you out of using the Amazon Affiliates keys for 48 hours by default. If you’ve used your tokens before, and are sure they are ready to go, you can opt to clear our Provision lock using the button in the bottom of the settings. Now that your tokens are added and you’ve waited the required 2 days, it’s time to start populating your recommended products. The next time you add an Amazon Affiliate link to a Create card in the “Recommended Products” section or a List, paste your affiliate URL and the product image and title will populate. As always, our support team is here to help if you have any questions. Please reach out to create@mediavine.com.

About the author

Jordan Cauley

Share this page

The post Amazon Affiliate Updates to Create appeared first on Mediavine.