About Flutter

Flutter is Google's open-source cross platform development kit that allows developers to simultaneously create an app that works on Android, iOS, web and desktop from a single codebase. Apps made with Flutter offer blazing fast performance, beautiful user interface and high quality user experience that is comparable to natively developed apps. Cross platform support as well as features like Hot Reload/Restart significantly reduce development time and monetary costs involved with making and maintaining apps. The benefits of cross platform development are clear, but why choose Flutter in particular? The best answer to this would probably be the response from the IT community itself. Ever since its first stable release in December of 2018, Flutter has been quickly climbing the rankings of most popular cross platform solutions and has recently overtaken React Native becoming the most used framework.

Flutter’s rise in popularity (according to Statista)

Flutter’s rise in popularity (according to Statista)

We at Cinnamon Agency have been using Flutter for development since early 2019 and we’ve witnessed a growing demand for Flutter apps first hand. In just 18 months, our team has grown from a single developer to becoming the largest Flutter team in Croatia! We've created over a dozen of beautiful Flutter apps and both our developers and clients have been very satisfied with the products Flutter helps us create.

What is SEO?

SEO stands for Search Engine Optimization. It’s the practice of increasing both the quality and quantity of traffic to your website and increasing the visibility of your website, through non-paid (also known as "organic") search engine results. Basically, it’s a way of getting pages to rank higher on search engines. While there are alternative methods of attracting users to your website (e.g. paid advertising or social media), SEO is still a very important component, as most of online traffic is driven by search engines.

Organic vs paid links - while the organic clickthrough rate is declining, non-paid results are still dominant. Here we’ll be looking at how SEO-friendly Flutter is from a developer’s perspective. We’ll focus on Google’s search engine, as it holds the majority of market share.

So how does Google provide the users with the desired search results?

Search results are generated from web pages by following a 3-step process:

1. Crawling is the discovery phase of the process. Since there’s no central registry of web pages, Google uses bots that constantly discover new and updated content. The bots start by looking at a list of websites, jumping from one page to another via links, bringing back data about the discovered pages back to Google. The generic name for Google’s crawler is Googlebot.

2. Indexing is the process of understanding the crawled information (i.e. what the page is about) and then storing the processed data in a huge database.

3. Ranking and serving is the process of selecting the most relevant information from the index in response to a user’s query.

Issues

As a disclaimer I should add that generating search results is a very complex and ever-changing process and Google ranks the indexed pages based on several hundred criteria. Consequently, there are many ways one can improve the SEO of their website. Here we’ll focus on the Flutter developer’s perspective, and the issues that they might encounter when trying to make their site more SEO-friendly.

Canvas

To improve your page indexing, Google recommends things like adding short and meaningful page titles and using page headings with appropriate content.

The issue is that Flutter relies heavily on the HTML canvas tag, which gives Google’s crawlers very little information about the page itself. Relevant SEO meta tags can be added to improve the situation, however since Flutter web is a single-page application, the tags are pertinent to the entire website. Page-level SEO is still not possible.

Performance

A more important factor for SEO is the performance of your website. While crawling your website, Googlebot pays close attention to a multitude of performance factors that can heavily affect your website’s ranking. Two factors we’ll mention here are download time and time to first contentful paint.

Download time is simply the time required for the crawler to download all the files required to show your website. The larger the payload, the greater the delay before the site is rendered on screen. Compared to other JS frameworks, Flutter can add several megabytes of extra payload that will negatively affect your site’s ranking.

FCP measures how long it takes the browser to render any part of the page’s content after a user navigates to your page.

We can check how well our website performs by using Google’s Lighthouse tool which gives useful information about the site’s bottlenecks as well as advice on what the developers can do to improve the performance. The simplest way to test the performance is to head over to PageSpeed Insights page and paste the desired url there. In this example, we’ll use the Flutter team’s example Gallery app to see how well it performs.

Low performance score by Flutter team’s Gallery app.

The performance is pretty poor and will certainly negatively affect the page’s rankings. So whatcan a developer do to mitigate the poor performance? At the moment, not much I’m afraid. Not until key Flutter features that can circumvent these issues land.

Future of Flutter SEO

The mentioned issues aren’t exclusive to Flutter and have been a drawback of other Javascript frameworks like React, Vue and Angular in the past. While Googlebot can process Javascript code, it becomes a much more time and resource consuming process than just crawling a simple HTML page. This, in turn, would penalize your site heavily, likely preventing it from being properly indexed at all. To make Javascript SEO a viable option, services that offer prerendering and capabilities like Server-Side Rendering (SSR) were made available. These services can detect when a bot is crawling a website and serve a static HTML version of a page specifically for them, which helps with performance issues as well as provides easier-to-crawl information.

Can we expect similar solutions in the future for Flutter? Searching currently open issues on Flutter’s github we can see that there’s a lot of discussion about making Flutter more SEO friendly and adding SSR for Flutter web. Out of nearly 10,000 open issues both of these are in the top 10 most requested features. Sadly, the Flutter team has labeled them with low priority, so it might be a while before these features land. Flutter’s Engineering Director confirmed this in a tweet shortly after Flutter 2 release and the answer to this question from Flutter’s Product Manager confirms it as well.

Conclusion

Although the evidence might seem damning, the mentioned factors are a small part of what makes SEO. It’s a complex process and many things can be done to increase your rankings. Having said that, if SEO is a priority, Flutter in its current state might not be the best choice for building your website. On the other hand, if SEO is of less importance to you and you're interested in making a beautiful and performant web app or web site while offering iOS and Android support via full-fledged mobile apps found on App Store and Play Store, at just a fraction of the development and maintenance cost, then Flutter might be a great choice for you!