Profile picture of Dan Shappir

8 min read

Optimize your Editor X website for Core Web Vitals

With Google’s new Core Web Vitals, website optimization is now a priority. Get your Editor X site in top shape with these tips.

A website wireframe reading “Faster. Better. Step Up Your Game.” and its search results on Google

Illustrations by {name}

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

If you're eager to have people clicking into, looking around, and engaging with your site, you don't just need great design and a persuasive call-to-action. You also need to know the ins and outs of optimization so that your site offers a swift, compelling user experience. With the advent of Google's new performance metrics, Core Web Vitals (CWV), and its impact on SEO, there’s never been a better time to get a handle on site optimization.

CWV metrics simplify performance measurement and monitoring by focusing on three aspects of page behavior that impact loading speed and experience. But why should this matter to you? Because Google is integrating Core Web Vitals into its search algorithm, which means these metrics can play a role in how the world's largest search engine ranks your site.

At Editor X, we have some of the world's best engineers working hard, updating our software and improving our infrastructure to make our users' sites faster. But we need you to do your part to improve your site performance, too. Editor X websites are highly customizable, so the decisions you make will impact your website optimization and performance.

This full guide will help you learn about your site’s speed so that you can stay ahead of the curve as Core Web Vitals become a new performance standard.

01. Top-of-mind priorities for optimization

Ready to set out on your optimization journey? Here are some things to ask yourself and insights you can uncover to improve your site’s performance right off the bat.

What’s your site’s purpose?

When thinking about optimization, the first thing to consider is your site’s purpose. Is it an eCommerce website? A gym offering streaming workouts? A professional presence, for, say, a law or accounting firm? Your site's purpose helps you understand the kind of experience you want your visitors to have and what you want them to do while they're on your site.

Once you know what experiences you envision for your visitors, think about what you want them to do on your site, and how you prioritize these different items. Keep these points in mind as you read this article, and then circle back and start optimizing.

How fast is your site?

Before you begin optimizing, determine your site’s load speed and uncover what might be slowing things down. Editor X’s new Site Speed dashboard in the analytics dashboard makes it easier to see how your site performs based on real user data (also known as Field Data) and the latest PageSpeed Insight. By checking your performance regularly, you'll gain the knowledge you need to keep your site moving right along.

When visiting the Site Speed dashboard, you’ll also find relevant content that suggests even more performance improvements based on your site’s data.

A screenshot of the Site Speed dashboard on Editor X
Check your site's loading time on Editor X's Site Speed dashboard.

Know your users (and their download speeds)

Your site analytics will tell you a lot about your site visitors. Are they in countries with slower networks? Are they using lower-end mobile devices? If so, you may consider simplifying some aspects of your site for faster loading on slower networks and devices. If your gym is offering on-demand fitness classes, for instance, you’ll want to use Editor X’s built-in video player, which is optimized to deliver better performance than external video platforms.

Define a clear call-to-action (CTA)

Make sure that each page on your site serves a single goal and create a CTA for that purpose. Review your content and images to make sure they’re enticing visitors to take the desired action. Add any components that may strengthen your CTA, and remove content or functionality that might distract the user, decrease interaction and increase bounce rates.

Now, let’s look at how to make your site media load more quickly.

02. Optimize your media for faster loading

Photos, illustrations and videos can make your website exciting and engaging—but they can also slow it down. Editor X automatically optimizes all media in your site, converting images and videos to optimized formats, and downloading only the needed pixels.

In addition, images are lazy-loaded, on demand, and low-quality image placeholders (LQIPs) are used to provide quick visibility. All that said, the choices you make about media can also impact site performance.

Prefer lightweight image files when possible

Using lossy image compression (compression that can degrade image quality a bit) can result in significantly smaller image downloads than lossless compression. For Editor X this means preferring JPS images over PNGs. You should use PNGs when you need transparency in your images (which JPGs don't support), or when you require the highest possible image quality.

Editor X automatically converts both JPG and PNG images into Google's new WebP image format, for browsers that support it. This results in an up to 20% download size reduction. For this reason, there’s no need to do this conversion yourself.

The same image exported as three different files: As a JPG it's 1.7MB, as a PNG 4MB, and as a WebP it's 584KB.

Use lower-quality JPGs in the background

Background images are often used for setting the mood rather than for conveying actionable information. For this reason, using lossy images for background is generally recommended. Moreover, you may want to adjust background images for lower quality to reduce download time even further.

In most cases, Editor X automatically adjusts image quality according to use. If you need to change your image quality manually, you can do so in the Editor X Pro Gallery or with external tools, such as Google’s free Squoosh app.

Use SVGs for shapes and logos

PNGs and JPGs work well for photos, but SVGs work better for shapes and illustration-style images like logos. SVGs are usually much smaller than PNGs and JPGs; they also load faster because they’re directly embedded in the HTML. Plus, SVGs keep looking sharp no matter how much someone zooms in.

Prefer video over animated GIFs

Animated GIFs usually have large file sizes and long load times. If you want to display animation on your site, try video instead: It uses smaller file sizes and can show content to users while it’s still downloading.

03. More media best practices

Here are a few more tips about optimizing media to improve your site performance.

Combine images when possible

If you're overlaying several images, see if you can combine them into a single image. For example, try setting the background color to match the page instead of using transparency. A single image will be smaller than multiple images, and will download faster.

Sit back and enjoy lazy loading

Editor X automatically uses lazy-loading to download images only when they're actually needed, specifically before they scroll into view. Before downloading the images, Editor X places low-resolution placeholders so that content appears as quickly as possible.

The built-in Editor X video player was designed just for Editor X sites, so that it provides better performance than external video players such as YouTube and Vimeo.

Align background and primary image colors

You can set a color for background images such as stripes and columns. This color is visible when shown behind a partially transparent image and also appears before any image loads. Selecting a background color that matches your image's primary color can also improve how users perceive your page's experience.

04. Optimize your text

Website copy helps you tell your visitors about the brand and the site. Text usually loads faster than images—so that you can get your point across in less time. Let's take a look at best practices for optimizing your Editor X site’s text and fonts.

Include meaningful text in the initial viewport

The initial viewport, sometimes referred to as "above-the-fold," is the part of the page that’s initially visible, before a visitor scrolls down. Having meaningful content in this part of the page is especially important because this is what visitors will see first. For this reason, it's recommended that you place impactful text that directly contributes to your CTA.

A website screenshot with prominent text on the first fold

Limit your fonts

Using too many fonts on your website can look messy, impair readability and diminish your page performance. In many cases, text only becomes visible when a font file is downloaded, so if multiple font files need to be downloaded by a user, page load times will be slower.

At Editor X, we recommend limiting the number of font variations on a page to six or fewer. Remember to limit your use of font weight and size for similar reasons.

Upload custom fonts only once