Traditional web applications render HTML on the server. WordPress, Magento, Ruby on Rails, and most common web applications and frameworks work this way.
Server-side rendering is ideal for SEO: complete pages are delivered to browsers and crawlers alike and, from the client’s perspective, navigation looks much the same as on a static site.
Progressive Web Apps are the culmination of this trend. A PWA leverages web technologies such as Service Workers, Web App Manifests, and the Cache API to provide a web experience similar to native applications. Progressive Web Apps offer improved perceived performance, seamless page transitions, offline functionality, and home screen installation on mobile devices.
These benefits have driven widespread adoption of Progressive Web Applications. Pinterest rebuilt its web application as a PWA and saw engagement increase by 60% and a 40% increase in user-generated ad revenue. Uber’s mobile site is a 50kb PWA that loads in less than three seconds on a 2G network. There are real business advantages to embracing Progressive Web Applications if the SEO is handled intelligently.
The basic PWA loading process looks like this:
- The app shell and associated script files are cached.
- The HTML is rendered and displayed in the browser.
In a real application, this process is more complex: I haven’t mentioned Service Workers here because Google’s crawlers don’t support them, but that won’t usually be an SEO problem for a well-designed web app.
The first thing to understand is that a PWA doesn’t bring any SEO advantage just because it’s a PWA. If your business is happy with the experience its current site offers, then there is no reason to implement a Progressive Web App. The only reason to implement a PWA is to take advantage of the development, business, and user experience benefits it can deliver.
Google isn’t the only search engine
Page navigation can be a problem in some cases
Use canonical links to avoid duplicate content issues
It is common for businesses to deploy a Progressive Web App while leaving the original desktop or mobile sites in place. This can cause duplicate content issues if pages are not properly canonicalized. On PWA pages, include a link with a canonical attribute that points to the desktop or other preferred version of the page.
Avoid ES6 code in production
Google’s crawlers are based on the Chrome 41 browser, which was released before ES6. Transpile code that relies on ES6 features like arrow functions, or avoid it altogether.
Client-side code execution and page rendering are responsible for many of the advantages of Progressive Web Applications, but there are a couple of major disadvantages.
Slow-loading PWAs are a particular problem for mobile users with low bandwidth connections: once the initial load is finished, a PWA will be faster than a traditional server-side application, but that’s no comfort to users who have to wait multiple tens of seconds before the site is usable.
Server-side rendering isn’t a magic bullet for PWA performance issues: it significantly increases server load, adds complexity to the development process, and can cause performance problems of its own with larger initial HTML downloads and increased latency. Developers should consider the advantages and drawbacks of server-side rendering on a case-by-case basis.
Note: The opinions expressed in this article are the views of the author, and not necessarily the views of Caphyon, its staff, or its partners.
The post Build Progressive Web Apps That Don’t Destroy Your SEO appeared first on AWR.