jchatard

Achieve high frontend performances with LiveView?

Hi all,

I’m currently evaluating solutions for several projects I maintain (clients websites) and I need to modernize those.

Those projects have a technical debt:

Built 5 to 8 years ago,
LAMP stack using Drupal 8 (now migrated to 9),
Front end using Twig templating engine augmented with VueJS.

The not a problem: backend

My clients are happy having Drupal as a contribution platform, and so are we in my agency. It provides great value for community maintained features (content management, roles & permissions, workflow, etc.). We’ve been using Drupal since version 4, which is prehistory in the CMS world, so we know it pretty well (features, modules, APIs, hosting, security advisories processes, etc). Those websites are mainly static once the content is contributed, everything is cached in Varnish and response time is good. There are few forms (15 to 20 depending on the project), but no user account as of now. So it’s basically cached/static website browsing (Drupal handles cache invalidation pretty well). With a few exceptions here and there of course, that’s about it.

The problem: frontend performances

Today, the problem we’re facing is frontend performances. Nothing to eccentric here, some big images, long scrolling pages, with complex CSS gradients, animations, etc. But the pain point is the JavaScript, which is heavy, because it is bundled as single file, includes dozens of Vue components, still has lots of polyfills and workarounds for older browsers. Parsing time is a issue. So yes, it’s become a giant spaghetti soup and Lighthouse performances are bad, especially on mobile devices: 20 ~ 30 out of 100 :-/. Lighthouse is not God, but still, we have to face reality, mobile navigation is bad unless you have a last generation device. SEO is impacted and is becoming an issue, because Google takes into account Lighthouse scores for its ranking.

Strategy: decoupled CMS with Drupal

We are thinking of decoupling the frontend from Drupal. Keeping the CMS as a contribution platform, exposing the content through either JSON:API, REST, GraphQL… well you know anything like that.

And use COOL_TECH_HERE for the frontend.

I’ve done my research, and come up with a short list:

Gatsby not sure I like the full static philosophy.
NEXT.js the goto framework nowadays? Good mix between static and dynamic.
Phoenix and LiveView ?

Gatsby and NEXT.js share the same philosophy at frontend performance. Reducing bundle sizes by splitting JavaScript files, and loading them as needed. Make the website feel extremely fast using <Link> React component for prefetching data. They also have <Image> component which could be very handy. Next.js is also integrating React Server Component which looks promising.

I’ve been lurking on Elixir for 6 months now, and thoughts maybe Phoenix and LiveView could be a good fit.

I could be wrong, but my understanding is that LiveView could allow us to reduce even more JavaScript size, because some rendering could be computed on the server and applied on demand without having a JS component needing fetching and loading with HTTP roundtrips. I know it doesn’t make sense to do everything on the server, and I would still have some JS on the client side for UI only widgets and the likes.

My goal is to achieve more than 90/100 in Lighthouse performance score with a visually complex website. It’s pretty clear to me how I would achieve this with — let say: Next.js. But do you think it would make sense to go the LiveView way?

For example, I like the idea of link prefetching (shared by Next.js and Gatsby). It’s not clear to me if Phoenix’s live_session is related? Or is there anything similar in the Phoenix world?

Elixir and Phoenix are appealing to me, because, as it’s running as an application, I could have processes fetching data from the CMS, checking regularly for updates, build chunks of caches in the background. All the cool things we can implement with OTP.

I’d love to hear from you guys on that topic. And if you have examples of websites performing insanely high performances scores on Lighthouse it would help me make a choice, ahah!

Thank so much,
Jérémy

16 comments

/phoenix #liveview

20 3221 16

2022-07-20 10:32:01 UTC

Most Liked

derek-zhou

I’d say if it ain’t broken, don’'t fix it.

Porting old code is a thankless job. It is far better to build a new thing and let the old things gradually fade into irrelevancy.

Post #5

josefrichter

How about you try first to rewrite the frontend without all this junk, vast majority of this stuff is already available in html5 and css, and if you hit limits, then try something minimal like https://alpinejs.dev/

Of course you can also try to write the frontend with LiveView. It sounds like you want to try it and are looking for excuse So I do encourage you to try it It is additional complexity initially, but it might end up being better solution than the above, that really depends on specific details of the websites in question.

Post #12

juilenmarie

@jchatard I’ve been through something completely similar. Have an e-commerce website that started on a PHP stack and had to change the front end for performance reason.
It went through multiple iterations:

Normal PHP + Riotjs ( Vue like JS framework )
PHP on the backend + Elixir for the frontend + Riotjs
PHP + Phoenix and Liveview
I basically rebuilt the whole model layer of the PHP app on Elixir and I plug directly to the DB of the ecommerce platform. Cart operations are handled in liveview and then the elixir layer “simulate” the user session and communicate with the ajax api of the ecommerce layer.
Only things still served directly by PHP to the end users is the payment page.

Results: Between 95 to 100 pagespeed score on desktop and mobile. My rankings in terms of SEO have increased 4 fold.

Post #14