Our engineering teams develop and maintain several high-traffic consumer web sites, such as KBB.com and Autotrader.com. We aim to combine frictionless user experience with quality, trustworthy content to meet our vision of transforming the way the world buys, sells, owns and uses cars.
Web performance analysis helps us understand how visitors perceive our site performance and measure impact of updates to user experience. Over the last year, our engineering team has worked on various aspects of web performance. Keep reading to learn about the changes we have implemented to reduce Cumulative Layout Shift for KBB.com home page.
According to this Google Developers Article, “Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability…” The metric flags shifting of content that happen without user interaction and as such is considered unexpected by visitors browsing the site.
In the screenshot below, you can see how even a small 50px shift of the element marked with the blue border moves the element marked with the red border down, below its initial placement. As we have all experienced, it is frustrating to accidentally tap on the wrong place or lose focus when the text you started reading unexpectedly shifts. Optimizing CLS score helps avoiding such situations.
To guide us with suggestions on performance improvements, our engineering team utilizes Lighthouse. This open-source automated tool audits page performance and can be run against any web page in Chrome browser DevTools, as well as from command line, or as a Node module. Cumulative Layout Shift is one of six performance metrics tracked by Lighthouse. While the CLS metric accounted for only 5% of the Performance Score in previous versions of Lighthouse, current version 8 updated its weighting to 15%, as can be seen in the Lighthouse Scoring Calculator. Additionally, in 2021 Cumulative Layout Shift metric was included in Google page experience signals as part of Core Web Vitals. Because of the increased emphasis on CLS in Lighthouse and Core Web Vitals, we chose to focus on this metric as a part of our overall performance effort.
The CLS metric is most successful when approaching zero. The lower the CLS score, the less unexpected shifting our visitors see when browsing a page. Thus, our goal was to get the CLS score as close as possible to zero for the most pleasant user experience. As the first step, we decided to optimize Cumulative Layout Shift for the initial (first) viewport – the visible area of the web page and page elements as they come into view and before visitors start interacting with the page. We defined 4 primary areas of improvement: optimizing fonts, server-side rendering styles, adding stability to visual elements on the page and optimizing advertisement modules.
Layout shift related to fonts is usually caused by a slight delay in displaying text with custom fonts (so called “Flash of Unstyled Text”). To display page content as soon as possible, browsers display text with default fonts while downloading custom fonts. When custom fonts become available, browsers apply them to text. The difference in width between default and custom fonts can be significant, causing re-adjustment of text sections of the page.
The screenshot below illustrates how applying custom font to the “Shop Smart – Step by Step” heading causes the text to wrap onto the next line, and shifts the module marked with the blue border below its initial placement:
To address Flash of Unstyled Text, we tested out multiple configuration settings for web fonts and decided on the following setup:
Even though layout shift with this setup is still possible, these changes minimized layout shift related to fonts.
Layout shift related to styles is usually caused by a slight delay in loading and applying styles (so called “Flash of Unstyled Content”).To avoid a performance impact from downloading external CSS stylesheets, we render styles on the server with the help of Emotion library. With this approach, browsers receive page HTML document with all styling embedded and can efficiently parse and display HTML content.
Some of the layout shifts for visual elements can happen when server-rendered HTML elements such as img or iframe lack dimensions. Initially rendering such elements with width and height of zero, browsers adjust their dimensions when loading is complete. We were able to improve user experience and prevent such layout shifts by implementing styling rules and adding width/height or aspect ratios to all the images, frames, or their parent containers.
Another potential culprit of increased layout shift and worse user experience is client-side processing. We use React library, and all content rendered on the server goes through additional processing in the browser (client-side); all events are attached, and additional content or data is loaded after network requests. It is important to minimize pushing the content down or collapsing elements during such client-side processing.
We evaluated all modules visible in the first viewport that load in part or entirely on the client and implemented a set of rules to improve CLS and user experience:
An example of a big win with decreasing our CLS score associated with client-side processing was a change we made to an expander component. The expander used to render about 200px of text first, only to collapse this text to 50px of height a second later. By rendering the expander component in collapsed state on the server, we fixed subpar performance of the expander component, lowered our CLS score and ensured our page visitors had a better experience!
Advertisement content deserves its own section in this blog post, as ad content can be one of the largest contributors to layout shifts. With most ad rendering happening on the client, and ad publishers sharing some of the prominent and highly visible page placements, maintaining satisfactory user experience is particularly important.
Kelley Blue Book uses Google Ads/Google Publisher Tags (GPT) to serve advertisement content. Even though ad slots may be rendered server-side, ad fulfillment always happens on the client. When advertisement creative is displayed within an iframe it is excluded from CLS metric measurements, however advertisement containers themselves are always included in the metric and should be optimized. This article from Google suggests some ideas of how to minimize layout shift from advertisement.
In collaboration with ad sales, operations, and product teams we implemented several important updates to lower layout shift related to advertisement:
Looking at the end-result of our efforts, you can tell that the homepage now maintains good visual stability of HTML elements:
We validated all changes by running Lighthouse tool and tracking improvements of Cumulative Layout Score value (part of Lighthouse Performance Score). After working through all optimizations not only we achieved the best possible CLS score of zero, but also established a set of best practices to maintain this perfect CLS score in the future.
Filmstrip in the Lighthouse report below shows how visually stable KBB.com homepage is after all our updates:
We should consider that CLS metric in Google Lighthouse measures only layout shift within the first viewport and does not emulate user scrolling down the page or interacting with page elements. However, as part of the Core Web Vitals, CLS metric is “…measurable in the field, and reflects the real-world experience.”
I plan on covering Core Web Vitals CLS optimizations in my next blog post, so stay tuned to learn more about the inner workings of Kelley Blue Book Engineering team!
Learn how Cox Automotive technology teams are building a more connected and mobile future here.
Are you interested in joining our engineering team? Explore open positions here.
In this blog post, the engineering team at Kelley Blue Book – which is part of the Cox Automotive family of brands – provides a behind-the-scenes peek into the technology that powers one of the most trusted resources in the automotive industry.
On the Kelley Blue Book (KBB) engineering team, we highly value the performance and availability of our applications to support our heavily trafficked consumer site.
Fortunately for us, these applications require only a relatively moderate amount of primarily read-only data, in the hundreds of thousands of data points for most of the core functionality across several high traffic areas. To achieve this core functionality, we do not often need to create or update existing information.
Our needs in a data store
Given our high availability and performance goals and our desire to ensure data consistency across systems, a highly-performant distributed data-store with great read capabilities seemed like the best match for our needs. Because we wanted our solution to be easily usable for multiple teams with slightly different data requirements, we elected to use a distributed cache approach, with independent caches allocated to each application to ensure separation of concerns.
The service we chose
Our applications run on AWS, so we chose to use ElastiCache, which provides the ability to choose from either Memcached or Redis. We ended up crafting our common codebase to be able to use either one, which gives our teams the ability to make the choices that work best, but the teams primarily ended up going with Memcached.
We have been using ElastiCache as a key-value store, where the values are JSON-encoded objects and the keys are unique, for instance matching the API endpoint that returns the data. This key syntax made it easy for us to write a simple function which allows us to utilize read-through caching, where our cache sits in front of the data store and we will make a request to the data store if the key is not found in the cache.
The benefits
This approach provides several benefits beyond just decreasing the response time of the current request. These additional benefits include reducing the strain on our APIs, improving our response times for subsequent requests and ensuring availability of previously requested data for the applications even if the underlying data store becomes unavailable or suffers from degraded performance. As shown in the graphic below, our response times are significantly higher when the cache is disabled. In fact, the average response time is almost doubled when the cache is disabled.
Pre-loading commonly requested fields
We have a good knowledge of which data will be most frequently utilized in our systems. As such, we chose to preload our high-level data, such as the details of each basic vehicle configuration. For requests that are likely not to be repeated, such as the pricing information for a fully configured vehicle for a specific location, we’ll make that request on demand.
We set a TTL (time to live) of the items in the cache to 8 hours and will “pre-cache” items every 6 hours, or whenever the data version for underlying data changes. We pre-cache anything that is likely to be requested multiple times. We have considered a few architectures for our approach to pre-caching, but for a few years now, we have been using AWS step functions, breaking different categories of data into different steps. We first run all the base steps, then we run the next set in parallel. For each step, we run those in parallel up to a maximum concurrency to ensure we fall below throttling limits.
By using this approach to storing and reading our data, our response times have decreased significantly, which helps our visitors search for their vehicle information approximately 50% faster than before. We’re really excited about the performance gains we have been able to make so far, and are looking forward to sharing more about our next set of improvements in a future blog post.
Learn how Cox Automotive technology teams are building a more connected and mobile future here.
Are you interested in joining our engineering team? Explore open positions here.
This month, we’re spotlighting the people who work Behind the Code at Cox. Read below to learn how our technology employees are building a better tomorrow.
For Tonya Wallace, being agile is a way of life.
We’re not just talking about being flexible and resilient (though as a hardworking mother of six, Tonya has plenty of experience with that too!). We’re referring also to Agile methodology: an IT project management approach used to deliver fast, high-quality technology solutions.
Tonya, Director of Agile Delivery at Cox Automotive, is an advocate and user of the agile methodology and its accompanying frameworks. She knows firsthand that the methodology allows for collaboration and quicker results.
“Our company drives to the same scaled agile framework, which helps to deliver high business value in short-cycle increments,” Tonya explained. “That’s the whole point of agility: to get the product out to the customer as quickly as possible, to get feedback as quickly as possible and to iterate on what that feedback is.”
Tonya leads agile delivery for four release trains. Each powers finance and insurance solutions that enable the behind-the-scenes of the car-buying process, such as digital contracting and lender aftermarket products. The newest of her release trains will lead Cox Automotive’s AWS migration to cloud services in a two-year effort.
The importance of agility really hit home for Tonya in March 2020, when COVID struck and automotive dealers could not be on-site in their offices.
“So what do you do if you’re a dealer who’s still relying on paper and face-to-face transactions?” said Tonya. “We quickly pivoted and delivered assisted remote signing out into the field. That’s the benefit of having smart people working within an agile framework. We broke down silos. People worked across different teams and trains, and we leveraged our remote environment like nobody’s business.”
Tonya’s tech roots were planted in 2002 when she opened a small, minority-owned tech company to build custom applications with small teams of developers.
“I fell in love with requirements, automation, collaboration, iterative development and relentless improvement,” Tonya said of her first experience in the field. “I didn’t find out about Agile until years later, and I went back to school for my MBA in project management in order to enhance my understanding and knowledge about the project management discipline.”
Post-graduation, Tonya hit the ground running with her new passion and skills.
She was hired as a business analyst with the Department of Revenue, where she participated in Agile transformation. She moved on to a pharmaceutical company, where she led the cloud platform Agile team as a process specialist and trainer, coach and consulting liaison. Afterwards, she became senior scrum master and Agile coach at an automotive technology company. But in these positions, Tonya said she found the project management process to be – well, not agile.
“It was very heavy, very rigorous, very stringent,” Tonya said about one experience. “No one led with the ‘why,’ so people didn’t understand why we were doing things the way we were doing them, and if we lack buy-in, it creates gaps.”
A friend who worked at Cox recommended that Tonya explore a position with the company. In 2018, Tonya became a senior release train engineer for Cox Automotive’s DealerTrack brand. Not only did Tonya find Cox’s tech teams more conducive to Agile, but her leadership skills blossomed in Cox’s flexible environment too. Tonya has since spearheaded initiatives, facilitated DISC personality trainings and served as a thought leader in the industry.
Tonya has the heart of a teacher, and that translates to her life outside of work too. She loves being able to nurture and coach her daughter and five sons.
“The way I parent is the way I coach an agile team,” she said. “I believe the strong foundational principles of having the confidence to fail fast, self-organize, be courageous and transparent and drive toward relentless improvement builds solid character. I will often run mini retrospectives after practices and games!”
Tonya contrasted Cox with other companies when it comes to valuing employees.
“I love that Cox gives engineers a voice,” she said. “I’ve seen workplaces where it’s more of a ‘just sit there and code’ type of environment. Not here. They encourage communication and transparency. All teams have the ability to share ideas. We have senior leaders inboxing engineers to say things like ‘How are you? Is everything going okay? I saw you did XYZ today and I wanted to thank you.’ I’ve never had that at any other company.”
Tonya said one reason why voices are elevated at Cox is because it’s a culture of achievement.
“This is an organization of high-performers,” Tonya said (and she would know!). “What we do matters. We’re creating things that will progress our culture, our environment, our world and how we do business tomorrow.”
Tonya, who is part of Cox’s diversity and inclusion working group, added that Cox is intentional about its stance on increasing numbers of minority employees in leadership positions and nurturing talent and diverse employees within the company.
And the cherry on top?
“Sometimes in companies, you’ll find personalities clashing and a cutthroat environment. I’ve found that people here are nice. I mean, actually, genuinely nice. We’re constantly pushing the message of collaboration, communication and respect. I’ve never seen leaders so accommodating and caring.”
Interested in learning more about the people who make innovation happen at Cox? Check out the rest of our Behind the Code series and follow along on social using #BehindTheCode.
This month, we’re spotlighting the people who work Behind the Code at Cox. Read below to learn how our technology employees are building a better tomorrow.
In another life, Emmet McGuire might have been a carpenter.
It’s something of a family business: his father, uncles and brother all do carpentry for a living. And while Emmet isn’t a craftsman by trade, he loves building things and always has a project happening at his home in Burlington, VT.
His talent for constructing things makes Emmet a natural fit for his role as a Lead Software Test Engineer at Cox Automotive.
“I think my family’s history of carpentry instilled in me the passion to build things the right way, which translates well to developing software,” he said.
In 2009, Emmet started working a software tester at Dealer.com (acquired by Cox Automotive in 2015). He’s been promoted many times since, becoming a QA tester, a QA engineer, a senior QA engineer, a lead QA engineer and a senior software test engineer before moving into his current position.
Emmet loves the variety of projects he’s worked on at Cox.
“I have had the opportunity to work in different product spaces over the years,” he said. “When I was part of the Dealer.com group, I worked on teams that developed our websites as well as the backend services which support our websites and inventory. I got to work on projects for large customers like Ford and Subaru, but also projects that were used by the millions of users shopping for cars on Dealer.com websites.”
Emmet was an electrical engineer at a large technology company before joining Dealer.com.
“That switch was like a breath of fresh air to me,” he said. “I took computer science classes as part of my education and I always enjoyed them, but it wasn’t until I started my career as an electrical engineer that I realized hardware wasn’t for me. I wanted to work on software.”
Emmet explained that in his previous job, projects took months or even years to complete.
“But being on an Agile Scrum team at Cox Auto, we work in two-week sprints and that’s a much better pace for me. You also have a much closer working relationship with your team, and that’s what I needed to be successful.”
Emmet credits those close relationships with his growth as a technical leader. And he loves the fact that he and his colleagues have a prominent voice in the company.
“Working in tech at Cox Automotive is simultaneously fun, exciting, challenging and rewarding,” he said. “I think for a lot of companies, the testing role is looked at as an afterthought or secondary to the development team, but that couldn’t be further from the truth when it comes to Cox Auto.”
Cox’s tech team members are high performers, and Emmet said he is consistently challenged to evolve the way he develops and tests software. One example he gave was the company’s switch from traditional development and release processes to CI/CD, which brings with it a slew of challenges.
“As a team, we had to learn what the implications of that were, and how to best handle it,” he said. “I am very proud of the process that we came up with, and we feel extremely comfortable releasing production changes that impact millions of users a month multiple times a day without users noticing any issues.”
Emmet explained that when there is an issue, his team almost always knows about it before any customers do.
“For the application my team owns, we have a 99.95% availability, so we can’t have many outages and we’ve been able to keep that standard, while releasing as frequently as we do. From a testing point of view, the primary process we use for maintaining that availability through all our releases are Blue/Green deploys, and running automated tests on the inactive instance before routing traffic to the new instance. That’s a massive oversimplification, but that’s a critical process for achieving the high level of success that we have been able to achieve.”
COVID has changed a lot of things about the average workweek. Emmet believes that his team’s relationships and rapport have remained intact.
“In terms of environment and culture, my team is like my second family,” he said. “I really enjoy working with every single person, and they are all incredibly smart, thoughtful people. I don’t think there is a single person at Cox Auto that I couldn’t learn from, and that’s a very humbling experience.”
Interested in learning more about the people who make innovation happen at Cox? Check out the rest of our Behind the Code series and follow along on social using #BehindTheCode.
Monique Cobbins describes herself as a “second-generation car girl.”
Because her father worked in automotive sales (and is still a dealer today), Monique grew up in-the-know about the behind-the-scenes of a car dealership – the lingo, the systems, and what makes them successful. But she didn’t initially envision herself following a similar path.
“I was turned off by the automotive industry because that’s all I saw my whole life,” Monique laughed. “But then I got into it and fell in love with it.”
Monique worked in a dealership for seven years before being recruited to Cox. Now, she draws on her rich knowledge of the automotive world and merges it with her joyful personality and her love for the products that Cox Automotive provides. She is an Inside Regional Sales Manager at Cox Automotive, working remotely in Mission, KS and specifically focused on selling VinSolutions’ customer relationship management (CRM) platform to car dealers in the New England area.
“If I was describing what I do to someone outside of this industry, I would say that I sell the software that is really the heart of every car dealership,” Monique said.
Monique loves the feeling of knowing a product inside and out and being able to educate dealers on the topic.
“Having the ability to demonstrate and explain the benefits to a dealer principal or a GM…I mean, there’s such a sense of achievement to be able to say: ‘I know my product, and I have the best product in the market.”
Monique recounts many scenarios that sharpened and inspired her as a sales team member at Cox – from learning the Challenger method of sales to clinching a deal with one of the biggest automotive groups in the Massachusetts area.
She commented that Cox sales employees like herself are recognized and rewarded for their diligence and the pride they put into their work.
“Working for a goal-oriented, family-owned company that understands the industry and market makes you feel so safe and protected,” she said. “You’re put in positions to succeed. I love the open-door policy at Cox: letting leaders know your career goals, and then them investing in you and pointing you in the right direction.”
When she’s not closing VinSolutions deals, you’ll often find Monique with her three sons, all of whom play competitive basketball. Being a basketball mom keeps her schedule full, but she also loves to travel with girlfriends across the country.
Working at Cox Automotive makes Monique feel like she’s part of something bigger.
“Working for a company where you actually feel like you’re part of the “why” and the bottom line just makes you have such a sense of pride in what you do,” she said. “If you’re serious about becoming a sales consultant, this is the place for you. If you are a dedicated person, and dedicated to growing yourself, this is the company where you need to be.”
Interested in learning more about the salespeople who drive Cox forward? Check out the rest of our For the Love of Sales series and follow along on social media using #ForTheLoveOfSales.
The moment you meet Elisa Pulido, you can sense that she is a born collaborator.
Elisa exudes a vibrant energy that not only suits her well for a career in sales, but also for working closely with teammates in order to stand out in the whirlwind of the automotive industry.
“That’s one of the things I can tell Cox really cares about: teamwork matters,” Elisa said. “The collaboration is real.”
Elisa is a Senior Dealer Success Consultant at Cox Automotive, where she serves as a trusted partner and resource for automotive dealers. She specifically supports Cox’s Autotrader brand, helping dealers find opportunities to engage car shoppers online.
“[We’re] able to walk into a dealership and sit with a GM, a dealer principal, a digital marketing manager – whatever the case may be – and really help them,” Elisa explained. “It’s about providing a consultant-based opinion on a broad digital strategy; and helping them fine-tune their operations from inventory acquisition to pricing to merchandising. We help them not only become successful with Autotrader, but beyond.”
Elisa’s go-getter attitude has propelled her through a thriving career in sales, going from radio to pharmaceuticals to television to her current job at Cox Automotive.
“I was taught that if you do the right thing even when no one’s looking, those types of qualities and actions will get you further and help you rise to the top,” Elisa said. “Always be humble and try to be the hardest worker in the room. Do the right thing every day, and it compounds.”
Elisa embodies this attitude outside of work, too. A fitness guru, she is passionate about building healthy habits with her husband and their five-year-old son, Liam. She is also a big fan of the Peloton community and loves the sisterhood she has found by connecting with other cyclists.
“When we do live rides together, it’s not about who’s the best or the fastest,” Elisa said. “It’s about carving out time for yourself. I love being part of a team and uplifting others. Being a part of a community seems to be a common theme for me,” she added with a laugh.
Elisa knows that collaboration not only results in strong rapport with coworkers, but is also good for business.
“Handing off clients to other sales team members in different business units (BUs) was nerve-wracking in the beginning,” she said. “Delegating has always been hard for me. And when we work cross-collaboratively across BUs, you’re really talking about handing off a relationship. But last year, if you look at referral-based [sales], I was one of the top in different products because I realized that I could be confident in other teammates and build deeper relationships. Now, I always have someone in those BUs I can lean on. It’s never a fight of ‘let me be the hero.’ It’s true collaboration.”
At Cox, Elisa has discovered that teamwork habits are by no means limited to coworkers in the same location.
“One of the things I was concerned about coming into this position is that everyone is in a different location,” said Elisa, who is based in south Texas. “I was used to an office environment where everyone leaned on each other. I’ve been utterly shocked with the amount of collaboration that you can still have when you’re 300 miles away from someone!”
Elisa added that especially now, in a virtual world, she feels more connected to her colleagues than ever.
“There’s a true form of community across the nation,” she said. “I know it’s hard to believe, but it’s true. Being able to know that everybody has your back and that you’re all pushing for the same thing? Every step of my journey with Cox has been built on that.”
Interested in learning more about the salespeople who drive Cox forward? Check out the rest of our For the Love of Sales series and follow along on social media using #ForTheLoveOfSales.
We’re changing out our tools to provide a better experience for you. Between June 16-22, we will not have any open jobs published on our careers website, but please join our talent community and come back after June 22 to search and apply. Thank you!