mdn · wbamberg · Mar 17, 2021 · Mar 17, 2021
@@ -16,7 +16,7 @@
 
 <p>Firefox also supports additional features not in the OpenSearch standard, such as search suggestions and the <code>&lt;SearchForm&gt;</code> element. This article focuses on creating OpenSearch-compatible search plugins that support these additional Firefox features.</p>
 
-<p>OpenSearch description files can be advertised as described in <a href="#autodiscovery_of_search_plugins">Autodiscovery of search plugins</a>, and can be installed programmatically as described in <a href="/en/Adding_search_engines_from_web_pages">Adding search engines from web pages</a>.</p>
+<p>OpenSearch description files can be advertised as described in <a href="#autodiscovery_of_search_plugins">Autodiscovery of search plugins</a>, and can be installed programmatically as described in <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages">Adding search engines from web pages</a>.</p>
 
 <h2 id="OpenSearch_description_file">OpenSearch description file</h2>
 
@@ -48,7 +48,7 @@ <h2 id="OpenSearch_description_file">OpenSearch description file</h2>
  <dd>
  <p>URI of an icon for the search engine. When possible, include a 16×16 image of type <code>image/x-icon</code> (such as <code>/favicon.ico</code>) and a 64×64 image of type <code>image/jpeg</code> or <code>image/png</code>.</p>
 
