Help:Infoboxes/Benefits of Portable Infoboxes

Portable Infoboxes are created for handling the most common single element of wiki pages. There are many different ways to view information from Fandom. Right now the primary ones are on desktop/laptop computers, on tablets, and on smartphones. But there are more ways, and Fandom doesn't always look great on all of them. Ever tried to browse a Fandom community using the Steam browser? Or on your Nintendo Switch? Or even on an Apple Watch? These various presentation options, and others that may come along in the future, have very different needs.

The way infoboxes are created on desktop (mixing HTML and CSS with wikitext) may work for desktops, but they often fail in other user environments. Things can look broken or misplaced because the content can't be separated from the presentation. Portable Infoboxes help solve this issue by presenting the content in a format best optimized for the viewing platform (like the mobile skin). The same content can drive any new experience without re-writing it. Fandom is working to make your content thrive on an ever-increasing number of devices.

Infoboxes draw faster

Because Portable Infoboxes (PIs) were designed to be understood by MediaWiki as native MediaWiki components, the performance speed of painting them onto a page has an edge over comparable wikitext. Portable Infoboxes are faster to paint especially where wikitext templates are made with nested templates and/or Lua.

The process where wikitext becomes HTML (so that browsers can understand it) takes time. Native components like Portable Infoboxes can directly produce special kinds of HTML that can't be made consistently or safely in wikitext, and wikitext templates and tables take more processing time to expand into HTML. Most importantly, Fandom's platform understands where it can make changes in HTML to have the best experience on each platform.

For a point of comparison, let's look at the data for two roughly similar pages. Dead Cells Wiki uses Portable Infoboxes; Enter the Gungeon Wiki does not. Using Google's Page Speed Insights tool to compare the two pages ("Rusty Sword" and "Rusty Sidearm"), we can see some significant speed differences. Given that the two pages we're comparing are relatively the same in size and composition, there are two numbers that are significant in comparison - "Time to Interactive" (TTI) and "Total Blocking Time" (TBT). The way pages load for Google looks like this:

Google measures TTI as the time between when a page looks to be interactive, and when it actually becomes interactive. TBT measures load responsiveness, and is a severity metric for TTI. Comparing our two pages, we note the following:

Dead Cells (Portable Infoboxes)	Enter the Gungeon (Non-Portable Infoboxes)
Time to Interactive = 28.6s	Time to Interactive = 42.7s
Total Blocking Time = 3,620 ms	Total Blocking Time = 7,510 ms

Here, we can see that the TTI and TBT are almost double on Enter the Gungeon's page when compared to Dead Cells' page. This is largely because of the load efficiency of Portable Infoboxes. Portable Infoboxes are not the only reason that Dead Cells' page is faster, but it is a major contributing factor.

Similar tests for an apples-to-apples comparison show how two identical pages (except for the infobox technique used) on the same wiki can be much faster.

Portable Infobox page	Non-Portable Infobox page
Time to Interactive = 36.7s	Time to Interactive = 80.8s
Total Blocking Time = 5,810 ms	Total Blocking Time = 66,700 ms
Largest Contentful Paint = 7.0s	Largest Contentful Paint = 12.3s

You can reproduce similar tests yourself with identical content pages using a number of tools (including PageSpeed Insights), but we stand behind the efficiency of Portable Infoboxes as a decisive factor as we evolve with the web.

Better building blocks make for better products

Portable Infoboxes create a consistent user experience across diverse communities, and allows Fandom to build products with a higher level of quality and integration. We can build products that anticipate PIs, which is not true of wikitables (which have more than one application and visual display). This allows us to rapidly develop and deploy content and skin improvements and features in a way that can't be achieved with wikitext elements.

Example of ad banner placement

As an example of a direct benefit: Portable Infoboxes are recognized as premium content on Fandom's mobile experience. Because we can consistently identify and create Portable Infoboxes, we can place them prominently above the advertisements. Alternately, because we cannot consistently identify wikitables, advertisements render above the content and lede, providing a worse end-user experience.

PIs also enable extensibility. When communities adopt the common PI format, it becomes possible for other programs to understand the information in better ways, and that's when cool stuff can start to happen. As an example, Portable Infoboxes enable more specific and relevant recommendations for what visitors can read next, which helps to keep them on your wiki (and on the Fandom network). For example, if a visitor was reading an article about the actor Idris Elba on the Marvel Database, they would see suggested reading about other Marvel movies Idris appeared in, or other stories that include the Heimdall character; there would be additional recommendations for articles on Dunderpedia (The Office Wiki), Luther Wiki, or Memory Alpha (all of which have articles about Idris and/or characters he played). A common data structure makes it much easier for recommendation systems to find "things related to Idris Elba" on Fandom, and provides a better user experience.

Search engine advantages

Search engines crawl the structure of Portable Infoboxes consistently and immediately, leading to vastly improved SEO comprehension and higher ranking generally results as a natural consequence. Structured data inside a PI is obvious and clearly labeled to Google — this is not true with wikitable-created infoboxes, as they have inconsistent vocabulary.

SERP entry for Prapor

