Add Recommended Mark Names section.

index.html

@@ -395,6 +395,42 @@ <h2>Convert a <var>name</var> to a <var>timestamp</var></h2>
         The <a data-cite="NAVIGATION-TIMING#performancetiming">PerformanceTiming</a> interface was defined in [[NAVIGATION-TIMING]] and is now considered obsolete. The use of names from the <a data-cite="NAVIGATION-TIMING#performancetiming">PerformanceTiming</a> interface is supported to remain backwards compatible, but there are no plans to extend this functionality to names in the <a data-cite="NAVIGATION-TIMING-2#dom-performancenavigationtiming">PerformanceNavigationTiming</a> interface defined in [[NAVIGATION-TIMING-2]] (or other interfaces) in the future.
       </p>
     </section>
+  </section><section id="recommended-mark-names">
+    <h2>Recommended mark names</h2>
+    <p>Developers are encouraged to use the following recommended mark names to
+    mark common timings. The user agent does not validate that the usage of
+    these names is appropriate or consistent with its description.</p>
+    <p class="note">Adding such recommended mark names can help performance
+    tools tailor guidance to a site. These mark names can also help real user
+    monitoring providers and user agents collect web developer signals regarding
+    their application's performance at scale, and surface this information to
+    developers without requiring any site-specific work.</p>
+    <dl>
+      <dt><dfn class="export">"mark_fully_loaded"</dfn></dt>
+      <dd>The time when the page is considered fully loaded as marked by the
+        developer in their application.</dd>
+      <dt><dfn class="export">"mark_fully_visible"</dfn></dt>
+      <dd>The time when the page is considered fully visible to an end-user
+        as marked by the developer in their application.</dd>
+      <dt><dfn class="export">"mark_interactive"</dfn></dt>
+      <dd>The time when the page is considered interactive to an end-user as
+        marked by the developer in their application.</dd>
+    </dl>
+    <p>In this example, the page asynchonously initializes a chat widget, a
+    searchbox, and a newsfeed upon loading. When finished, the
+    mark_fully_loaded mark name enables lab tools and analytics providers to
+    automatically show the timing.
+    </p>
+    <pre class="example">
+      window.addEventListener("load", (event) => {
+        Promise.all([
+          loadChatWidget(),
+          initializeSearchAutocomplete(),
+          initializeNewsfeed()]).then(() => {
+            performance.mark('mark_fully_loaded');
+        });
+      });
+    </pre>
   </section>
   <section id="privacy-security" class="informative">
     <h2>Privacy and Security</h2>