While we’re constantly uploading, refreshing, and adding content to our websites, it can be easy to overlook some key elements of success.
Mainly, do you know how your website is performing?
You’ll be surprised to know how many organizations can’t answer this simple question.
What We’ll Cover:
- Evaluating Your Website’s Performance
- What is First Contentful Paint?
- What is First Meaningful Paint?
- How to Improve FCP
- How to Improve FMP
- What Tools are Used to Test Site Speeds?
In many cases, months or even years will pass after a website is launched before marketers start to assess how well or how poorly the website is performing.
Since no one has ever put a value on it, they simply don’t know.
But, the truth is they can’t know because they aren’t measuring anything.
Evaluating Your Website’s Performance
Measuring your website’s performance can be complicated. In order to fully understand the process, you have to first identify exactly what you are measuring, why you are measuring it, and what you can learn from those measurements to improve your website.
Metrics like First Contentful Paint (FCP) and First Meaningful Paint (FMP) can help you see how your website is performing from the vantage point of the user.
To give you a general idea of what FCP and FMP are all about, think about how important it is to make a good impression when meeting someone new, particularly in a professional setting. That positive first impression could open many doors for you. Maybe it’ll help you land projects, attract new business, and expand your network.
This same principle applies for websites. With so much competition online these days, your website needs to stand out from the crowd by making a great first impression so that users who land on your pages will see that you’re credible. If you’re engaging enough, they’ll want to keep interacting with your brand and ultimately, buy from you.
Luckily, there are several factors we can use to make sure our website will be well-received by visitors. That’s where FCP and FMP come in.
What is First Contentful Paint?
FCP is one of the things Google’s PageSpeed Insights tool (PSI) looks at. It basically checks how long it takes for a web page to load, marking the first point in the page load timeline where a user will see something displayed on the screen.
Since July of 2018, Google made page speed a ranking factor in mobile searches. So, it goes without saying that your page load speed is pretty important as it acts as a signal that Google uses to rank your site in search results. The more time it takes for a site to load, the poorer the user experience.
In fact, a one-to-three second delay reduces page views by 11 percent and decreases customer satisfaction by 16 percent. If you add one more second to that, the likelihood for users to bounce triples, reaching a staggering 90 percent.
FCP is one of numerous PSI Lab Data tests, which also include:
- First Contentful Paint
- First Meaningful Paint
- Speed Index
- First CPU Idle
- Time to Interactive
- Max Potential First Input Delay
With these tests, websites receive an overall page speed score of between 0 and 100, with 100 being the quickest.
As previously mentioned, the FCP exclusively tests how long it takes a browser to render (or paint) the first items specified in the Direct Object Model (DOM) of your web page when a person lands on it.
The DOM is represented with a tree-like structure where each branch contains objects within your page and the order in which they load.
The FCP doesn’t officially start until it comes across certain items specified in the DOM such as text, images, Scalable Vector Graphics (SVG), and web fonts.
Remember—the whole idea of FCP is that it signifies how long it takes for a visitor to merely see content when a page loads, although it might not be meaningful yet.
What is First Meaningful Paint?
When the contents of a website users are looking for load completely, that is what we call FMP. From the user’s perspective, it marks the moment where the paint in which the news title, article, or photo is visible. As the name implies, following the first meaningful paint render, it delivers meaningful information to the visitor.
While meaningful information varies from site to site, it typically involves the rendering of valuable content known as hero elements. Hero elements like images and headings are designed to draw the users’ attention, as well as inform them of the type of content they will encounter when browsing.
For websites, hero elements can include blog posts with prominent banner images, and for social platforms, hero elements could be timelines or a user’s profile.
How to Improve FCP and FMP
The speed of a website can make or break its success. To improve your website’s FCP and FMP and ensure the fastest load times, be sure to follow these tips:
Decrease the amount of render-blocking external CSS and scripts your page depends on
Render-blocking keeps a page from loading as quickly as it should. A CSS file is handled as a render-blocking resource, which means that the browser will not render any processed content until the CSS Object Model is created. To optimize speed, make sure to keep your CSS lean, produce it as quickly as possible, and use queries to unblock rendering.
Utilize HTTP caching
HTTP caching occurs when a browser stores resources to reduce server lag, or paint time. After all, whenever someone visits a website, everything the site needs to display and control must come from somewhere. From copy and images, to CSS styles and media files, these items need to be retrieved by the browser for execution.
Giving the browser choices about where to retrieve these resources from can make a world of difference in your page’s load speed.
Minify and compress all text-based assets
Your webpages are composed of text-based HTML, CSS, and JavaScript files. If you don’t have the option to remove a file because it’s essential, then you need to shrink the file size as much as you can. When it comes to reducing file size, you can either minify or compress.
- Minification: The process of eliminating unnecessary or extraneous data without altering how the resource is processed by the browser.
- Compression: A practice of discovering patterns and duplication in the text file and encoding them in a more efficient way.
Optimize JavaScript
When compared to other files, the JavaScript file is the heavier option, accounting for about 15 percent of page weight for desktop pages and 16 percent for mobile pages. To optimize your JavaScript file, choose from two methods—Tree Shaking and Code Splitting.
- Tree Shaking: Removing dead code.
- Code Splitting: Splitting up the code into bite-sized pieces and directing the non-critical pieces out of your site.
What Tools are Used to Test Site Speeds?
The faster a website loads, the more it can benefit from higher SEO rankings, improved conversion rates, reduced bounce rates, longer visitor duration on site, and a better overall user experience. That’s why it’s critical to take advantage of the many tools available out there to test your site’s speed.
Google PageSpeed Insight
Incorporating data from CrUX (Chrome User Experience Report), Google’s PageSpeed Insights reports on two important speed metrics, including FCP and DOMContentLoaded (DCL).
This tool allows you to easily check the URL of a page, and provides you with an overall score for page speed. This score tells you whether the web page is fast, average, or slow.
You can receive two different scores—one based on the site’s mobile performance and the other based on its desktop performance.
WebPageTest
A popular option among developers, WebPage Test is a free testing tool that administers speed tests from multiple locations around the world.
Taking into account the type of browser, device, and cache state the user has, it consists of one or multiple servers that behave like web browsing robots, visiting websites and accumulating data about the experience, which is represented in a detailed performance report.
Varvy PageSpeed Optimization
These reports can be broken up into five different sections including resource diagrams, CSS delivery, JavaScript usage, page performance issues found, and services used.
This tool also uses more of a graphical representation of what needs to be fixed on your site.
Varvy Pagespeed Optimization also does a great job of including documentation on how to further optimize your site based on the test results. The tutorials cover everything from critical rendering paths, to leveraging browser caching, and even deferring loading JavaScript.
Wrapping Up
As you continue to grow your business, you should regularly reassess your performance management plans to find out if the metrics you’re monitoring are still relevant to your users.
For instance, let’s say that you have more mobile users than originally expected. In this case, you may want to allocate more resources to tracking mobile performance.
But no matter who you’re optimizing for, measuring web performance with FCP and FMP and knowing what needs to be improved is the first step to having a site that loads faster and performs better.