- <p>The URI may also use the <a href="/en-US/docs/Web/HTTP/data_URIs"><code>data:</code> URI scheme</a>. (You can generate a <code>data:</code> URI from an icon file at <a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">The <code>data:</code> URI kitchen</a>.)</p>
+ <p>The URI may also use the <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URI scheme</a>. (You can generate a <code>data:</code> URI from an icon file at <a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">The <code>data:</code> URI kitchen</a>.)</p>
 
  <pre class="brush: xml">&lt;Image height="16" width="16" type="image/x-icon"&gt;https://example.com/favicon.ico&lt;/Image&gt;
   &lt;!-- or --&gt;
@@ -59,7 +59,7 @@ <h2 id="OpenSearch_description_file">OpenSearch description file</h2>
 
  <div class="note"><strong>Note:</strong> For icons loaded remotely (that is, from <code>https://</code> URIs as opposed to <code>data:</code> URIs), Firefox will reject icons larger than <strong>10 kilobytes</strong>.</div>
 
- <p><img alt="Search suggestions from Google displayed in Firefox's search box" class="internal" src="/@api/deki/files/358/=SearchSuggestionSample.png"></p>
+ <p><img alt="Search suggestions from Google displayed in Firefox's search box" class="internal" src="searchsuggestionsample.png"></p>
  </dd>
  <dt>Url</dt>
  <dd>Describes the URL or URLs to use for the search. The <code>template</code> attribute indicates the base URL for the search query.</dd>
@@ -117,7 +117,7 @@ <h2 id="Autodiscovery_of_search_plugins">Autodiscovery of search plugins</h2>
 
 <div class="note">
 <p>In Firefox, an icon change in the search box indicates there's a provided search plugin. (See image, the green plus sign.) Thus if a search box is not shown in the user's UI, they will receive <em>no</em> indication. <em>In general, behavior varies among browsers</em>.</p>
-<img alt="How search plugin availability is shown in Firefox" src="https://mdn.mozillademos.org/files/16679/new.png" style="height: 164px; width: 885px;"></div>
+<img alt="How search plugin availability is shown in Firefox" src="new.png"></div>
 
 <h2 id="Supporting_automatic_updates_for_OpenSearch_plugins">Supporting automatic updates for OpenSearch plugins</h2>
 
@@ -140,7 +140,7 @@ <h2 id="Troubleshooting_Tips">Troubleshooting Tips</h2>
  <li>Your server should serve OpenSearch plugins using <code>Content-Type: application/opensearchdescription+xml</code>.</li>
  <li>Be sure that your Search Plugin XML is well formed. You can check by loading the file directly into Firefox. Ampersands (&amp;) in the <code>template</code> URL must be escaped as <code>&amp;amp;</code>, and tags must be closed with a trailing slash or matching end tag.</li>
  <li>The <code>xmlns</code> attribute is important — without it you could get the error message "Firefox could not download the search plugin".</li>
- <li>You <strong>must</strong> include a <code>text/html</code> URL — search plugins including only Atom or <a href="/en/RSS">RSS</a> URL types (which is valid, but Firefox doesn't support) will also generate the "could not download the search plugin" error.</li>
+ <li>You <strong>must</strong> include a <code>text/html</code> URL — search plugins including only Atom or <a href="/en-US/docs/Glossary/RSS">RSS</a> URL types (which is valid, but Firefox doesn't support) will also generate the "could not download the search plugin" error.</li>
  <li>Remotely fetched favicons must not be larger than 10KB (see {{ Bug(361923) }}).</li>
 </ul>
 

@@ -34,7 +34,7 @@ <h3 id="CSS_Object_Model">CSS Object Model</h3>
 
 <p>In terms of selector performance, less specific selectors are faster than more specific ones. For example, <code>.foo {}</code> is faster than <code>.bar .foo {}</code> because when the browser finds <code>.foo</code>, in the second scenario, it has to walk up the DOM to check if <code>.foo</code> has an ancestor <code>.bar</code>. The more specific tag requires more work from the browser, but this penalty is not likely worth optimizing.</p>
 
-<p>If you measure the time it takes to parse CSS, you'll be amazed at how fast browsers truly are. The more specific rule is more expensive because it has to traverse more nodes in the DOM tree - but that extra expense is generally minimal. Measure first. Optimize as needed. Specificity is likely not your low hanging fruit. When it comes to CSS, selector performance optimization, improvements will only be in microseconds. There are other <a href="/en-US/docs/Learn/Performance/CSS_performance">ways to optimize CSS</a>, such as minification, and separating deferred CSS into non-blocking requests by using media queries.</p>
+<p>If you measure the time it takes to parse CSS, you'll be amazed at how fast browsers truly are. The more specific rule is more expensive because it has to traverse more nodes in the DOM tree - but that extra expense is generally minimal. Measure first. Optimize as needed. Specificity is likely not your low hanging fruit. When it comes to CSS, selector performance optimization, improvements will only be in microseconds. There are other <a href="/en-US/docs/Learn/Performance/CSS">ways to optimize CSS</a>, such as minification, and separating deferred CSS into non-blocking requests by using media queries.</p>
 
 <h3 id="Render_Tree">Render Tree</h3>
 

@@ -54,14 +54,14 @@ <h2 id="Best_practices">Best practices</h2>
 
 <p>The logic behind pairing these hints is because support for dns-prefetch is better than support for preconnect. Browsers that don’t support preconnect will still get some added benefit by falling back to dns-prefetch. Because this is an HTML feature, it is very fault-tolerant. If a non-supporting browser encounters a dns-prefetch hint—or any other resource hint—your site won’t break. You just won’t receive the benefits it provides.</p>
 
-<p>Some resources such as fonts are loaded in anonymous mode. In such cases you should set the <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a> attribute with the preconnect hint. If you omit it, the browser will only perform the DNS lookup.</p>
+<p>Some resources such as fonts are loaded in anonymous mode. In such cases you should set the <a href="/en-US/docs/Web/HTML/Attributes/crossorigin">crossorigin</a> attribute with the preconnect hint. If you omit it, the browser will only perform the DNS lookup.</p>
 
 <h2 id="See_also">See also</h2>
 
 <ul>
  <li><a href="/en-US/docs/Web/HTML/Element/link">&lt;link&gt;</a></li>
  <li><a href="/en-US/docs/Web/HTML/Attributes/rel">HTML attribute: rel</a></li>
- <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Attributes/crossorigin">crossorigin</a></li>
  <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li>
  <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a></li>
  <li><a href="/en-US/docs/Web/HTTP/Headers/Link">HTTP header </a><a href="/en-US/docs/Web/HTTP/Headers/Link" title="The HTTP Link entity-header field provides a means for serialising one or more links in HTTP headers. It is semantically equivalent to the HTML &lt;link&gt; element.">Link</a></li>

@@ -122,7 +122,7 @@ <h3 id="Startup_performance">Startup performance</h3>
 <p><strong>Note</strong>: For much more information on improving startup performance, read <a href="/en-US/docs/Web/Performance/Optimizing_startup_performance">Optimizing startup performance</a>.</p>
 </div>
 
-<p>On the same note, notice that locally-cached, static resources can be loaded much faster than dynamic data fetched over high-latency, low-bandwidth mobile networks. Network requests should never be on the critical path to early application startup. Local caching/offline apps can be achieved via <a href="/en-US/docs/">Service Workers</a>. See <a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">Making PWAs work offline with Service workers</a> for a guide as to how.</p>
+<p>On the same note, notice that locally-cached, static resources can be loaded much faster than dynamic data fetched over high-latency, low-bandwidth mobile networks. Network requests should never be on the critical path to early application startup. Local caching/offline apps can be achieved via <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>. See <a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">Making PWAs work offline with Service workers</a> for a guide as to how.</p>
 
 <h3 id="Framerate_2">Framerate</h3>
 

@@ -33,7 +33,7 @@ <h2 id="Beginners_tutorials">Beginner's tutorials</h2>
 <p>The MDN <a href="/en-US/docs/Learn/Performance">Web Performance Learning Area</a> contains modern, up-to-date tutorials covering Performance essentials. Start here if you are a newcomer to performance:</p>
 
 <dl>
- <dt><a href="/en-US/docs/Learn/Performance/web_performance_overview">Web performance: brief overview</a></dt>
+ <dt><a href="/en-US/docs/Learn/Performance/What_is_web_performance">Web performance: brief overview</a></dt>
  <dd>Overview of the web performance learning path. Start your journey here.</dd>
  <dt><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></dt>
  <dd>This article starts the module off with a good look at what performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make performance part of our web development workflow.</dd>
@@ -71,7 +71,7 @@ <h2 id="Using_Performance_APIs">Using Performance APIs</h2>
  <dd>Create application specific timestamps using the <a href="/en-US/docs/Web/API/User_Timing_API">user timing API</a>'s "mark" and "measure" entry types - that are part of the browser's performance timeline.</dd>
  <dt><a href="/en-US/docs/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Frame Timing API</a></dt>
  <dd>The <code><a href="/en-US/docs/Web/API/PerformanceFrameTiming">PerformanceFrameTiming</a></code> interface provides <em>frame</em> timing data about the browser's event loop.</dd>
- <dt><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></dt>
+ <dt><a href="/en-US/docs/Web/API/Beacon_API">Beacon API</a></dt>
  <dd><small>The <a href="/en-US/docs/Web/API/Beacon_API">Beacon</a> interface schedules an asynchronous and non-blocking request to a web server.</small></dd>
  <dt><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Intersection Observer API</a></dt>
  <dd>Learn to time element visibility with the <a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> and be asynchronously notified when elements of interest becomes visible.</dd>
@@ -187,7 +187,7 @@ <h2 id="See_also">See also</h2>
  <li><a href="/en-US/docs/Web/HTML/Element/picture">The <code>&lt;picture&gt;</code> Element</a></li>
  <li><a href="/en-US/docs/Web/HTML/Element/video">The <code>&lt;video&gt;</code> Element</a></li>
  <li><a href="/en-US/docs/Web/HTML/Element/source">The <code>&lt;source&gt;</code> Element</a></li>
- <li><a href="/en-US/docs/Web/HTML/Element/img#Attributes">The <code>&lt;img&gt; srcset</code> attribute</a>
+ <li><a href="/en-US/docs/Web/HTML/Element/img#attributes">The <code>&lt;img&gt; srcset</code> attribute</a>
   <ul>
    <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
   </ul>
@@ -207,7 +207,7 @@ <h2 id="See_also">See also</h2>
 <p>JavaScript</p>
 
 <ul>
- <li><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></li>
+ <li><a href="/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded</a></li>
  <li><a href="/en-US/docs/Glossary/Garbage_collection">Garbage collection</a></li>
  <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></li>
 </ul>
@@ -233,7 +233,7 @@ <h2 id="See_also">See also</h2>
    <li style="margin-top: 0.25em;"><a href="/en-US/docs/Web/API/Window/requestIdleCallback">requestIdleCallback() </a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></li>
+ <li><a href="/en-US/docs/Web/API/Beacon_API">Beacon API</a></li>
  <li>Resource Hints - <a href="/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control">dns-prefetch</a>, preconnect, <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">prefetch</a>, and prerender</li>
  <li><a href="/en-US/docs/Web/API/FetchEvent/navigationPreload">Fetchevent.navigationPreload</a></li>
  <li><a href="/en-US/docs/Web/API/PerformanceServerTiming">Performance Server Timing API</a></li>
@@ -272,7 +272,7 @@ <h2 id="See_also">See also</h2>
    <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Web/Apps/Progressive/Offline_Service_workers">PWA</a></li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">PWA</a></li>
  <li><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></li>
  <li>Content Delivery Networks (CDN)</li>
 </ul>
@@ -201,7 +201,7 @@ <h2 id="Performance_Entry_API">Performance Entry API</h2>
 
 <h2 id="Navigation_Timing">Navigation Timing</h2>
 
-<p>When a user requests a web site or application,<a href="/en-US/docs/Web/Performance/How_browsers_work"> to populate the browser</a> the user agent goes through a series of steps, including a {{glossary('DNS')}} lookup, {{glossary('TCP handshake')}}, and SSL negotiation, before the user agent makes the actual request and the servers return the requested assets. The browser then parses the content received, builds the DOM, CSSOM, accessibility, and render trees, eventually rendering the page. Once the user agent stops parsing the document, the user agent sets the document readiness to <em>interactive</em>. If there are deferred scripts needing to be parsed, it will do so, then fire the <a href="/en-US/docs/">DOMContentLoaded</a>, after which the readiness is set to <em>complete</em>. The Document can now handle post-load tasks, after which point the document is marked as completely loaded.</p>
+<p>When a user requests a web site or application,<a href="/en-US/docs/Web/Performance/How_browsers_work"> to populate the browser</a> the user agent goes through a series of steps, including a {{glossary('DNS')}} lookup, {{glossary('TCP handshake')}}, and SSL negotiation, before the user agent makes the actual request and the servers return the requested assets. The browser then parses the content received, builds the DOM, CSSOM, accessibility, and render trees, eventually rendering the page. Once the user agent stops parsing the document, the user agent sets the document readiness to <em>interactive</em>. If there are deferred scripts needing to be parsed, it will do so, then fire the <a href="/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded</a>, after which the readiness is set to <em>complete</em>. The Document can now handle post-load tasks, after which point the document is marked as completely loaded.</p>
 
 <pre class="brush: js">let navigationTimings = performance.getEntriesByType('navigation');</pre>