# caviar

Published articles for caviar.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Mobile Web Performance @ Caviar

DevFeed: [Mobile Web Performance @ Caviar](<https://devfeed.tech/articles/mobile-web-performance-caviar-27015.md>)

Original publisher: [Read original article](<https://medium.com/square-corner-blog/mobile-web-performance-caviar-1a57da0cc233?source=rss----3650599ae4e2---4>)

Author: Evelyn Chan

Published: 2019-03-28T22:46:49Z

Content type: tutorial

Language: en

Sources: [Square Corner Blog - Medium](<https://devfeed.tech/sources/square-corner-blog-medium.md>)

Topics: [Mobile](<https://devfeed.tech/topics/mobile.md>), [Web](<https://devfeed.tech/topics/web.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [Latency](<https://devfeed.tech/topics/latency.md>), [React](<https://devfeed.tech/topics/react.md>), [Rails](<https://devfeed.tech/topics/rails.md>)

Tags: [caviar](<https://devfeed.tech/tags/caviar.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [mobile-web](<https://devfeed.tech/tags/mobile-web.md>), [performance](<https://devfeed.tech/tags/performance.md>), [programming](<https://devfeed.tech/tags/programming.md>), [rails](<https://devfeed.tech/tags/rails.md>), [react](<https://devfeed.tech/tags/react.md>), [web-development](<https://devfeed.tech/tags/web-development.md>), [web-performance](<https://devfeed.tech/tags/web-performance.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

### AI overview

This article describes Caviar's effort to improve mobile web performance after recognizing that its website had been built primarily for desktop. It focuses on auditing the home page with Google Lighthouse and examining the React/Rails front-end bundle with Webpack and Webpack Bundle Analyzer.

### Source excerpt

Heads up, we've moved! If you'd like to continue keeping up with the latest technical content from Square please visit us at our new home https://developer.squareup.com/blog Across any e-commerce website, page load times are directly correlated with conversion rate. Faced with a page that takes longer than 3 seconds to load, 53% of users drop off, perhaps never to return. A 1 second delay in load time results in a 7% loss in conversions, 11% fewer page views, and 16% decrease in customer satisfaction. In terms of SEO, slow page speeds also impact indexing algorithms, which hurt crawl efficiency and leads to fewer pages being indexed. For consumers on mobile, slow speeds are even more painful. As more and more consumers move towards a mobile first experience, we need to optimize for speeds that don't necessitate blazingly fast internet or even 4G speeds. Typically, improvements in this area means managing your requests and what you load better and more efficiently. This mobile first perspective is top of mind for Caviar as we expand to new markets this year. During our adoption of this methodology, we started noticing that trying out new features on mobile web seemed to take unusually long. We realized that our mobile web experience was far from ideal as the Caviar website was originally built for desktop. The shift in perspective from desktop to mobile was not a clean switch from a developer standpoint as we naturally have more resources for web and are less likely to test for mobile. We mapped out the core webpages on our user's critical path and decided to focus on the starting point: our home page. This is the page most visitors of trycaviar.com start off on and remains one of our most trafficked pages. We used Google Lighthouse to audit our home page as a baseline and full disclosure -- it was not pretty. Our initial Lighthouse audit.Setting Up Metrics At Caviar, our stack includes React/Rails on our web interface bundled with Webpack, a build tool commonly used