Add mobile performance post #9106
Conversation
| @@ -7,7 +7,7 @@ tags: ["content-mesh"] | |||
|
|
|||
| _This is Part 2 of a series. You may want to read Part 1:_ [Delivering Modern Website Experiences: The Journey to a Content Mesh](/blog/2018-10-04-journey-to-the-content-mesh). | |||
|
|
|||
| Web users’ expectations follow a simple law: they always increase over time. | |||
| Web users’ expectations follow a simple law: they always increase over time. | |||
There was a problem hiding this comment.
Maybe
User expectations follow a simple law: they always increase over time.
(The apostrophe is correct, I just don't usually like using it like that 😅 )
There was a problem hiding this comment.
also should've commented on this way sooner!
There was a problem hiding this comment.
I'll probably leave this as is now :) I like using "Web" in this sentence.
|
|
||
| Why is that? Increased site complexity often distributes bottlenecks across multiple code points and teams of stakeholders. While performance checklists exist, they’ve ballooned to 40+ items -- making them costly and time-consuming for teams to implement. | ||
|
|
||
| As my co-founder Kyle Mathews likes to say (paraphrasing Tolstoy): "All fast websites are alike, but all slow websites are slow in different ways." |
There was a problem hiding this comment.
maybe tweak this to as our or as Gatsby's co-founder?
There was a problem hiding this comment.
(also maybe just use a blockquote here)
|
|
||
| Data from the HTTPArchive shows how long it's taken for the average page on the Internet to completely load all content (including images, script files, CSS files, etc.): | ||
|
|
||
| <figure> |
There was a problem hiding this comment.
Just as info, you can just use [Web performance over time](./web-perf-over-time.png) and the gatsby-remark-images plugin should create this structure for you per the source
We need to enable showCaptions in gatsby-config.js in www though. Could be worth doing.
There was a problem hiding this comment.
I'll keep this as is for now -- if we want to enable showCaptions can use in future.
|
|
||
| Second, the **growing complexity of websites**. Non-critical images, CSS, JS libraries, and 3rd party tracking software will often unintentionally end up on the critical path to page load: | ||
|
|
||
| - A marketing analyst drops a `<script>` tag from a hot new vendor inside a Google Tag Manager container. This triggering a blocking network call to a pixel provider on page loads. Time To Interactive (TTI) now averages 800ms longer. |
|
|
||
| - The business unit of an e-commerce store needs additional inventory management tools, so they purchase a popular plugin in their CMS ecosystem that offers this functionality. What they don’t know is that this plugin adds additional database calls every time a user loads a product page, delaying overall page loads by 500ms. | ||
|
|
||
| With website performance rarely tracked, almost never systematically, and with no performance "owner", load times balloon by default. |
There was a problem hiding this comment.
maybe?
it's easy to see how load times can balloon.
instead of "load times balloon by default"
|
|
||
| With website performance rarely tracked, almost never systematically, and with no performance "owner", load times balloon by default. | ||
|
|
||
| Like factory floors before the advent of [just-in-time manufacturing](https://en.wikipedia.org/wiki/Just-in-time_manufacturing), website page loading paths are clogged with work being done prematurely, creating resource contention and increasing cycle time. |
|
|
||
| - Movements such as [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) and the [JAMstack](https://jamstack.org/) have brought attention to site performance as a first-order goal. | ||
|
|
||
| _Performant_ is the new _responsive_. |
|
|
||
| Payload optimization and delivery optimization are complementary approaches. That’s both good news -- you _can_ do both -- and bad news -- you often _need_ to do both. | ||
|
|
||
| For example, if you use a CDN to serve 3MB Javascript bundles, your site is still going to be slow, especially on medium- and low-end mobile devices. |
There was a problem hiding this comment.
and this is so often the case on most sites I've seen. React/Angular/et al without a non-JS story (static rendering, server rendering, etc.) and crazy bundle sizes.
| </figcaption> | ||
| </figure> | ||
|
|
||
| Performance is an _emergent characteristic_ of a system. It requires getting a lot little things right and is easy to mess up. Hence the Tolstoy quote. |
There was a problem hiding this comment.
Maybe reference it again, just to keep it apparent?
|
Thanks @DSchau! |
* mobile performance post * new quotes * copy changes * modify chart title from part 3 * Update index.md
No description provided.