While Gamepedia's entry for Prapor may be the first entry on a search page, the content of the (wikitext) infobox is not as easy for Google to digest. This lack of confidence in results in less prominent appearance of data presented with the ranking, and may make it difficult for Google to present the data to the end user.

SERP entry for Max Caulfield

Knowledge Graph entry for Max Caulfield

On the other hand, Fandom's entry for Max Caulfield leverages Portable Infoboxes, subpage structure, and standardized context-links (with Template Classification) to build a more complete picture for Google to present. The results are more prominent entry points for readers to discover, and the page appears in Google's Knowledge Graph.

On the whole, the more complete a picture Google has of a page, the more likely it is to rank highly. While it is difficult to track ranking changes at scale, especially when the pages are already ranked in the highest possible position, when Portable Infobox data is feeding the Knowledge Graph it is more likely to be opened and read. Fandom wikis have rarely experienced this prominent placement when Portable Infoboxes were not used. Simply: non-Portable Infobox pages result in Google saying "we think this is important", whereas Portable Infoboxes generally lead to Google saying "we know this is important, and here's the data we know you want".

Easy for new editors, powerful enough for masters

Simple infoboxes are built using a user-friendly GUI by default, rather than forcing users to learn code immediately. This allows for rapid development and template deployment, and lowers growth barriers for editors unaccustomed to making templates. There are rarely changes needed to the template embedding in articles to accommodate wikitext infoboxes that migrate to Portable Infoboxes. Portable Infoboxes can use TemplateData code to assist input as easily as can be done with wikitext templates. Using the Portable Infobox Builder is not required, as PI templates can also be built using "source".

The simplified XML syntax of Portable Infoboxes is easier to understand than complex wikitables for most novice to moderate users, as wikitables tend to have a high learning curve and barrier to entry. Power users also tend to recognize the flexibility inherent in the syntax, as generally any infobox made with wikitables can be made with PIs just as (if not more) easily. Other elements, such as "sidebars" or "vertical navboxes", can be made with the same syntax. The <navigation> child tag facilitates links between articles, making a portable method for replacing page tabs, Era Icons, and other ad-hoc navigational elements. The <panel> feature provides a native and mobile-capable tabbed experience for data rows and groups inside infoboxes, eliminating the need for most workarounds.

Because the CSS selectors of Portable Infoboxes are standardized, CSS coding related to PIs is more recognizable. With well crafted CSS, any new templates are automatically styled as a community wants without replicating inline style coding or reproducing classes in multiple templates. The theme and type features allow tailored styling of full infoboxes and individual elements inside in a central and secure way, no matter what type of object the infobox is documenting.

tl;dr

Portable Infoboxes make for faster and more flexible infoboxes. They work better across all devices, and supercharge an article's SEO. They're easy to create, and easier to maintain than comparable wikitext.

---

Wikitable example:

{| class="infobox" style="font-size:90%; width:23em"
! colspan="2" class="infoboxname" | {{{name|{{PAGENAME}}}}}
|-
| colspan="2" style="text-align:center;" 
| {{#if: {{{image|}}} 
   | [[File:{{{image}}}|275px|{{{name|{{PAGENAME}}}}}]] 
   | [[Category:Infoboxes lacking images]]
  }}
|-
{{#if: {{{rarity|}}} 
 | {{!}} class="infoboxlabel" {{!}} Rarity {{!!}} 
  {{#switch:{{{rarity}}}
   | Common={{Rarity|Common}}
   | Uncommon={{Rarity|Uncommon}}
   | Rare={{Rarity|Rare}}
   | Ultra Rare={{Rarity|Ultra Rare}}
  }}
}}
|-
{{#if: {{{type|}}} | {{!}} class="infoboxlabel" {{!}} Type {{!!}} [[{{{type}}}]] }}
|-
{{#if: {{{icon|}}} | {{!}} class="infoboxlabel" {{!}} Icon {{!!}} {{{icon}}} }}
|-
{{#if: {{{desc|}}} | ! class="infoboxdescription" colspan="2" {{!}} Description
{{!}}-
{{!}} colspan="2" {{!}} {{{desc}}} }}
|-
! class="infoboxdescription" colspan="2" {{!}} Mod Tiers
|-
! ← Previous !! Next →
|-
| style="text-align:center;" | {{{previous|}}} || style="text-align:center;" | {{{next|}}}
|}

Comparable Portable Infobox:

<infobox type="mod">
  <title source="name">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="image" />
  <data source="rarity">
    <label>Rarity</label>
    <format>{{#switch:{{{rarity}}}
     | Common={{Rarity|Common}}
     | Uncommon={{Rarity|Uncommon}}
     | Rare={{Rarity|Rare}}
     | Ultra Rare={{Rarity|Ultra Rare}}
    }}</format>
  </data>
  <data source="type">
    <label>Type</label>
    <format>[[{{{type}}}]]</format>
  </data>
  <data source="icon"><label>Icon</label></data>
  <group row-items="1">
    <data source="desc"><label>Description</label></data>
  </group>
  <group row-items="2">
    <header>Mod Tiers</header>
    <data source="previous"><label>← Previous</label></data>
    <data source="next"><label>Next →</label></data>
  </group>
</infobox>{{#if:{{{image|}}}||[[Category:Infoboxes lacking images]]}}