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.
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.
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.
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
If you upload your own custom fonts, make sure not to upload the same fonts multiple times by mistake. This can result in the same font being downloaded multiple times for site visitors, which can impact performance.
Editor X lets you upload custom fonts and use them just like Editor X’s default fonts. But the need to limit your fonts still applies: Stick to only a few key fonts to speed up your site while also reinforcing your brand.
Avoid text in images
Having text as a part of an image is problematic for multiple reasons: First and foremost, such text will not be recognized by search bots or screen readers — it's effectively invisible to them. Also, text on image will appear pixelated when a visitor zooms in. In the context of performance, text in images will not be visible until the image fully downloads. For all these reasons, it's much better to overlay live text on top of the image.
Limit the use of reveal animations
Reveal animations are animations that are triggered automatically when the page loads, and applied to content that is initially above-the-fold. Such animated content cannot be properly viewed until the animation completes, which creates a delay and effectively increases page load time. For this reason, it's recommended not to use reveal animations for most of the primary content.
Ensure strong contrast
If your text appears before an image is loaded, no one will be able to read dark text against a dark image (or a dark background)—ditto, light text against a light image or background. So pay attention to color contrast. If you must use the same color for your site text and background, try adding an outline color to help your text stand out more.
05. What else is slowing your site down?
If you still see site performance issues, here are a few more things to consider when updating for optimization.
Examine your site’s complexity and page length
One way to think about your site experience is to consider its page length. Editor X sites expand to support the amount of content you want to publish, but the more content you have on a page, the longer that page will be—and the more time it will take for someone to scroll through your page. On mobile screens, that can take a while. You can use the Editor X Editor to resize your page length for better optimization.
On Editor X, you can also see your site through your mobile user’s eyes by previewing it on its smaller breakpoints. Check that your site looks good, flows well, and loads quickly on all breakpoints. You can also customize your menu on smaller breakpoints to slim down your mobile experience (users can still see those pages on their devices if they have the URLs).
Understand how iFrames, Google Ads and others impact your site
Site integrations such as iFrames (which often use embedded HTML and scripts) and Google Ads can negatively affect site performance. Use iFrames sparingly, and if using Google Ads, make sure that all boxes are visible. Tracking and analytics (T&A) tools can also slow things down, so only include those you need to analyze how visitors interact with your site.
You can also test your site performance before and after (with and without) the tracking pixels, to better assess the performance impact they have on your site’s loading experience.
Use lightboxes judiciously
Lightboxes (or popups) are an effective tool for drawing attention to important announcements or notifications, yet they should not be used for a page's main content. This is because there's a delay between the time the page loads and a lightbox appears. Moreover, lightboxes can have a negative impact on CWV, so consider disabling them if your score is low.
Enable manual caching when using code
If you’re using custom code with the help of full-stack development platform Velo on your Editor X site, enabling manual caching when appropriate can help speed up page loading time. However, note that caching might be problematic in some cases, specifically on pages with dynamic content.
Conclusion
At Editor X, we're always working to make our millions of sites perform better and stay ahead of the latest developments in performance and user experience so that we can help your Editor X site do the same. You can join us on this journey, too. As you optimize your site and get ready for Google’s Core Web Vitals, great results will soon follow.
