Updating Yii 1.1 front-ends to be faster, more Lighthouse-friendly

Does anyone have any tips on how to update older style website front-ends?

What I mean by that is that the “old” way of doing things was to have separate assets, be it JS or CSS, that get loaded on demand for each page.

When measuring this on https://web.dev/measure/ for example, it will usually complain about several things:

  • Too many resources
  • Render-blocking resources
  • Largest Contentful Paint (LCP) being too long
  • Unused CSS
  • Inline smaller images

What have you done to combat this? Combining and minifying all the resources seems to be one way of doing it, but that’s only half the battle. What tool-chains can you recommend?

Obviously this can be solved by re-doing the front-end in something newer like Gatsby, Vuepress, Gridsome, etc.that have this all built-in. I’m looking for a solution that doesn’t involve re-doing it, but can still access this newer way of doing things.

Should I be looking in the Gulp and Webpack direction, or something else?

Combine assets.

Don’t use document.write() or anything like that in your JS.

That depends on your CSS/JS, not on Yii.

Well, find and remove what’s unused.

Either use sprites or data URIs.

You can go this way but that won’t do everything automatically for you.