Creatives need a digital space to call their home. A place from which they can show off their best work, and from where people can get in touch with them to buy or hire from them.
You should have a digital space of your own as well, and we’re here to help you do just that.
With one of 600+ Be Theme’s pre-built websites at your fingertips you can establish your own digital presence in no time at all. While you’re certain to find one to get started among such a large selection, we’re happy to offer a helping hand. The following 15 top BeTheme pre-built websites were specifically designed with creatives and developers in mind.
Don’t be afraid of choosing one that might not turn out to be the exact best choice. Every one of these 600+ pre-built websites is customizable, and you can always select another example or experiment if you want to.
15 Awesome BeTheme Pre-Built Websites You Can Call Your Own
No matter your choice, you’ll quickly discover that most or all of the heavy lifting involved in creating a website has already been done for you. Customize, add your own content, tweak as necessary, and you’re done!
That said, let’s get started.
1. BeAgency 4
Whether you prefer to go it alone or dream of someday building your own creative agency, the BeAgency 4 pre-built site would be a great foundation for your site. It oozes professionalism, it’s easy for your visitors to navigate, and you’ll love its clean, modern design.
As an extra feature (and most of these pre-built sites have one or two), BeAgency 4 has a Portfolio page. Swap in your own content and you’re set to go.
2. BeAgency 5
Like its predecessor, BeAgency 5 offers plenty of flexibility. You might find its completely different style more causal and relaxing, given the hand-drawn elements and small animations sprinkled throughout.
The extra feature here is a premade page for case studies you could use to add context to items in your portfolio.
3. BeArtist 3
Whether you’re a visual artist, photographer, graphic designer, writer, or whatever, the BeArtist 3 pre-built site’s cool design with its unique vibe could be just what the doctor ordered.
It even has a Shop setup you can use to sell your work, or you can convert it to a portfolio if you intend to showcase that.
4. BeBusiness 3
If you would like to create a simple website to market your artistic services BeBusiness 3 would be an excellent choice.
Whether you’re a photographer selling family portraits or wedding packages, a web developer searching for clients, or a graphic designer specializing in logo design, this pre-built site gives you a great starting point.
5. BeCompany 6
If you’re looking for a way to help your company stand out from those that would prefer to play it safe in terms of website design, this BeCompany 6 pre-built site, whose geometric shapes and illustrations give it a particularly artsy vibe, would be an option well worth considering.
Not to forget; among BeCompany 6’s features there’s a page with case studies that can help you highlight your work.
6. BeConsultant
It’s sometimes the case that after creatives have become experts at their game or craft, they branch out into consulting. If you fit into that category, you might find BeConsultant to be the perfect fit for you.
If you’re not a full-time consultant, or not into consulting at all, you could still use this pre-built site as the basis for a website to show off or sell your skills.
7. BeCopywriter 2
This one’s for writers. If that’s you, and your work is focused on words, it only makes sense to use a pre-built site like Copywriter 2 to beautifully showcase your content.
8. BeCreative 4
BeCreative 4 offers a distinctive point of view on what a typical website for creatives should look like.
While it features everything you need, e.g., a portfolio page is included along with a section for sharing testimonials, it offers a few other surprises as well; surprises like its left-aligned navigation for starters.
9. BeCV 2
BeCV 2 is not your standard digital CV or resume. Not by any means.
It’s a single page site that will serve as a perfect vehicle for sharing your skills, your experience, and your accomplishments as reflected in your body of work. It also gives prospective employers or clients the opportunity to connect with you directly through your site.
10. BeData
BeData would be a good choice for IT professionals, web developers, and programmers. Its layout, techy design, and cool features can easily be customized to suit your needs.
11. BeMedia 2
BeMedia 2 tests the limits of conventional design in a variety of ways, including its asymmetric layouts, outsized images, and its animated background video; all designed to instill a heavy dose of energy into your website and your brand.
12. BePhotography 3
TheBePhotography 3 pre-built site isn’t for professional photographers only. If you are a web designer, an illustrator, or any kind of a visual creator, this image-centric pre-built site offers a great way to show off your creative efforts and dazzling works of art.
13. BePortfolio 2
BePortfolio 2 is great way for showing off in the best possible way your work, your experience, your list of clients, and whatever else is of importance to you and your business. For creative professionals it doesn’t get any better than this.
14. BeTheme
A great thing about using BeTheme is you can use it to create a website as simple or as complex as you like, as well as one that will get your message across in the best possible way. BeTheme comes with the building blocks you need, and quite naturally an impressive portfolio page.
15. Webmaster 2
Programmers and developers. This pre-built website was created just for you.
BeWebmaster 2 gives you a fun way to take your techie language and translate it into something they can relate to.
Build a website you’ll be proud to share with the world.
One of the things users like best about using Be Theme is its huge selection of pre-built websites they can make a choice from (600 and counting to date!).
[– This is a sponsored post on behalf of BeTheme –]
Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to style elements based on the size of their parent container.
The @container API is not stable, and is subject to syntax changes. If you try it out on your own, you may encounter a few bugs. Please report those bugs to the appropriate browser engine!
You can think of these like a media query (@media), but instead of relying on the viewport to adjust styles, the parent container of the element you’re targeting can adjust those styles.
Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what “responsive design” means.
No longer will the viewport and user agent be the only targets we have to create responsive layout and UI styles. With container queries, elements will be able to target their own parents and apply their own styles accordingly. This means that the same element that lives in the sidebar, body, or hero could look completely different based on its available size and dynamics.
@container in action
CodePen Embed Fallback
In this example, I’m using two cards within a parent with the following markup:
Then, I’m setting containment (the contain property) on the parent on which I’ll be querying the container styles (.card-container). I’m also setting a relative grid layout on the parent of .card-container, so its inline-size will change based on that grid. This is what I’m querying for with @container:
Now, I can query for container styles to adjust styles! This is very similar to how you would set styles using width-based media queries, using max-width to set styles when an element is smaller than a certain size, and min-width when it is larger.
/* when the parent container is smaller than 850px,
remove the .links div and decrease the font size on
the episode time marker */
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
/* when the parent container is smaller than 650px,
decrease the .card element's grid gap to 1rem */
@container (max-width: 650px) {
.card {
gap: 1rem;
}
/* ... */
}
Container Queries + Media Queries
One of the best features of container queries is the ability to separate micro layouts from macro layouts. You can style individual elements with container queries, creating nuanced micro layouts, and style entire page layouts with media queries, the macro layout. This creates a new level of control that enables even more responsive interfaces.
Here’s another example that shows the power of using media queries for macro layout (i.e. the calendar going from single-panel to multi-panel), and micro layout (i.e. the date layout/size and event margins/size shifting), to create a beautiful orchestra of queries.
CodePen Embed Fallback
Container Queries + CSS Grid
One of my personal favorite ways to see the impact of container queries is to see how they work within a grid. Take the following example of a plant commerce UI:
No media queries are used on this website at all. Instead, we are only using container queries along with CSS grid to display the shopping card component in different views.
In the product grid, the layout is created with grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));. This creates a layout that tells the cards to take up the available fractional space until they hit 230px in size, and then to flow to the next row. Check out more grid tricks at 1linelayouts.com.
Then, we have a container query that styles the cards to take on a vertical block layout when they are less than 350px wide, and shifts to a horizontal inline layout by applying display: flex (which has an inline flow by default).
This means that each card owns its own responsive styling. This yet another example of where you can create a macro layout with the product grid, and a micro layout with the product cards. Pretty cool!
Usage
In order to use @container, you first need to create a parent element that has containment. In order to do so, you’ll need to set contain: layout inline-size on the parent. You can use inline-size since we currently can only apply container queries to the inline axis. This prevents your layout from breaking in the block direction.
Setting contain: layout inline-size creates a new containing block and new block formatting context, letting the browser separate it from the rest of the layout. Now, we can query!
Limitations
Currently, you can only use the inline axis to set container query styles. In order to make grid children work with @container, you’ll need to add a wrapper element. While it’s not ideal at the moment, you can still get the effects you want.
Try it out
You can experiment with the @container property in Chromium today, by navigating to: chrome://flags in Chrome Canary and turning on the #experimental-container-queries flag.
If your reaction is: great, a new thing I need to know about and learn, know that while Distributed Persistent Rendering (DPR) does involve some new things, this is actually a push toward simplification and leverages ideas as old as the web is, just like Jamstack.
It’s probably helpful to hear it right from Matt Biilmann, CEO of Netlify:
In that short video, he makes the point that React started out very simple and solved a lot of clear problems with JavaScript architecture and, as time goes on and it tries to solve more use-cases, it’s getting a lot more complicated and risks losing the appeal it once had in its simplicity.
Jamstack, too, faces this problem. The original simplicity of it was extremely appealing, but as it grows to accommodate more use-cases, things get complicated.
One of those complications are sites with many-thousands of pages. Sites like that can have really slow build times. It’s nice to see frameworks tackle that (Google “Incremental Builds {Your Favorite Framework}”), but heck, if you change one link in a site footer, you’re re-building the whole site based on that one change.
So instead of building many-thousands of pages during a build, say you just… didn’t. Until that page is requested once, anyway. That’s DPR.
Here’s Zach Leatherman doing that. He finds a spot on his site that generates some 400 pages on each build and tells Eleventy that instead of building it during the normal build process, defer it to the cloud (literally a lambda will run and build the page when needed).
Deferring those 400 pages saves seven seconds in the build. Say your site is more dramatic, like 16,000 pages. Scratch pad math says you are saving four minutes there. It’s not just time either, although that’s a biggie. I think of all the electricity and long-term storage you save building this way.
Just like coining the term “Jamstack” didn’t mean inventing an entirely new architecture from scratch, naming this concept of “Distributed Persistent Rendering” doesn’t mean we’re creating a brand new solution.
The term “DPR” is new to us, but in a lot of ways, we’re taking inspiration from solutions that have worked in the past. We’re simply reworking them to fit with modern Jamstack best practices.
I like that it’s not like this entirely new thing. I’m sure Netlify’s implementation of it is no joke, but for us, it’s very easy to think about:
Some pages are pre-built as usual
Some pages are not built (deferred)
When the non-built pages are requested for the first time, then they are built and cached so they don’t need to be built again.
That’s it, really.
It reminds me of how old WordPress caching plugins used to work. When a page was requested for the first time it would run the PHP and MySQL queries and all that, then save the result as an .html file to the disk to serve subsequent requests. Not new, but still efficient.
The trick to a DPR architecture on Netlify is using their (beta) On-Demand Builders, so here’s the blog post that explains everything and will get you to the docs and such.bui
This is extremely fun. Jeff Lindsay has created Topframe, and writes:
Anybody that knows how to mess around with HTML can now mess around with their desktop computing experience. Topframe is an open source tool that lets you customize your desktop screen using HTML/CSS/JavaScript.
The default screen after installing has some hardcore weirdweb energy.
My first thought was to fill my desktop with everything Dave likes from his RSS feed. But I tried dropping that JavaScript in and it didn’t work. I couldn’t debug it because there is no console to look at or anything. Oh well. I imagine practical use-cases include building little widgets with live data you want to keep an eye on at all times.
The other hiccup I had is that it messes with taking window screenshots. You know how you can go Command + Shift + 4 then Space on macOS to select just one window to screenshot? You can’t do that with this running because it’s always the top window. Hence “top frame” (get it?). I think it would be more fun to be “bottom frame” in that it would act more like a background instead of being always on top.
Apparently, Windows could do this a long time ago, proving (yet again) that there is nothing new under the sun.
From dev tools to productivity to a little bit of fun with sudoku, this month’s collection of new tools is packed with something for everyone.
Here’s what new for designers this month.
May’s Top Picks
Am I FLoCed?
Am I FLoCed? Is a tool to see if you are part of a Google Chrome origin trial. It tests a new tracking feature called Federated Learning of Cohorts (FLoC). According to Google, the trial currently affects 0.5% of users in selected regions, including Australia, Brazil, Canada, India, Indonesia, Japan, Mexico, New Zealand, the Philippines, and the United States. The page will try to detect whether you’ve been made a guinea pig in Google’s ad-tech experiment.
According to the designers of Am I FloCed: “FLoC runs in your browser. It uses your browsing history from the past week to assign you to a group with other ‘similar’ people around the world. Each group receives a label, called a FLoC ID, which is supposed to capture meaningful information about your habits and interests. FLoC then displays this label to everyone you interact with on the web. This makes it easier to identify you with browser fingerprinting, and it gives trackers a head start on profiling you.”
Uncut
Uncut is a Libre typeface catalog that just got started in April. It features contemporary typefaces and styles and is set to be updated regularly. Sort by sans serif, serif, monospace, or display typefaces. Plus, you can submit a typeface for inclusion.
Dashblock
Dashblock allows you to build automations without coding. Use it to create visual automations, or turn blocks into use-cases. (It is a premium tool, but comes with a 14-day free trial to test it out.)
Instant
Instant is a fast and secure one-click checkout tool that works with WooCommerce. Users fill out a short form the first time they shop and then join the network to enable instant, frictionless, 1-click checkouts without passwords. It makes shopping easier and cuts abandoned carts.
5 Image Tools
Triangula
Triangula uses a modified genetic algorithm to triangulate images. It works best with images smaller than 3000px and with fewer than 3000 points, typically producing an optimal result within a couple of minutes. The result is a nifty-looking image.
Content-Aware Image Resizing in Javascript
Content-Aware Image Resizing in Javascript solves that problem with images where you have a photo but it just doesn’t quite fit. A crop doesn’t work because you lose important information. The carver slices and cuts photos to give you the image elements you want in the size you want them. It’s probably a good idea to read through the tutorial before jumping into the open-source code on GitHub.
Globs Design
Globs Design uses toggles and drag and drop to help you create funky shapes and fills that you can save in SVG format for projects.
Root Illustrations
Root Illustrations is a stylish set of people-based illustrations that you can customize to create scenes for your projects. Construct a scene and then snag your set of vector graphics that also work with Sketch and Figma. The set includes 24 characters, more than 100 details, and the ability to change colors and styles.
Make Your Photo 16×9
Make Your Photo 16×9 is as simple as it sounds. It is a cropping tool that allows you to upload any shape of photo – even vertical – and pick options to fill the space to make it fit the standard 16×9 aspect ratio.
6 Dev Tools
Devbook
Devbook is a search engine for developers that helps them to find the resources they need and answer their questions faster. Fast, accessible right from a code editor, and fully controllable with just a keyboard.
Madosel
Madosel is a fast, advanced responsive HTML front-end framework that’s in an alpha version. The open-source tool is made to create websites and apps that look great on any device. Plus, it is semantic, readable, flexible, and customizable.
Say Hello to CSS Container Queries
Say Hello to CSS Container Queries helps solve a problem with media queries and smart stacking of elements. CSS Container Queries allow you to make a fluid component that adjusts based on the parent element and everything is independent of viewport width. This post takes you through everything you need to do to implement this yourself.
Frontend Toolkit
Frontend Toolkit is a customizable dashboard that you can use to keep up with recurring tasks. It’s one of those little tools that can speed up workflows.
Flatfile
Flatfile is a production-ready importer for SaaS applications. It allows you to auto-format customer spreadsheets without manual cleaning of data and you can do it all without a CSV parser. The tool also includes an elegant UI component to guide users through the process.
Plasmic
Plasmic is a visual website builder that works with your codebase. It’s designed to speed up development with developers focusing on code (not pixel pushing) and allows non-developers to publish pages and content. The premium tool works with any hosting, CMS, or framework and you can adapt it by the component, section, or page.
2 Productivity Tools
Calendso
Calendso is an open-source calendar scheduling tool. It’s flexible with the ability to host it yourself or with the makers of the calendar. It is API-driven and allows you to control events and information. The interface is simple and sleek and can integrate into your website.
Slidev
Slidev is a set of presentation slides for developers. What’s different about this presentation deck is that you can write slides in a single markdown file with themes, code blocks, and interactive components.
4 Icons and UI Kits
Iconic
Iconic is a set of pixel-perfect icons that gets updated each week. The collection of 24×24 px elements in SVG format contains 160 icons and counting. The simple style is easy to implement and you can search for just what you need by category.
5 Dashboard Templates for Figma
5 Dashboard Templates for Figma is a set of free ready-made screens with light and dark modes for each that you can use with components such as calendars, charts, tables, and more. The free elements are a preview of a larger premium Figma set if you like how they look and work.
Free Mobile Chat UI Kit
Free Mobile Chat UI Kit is a tool of components for Sketch, Figma, and Adobe XD that includes more than 50 messaging screens with light and dark modes.
Stratum UI Design Kit
Stratum UI Design Kit is a collection of more than 9,000 consistent elements for Figma. It’s packed with elements and tools that make this premium UI kit a tool that gets projects moving quickly.
4 Type Tools and Fresh Fonts
Fluid Typography
Fluid Typography is a nifty tool that allows you to test headings in any size at different viewports to ensure it looks great everywhere. Then you can copy the CSS and use it in your projects.
Eighty-Eight
Eighty-Eight is a funky block-style typeface for display use.
Harmonique
Harmonique is a robust typeface family with lovely serifs and alternates. It’s a type family of two styles that work in harmony together to add distinction and personality to your own typographic compositions. Harmonique’s low contrast forms have the appeal of a humanist sans serif typeface.
Sketchup
Sketchup is a charming display typeface that has a nice pen style. The free version has a limited character set.
Just for Fun
Generating and Solving Sudokus in CSS
Generating and Solving Sudokus in CSS by Lee Meyer for CSS-Tricks is a fun deep dive into using CSS for something you might not expect. It’s a complicated – but fun – look at some of the things CSS can do with plenty of code snippets. The final result is a solvable puzzle with 16 squares.
Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.
The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!
YouTube is the Web’s biggest video channel. Hundreds of hours of video are uploaded to the service every minute. The volume of data it stores and streams is beyond comprehension.
Owned by Google, YouTube has been central to our lives online in such a big way, that it’s almost unbelievable that it’s been with us for less than two decades.
If you’ve ever wondered just how big it is, which videos broke its records, or how many users it has, this is the infographic for you!
When you think about it, DNS configuration is actually a very rudimentary NoSQL database. You can view and modify it at any time quite easily through your domain provider’s website, and you can view each “record” just like a row in a database table.
Many services use DNS TXT records to verify domain ownership. You would essentially add or modify a TXT record to store a key/value pair, which the service will then query.
Why? It’s super fast and costs $0.50 + $0.40 per million queries.
There are even libraries (ten34, diggydb) to help do it. I wouldn’t do it just because I’d be scared Amazon wouldn’t like it and cut it off. Plus, ya know, there isn’t exactly auth.
When you think about it, DNS configuration is actually a very rudimentary NoSQL database. You can view and modify it at any time quite easily through your domain provider’s website, and you can view each “record” just like a row in a database table.
Many services use DNS TXT records to verify domain ownership. You would essentially add or modify a TXT record to store a key/value pair, which the service will then query.
Why? It’s super fast and costs $0.50 + $0.40 per million queries.
There are even libraries (ten34, diggydb) to help do it. I wouldn’t do it just because I’d be scared Amazon wouldn’t like it and cut it off. Plus, ya know, there isn’t exactly auth.
It’s easy to forget that, as a search engine, Google doesn’t just compare keywords to generate search results. Google knows that if people don’t enjoy their experience on a web page, they won’t stay on the page long enough to consume the content — no matter how relevant it is.
As a result, Google has been experimenting with ways to analyze the user experience of web pages using quantifiable metrics. Factoring these into its search engine rankings, it’s hoped to provide users not only with great, relevant content but with awesome user experiences as well.
Google’s soon-to-be-launched page experience update is a major step in this direction. Website owners with image-heavy websites need to be particularly vigilant to adapt to these changes or risk falling by the wayside. In this article, we’ll talk about everything you need to know regarding this update, and how you can take full advantage of it.
Note: Google introduced their plans for Page Experience in May 2020 and announced in November 2020 that it will begin rolling out in May 2021. However, Google has since delayed their plans for a gradual rollout starting mid-Jun 2021. This was done in order to give website admins time to deal with the shifting conditions brought about by the COVID-19 pandemic first.
Some Background
Before we get into the latest iteration of changes to how Google factors user experience metrics into search engine rankings, let’s get some context. In April 2020, Google made its most pivotal move in this direction yet by introducing a new initiative: core web vitals.
Core web vitals (CWV) were introduced to help web developers deal with the challenges of trying to optimize for search engine rankings using testable metrics – something that’s difficult to do with a highly subjective thing like user experience.
To do this, Google identified three key metrics (what it calls “user-centric performance metrics”). These are:
LCP (Largest Contentful Paint): The largest element above the fold when a web page initially loads. Typically, this is a large featured image or header. How fast the largest content element loads plays a huge role in how fast the user perceives the overall loading speed of the page.
FID (First Input Delay): The time it takes between when a user first interacts with the page and when the main thread is free for the browser to process the event. This can be clicking/tapping a button, link, or interacting with any other dynamic element. Delays when interacting with a page can obviously be frustrating to users which is why keeping FID low is crucial.
Cumulative Layout Shift (CLS): This calculates the visual stability of a page when it first loads. The algorithm takes the size of the elements and the distance they move relevant to the viewport into account. Pages that load with high instability can cause miscues by users, also leading to frustrating situations.
These metrics have evolved from more rudimentary ones that have been in use for some time, such as SI (Speed Index), FCP (First Contentful Paint), TTI (Time-to-interactive), etc.
The reason this is important is because images can play a significant role in how your website’s CWVs score. For example, the LCP is more often than not an above-the-fold image or, at the very least, will have to compete with an image to be loaded first. Images that aren’t correctly used can also negatively impact CLS. Slow-loading images can also impact the FID by adding further delays to the overall rendering of the page.
What’s more, this came on the back of Google’s renewed focus on mobile-first indexing. So, not only are these metrics important for your website, but you have to ensure that your pages score well on mobile devices as well.
What’s Going to Change? Page Experience for Google Search
It’s clear that, in general, Google is increasingly prioritizing user experience when it comes to search engine rankings. Which brings us to the latest update – Google now plans to incorporate page experience as a ranking factor, starting with an early rollout in mid-June 2021.
So, what is page experience? In short, it’s a ranking signal that combines data from a number of metrics to try and determine how good or bad the user experience of a web page is. It consists of the following factors:
Core Web Vitals: Using the same, unchanged, core web vitals. Google has established guidelines and recommended rankings that you can find here. You need an overall “good” CWV rating to qualify for a “good” page experience score.
Mobile Usability: A URL must have no mobile usability errors to qualify for a “good” page experience score.
Security Issues: Any flagged security issues will disqualify websites.
HTTPS: Pages must be served via HTTPS to qualify.
Ad Experience: Measures to what degree ads negatively affect the user experience on your web page, for example, by being intrusive, distracting, etc.
As part of this change, Google announced its intention to include a visual indicator, or badge, that highlights web pages that have passed its page experience criteria. This will be similar to previous badges the search engine has used to promote AMP (Accelerated Mobile Pages) or mobile-friendly pages.
This official recognition will give high-performing web pages a massive advantage in the highly competitive arena that is Google’s SERPs. This visual cue will undoubtedly boost CTRs and organic traffic, especially for sites that already rank well. This feature may drop as soon as May if it passes its current trial phase.
Another bit of good news for non-AMP users is that all pages will now become eligible for Top Stories in both the browser and Google News app. Although Google states that pages can qualify for Top Stories “irrespective of its Core Web Vitals score or page experience status,” it’s hard to imagine this not playing a role for eligibility now or down the line.
Key Takeaway: What Does This Mean For Images on Your Website?
Google noted a 70% surge in consumer usage of their Lighthouse and PageSpeed Insight tools, showing that website owners are catching up on the importance of optimizing their pages. This means that standards will only become higher and higher when competing with other websites for search engine rankings.
Google has reaffirmed that, despite these changes, content is still king. However, content is more than just the text on your pages, and truly engaging and user-friendly content also consists of thoughtfully used media, the majority of which will likely be images.
With the proposed page experience badges and Top Stories eligibility up for grabs, the stakes have never been higher to rank highly with the Google Search algorithm. You need every advantage that you can get. And, as I’m about to show, optimizing your image assets can have a tangible effect on scoring well according to these metrics.
What Can You Do To Keep Up?
Before I propose my solution to help you optimize image assets for core web vitals, let’s look at why images are often detrimental to performance:
Images bloat the overall size of your website pages, especially if the images are unoptimized (i.e. uncompressed, not properly sized, etc.)
Images need to be responsive to different devices. You need much smaller image sizes to maintain the same visual quality on smaller screens.
Different contexts (browsers, OSs, etc.) have different formats for optimally rendering images. However, most images are still used in .JPG/.PNG format.
Website owners don’t always know about the best practices associated with using images on website pages, such as always explicitly specifying width/height attributes.
Using conventional methods, it can take a lot of blood, sweat, and tears to tackle these issues. Most solutions, such as manually editing images and hard-coding responsive syntax have inherent issues with scalability, the ability to easily update/adjust to changes, and bloat your development pipeline.
To optimize your image assets, particularly with a focus on improving CWVs, you need to:
Reduce image payloads
Implement effective caching
Speed up delivery
Transform images into optimal next-gen formats
Ensure images are responsive
Implement run-time logic to apply the optimal setting in different contexts
ImageEngine is an intelligent, device-aware image CDN that you can use to serve your website images (including GIFs). ImageEngine uses WURFL device detection to analyze the context your website pages are accessed from (device, screen size, DPI, OS, browser, etc.) and optimize your image assets accordingly. Based on these criteria, it can optimize images by intelligently resizing, reformatting, and compressing them.
It’s a completely automatic, set-it-and-forget-it solution that requires little to no intervention once it’s set up. The CDN has over 20 global PoPs with the logic built into the edge servers for faster across different regions. ImageEngine claims to achieve cache-hit ratios of as high as 98%+ as well as reduce image payloads by 75%+.
Step-by-Step Test + How to Use ImageEngine to Improve Page Experience
To illustrate the difference using an image CDN like ImageEngine can make, I’ll show you a practical test.
First, let’s take a look at how a page with a massive amount of image content scores using PageSpeed Insights. It’s a simple page, but consists of a large number of high-quality images with some interactive elements, such as buttons and links as well as text.
FID is unique because it relies on data from real-world interactions users have with your website. As a result, FID can only be collected “in the field.” If you have a website with enough traffic, you can get the FID by generating a Page Experience Report in the Google Console.
However, for lab results, from tools like Lighthouse or PageSpeed Insights, we can surmise the impact of blocking resources by looking at TTI and TBT.
Oh, yes, and I’ll also be focussing on the results of a mobile audit for a number of reasons:
Google themselves are prioritizing mobile signals and mobile-first indexing
Optimizing web pages and images assets are often most challenging for mobile devices/general responsiveness
It provides the opportunity to show the maximum improvement a image CDN can provide
With that in mind, here are the results for our page:
So, as you can see, we have some issues. Helpfully, PageSpeed Insights flags the two CWVs present, LCP and CLS. As you can see, because of the huge image payload (roughly 35 MB), we have a ridiculous LCP of nearly 1 minute.
Because of the straightforward layout and the fact that I did explicitly give images width and height attributes, our page happened to be stable with a 0 CLS. However, it’s important to realize that slow loading images can also impact the perceived stability of your pages. So, even if you can’t directly improve on CLS, the faster sizable elements such as images load, the better the overall experience for real-world users.
TTI and TBT were also sub-par. It will take at least two seconds from the moment the first element appears on the page until when the page can start to become interactive.
As you can see from the opportunities for improvement and diagnostics, almost all issues were image-related:
Setting Up ImageEngine and Testing the Results
Ok, so now it’s time to add ImageEngine into the mix and see how it improves performance metrics on the same page.
Setting up ImageEngine on nearly any website is relatively straightforward. First, go to ImageEngine.io and signup for a free trial. Just follow the simple 3-step signup process where you will need to:
provide the website you want to optimize,
the web location where your images are stored, and then
copy the delivery address ImageEngine assigns to you.
The latter will be in the format of {random string}.cdn.imgeng.in but can be updated from within the ImageEngine dashboard.
To serve images via this domain, simply go back to your website markup and update the src attributes. For example:
That’s all you need to do. ImageEngine will now automatically pull your images and dynamically optimize them for best results when visitors view your website pages. You can check the official integration guides in the documentation on how to use ImageEngine with Magento, Shopify, Drupal, and more. There is also an official WordPress plugin.
Here’s the results for my ImageEngine test page once it’s set up:
As you can see, the results are nearly flawless. All metrics were improved, scoring in the green – even Speed Index and LCP which were significantly affected by the large images.
As a result, there were no more opportunities for improvement. And, as you can see, ImageEngine reduced the total page payload to 968 kB, cutting down image content by roughly 90%:
Conclusion
To some extent, it’s more of the same from Google who has consistently been moving in a mobile direction and employing a growing list of metrics to hone in on the best possible “page experience” for its search engine users. Along with reaffirming their move in this direction, Google stated that they will continue to test and revise their list of signals.
Other metrics that can be surfaced in their tools, such as TTFB, TTI, FCP, TBT, or possibly entirely new metrics may play even larger roles in future updates.
Finding solutions that help you score highly for these metrics now and in the future is key to staying ahead in this highly competitive environment. While image optimization is just one facet, it can have major implications, especially for image-heavy sites.
An image CDN like ImageEngine can solve almost all issues related to image content, with minimal time and effort as well as future proof your website against future updates.
