Image optimization, code component templates, conference talks
Automatic image optimization
Generating high-quality, production-grade assets is a core focus of Plasmic, and performance is a critical piece of this focus. Performance not only directly impacts bottom-line conversions and revenue, but since earlier this year with the Google Page Experience update, it now affects search rankings. Images are often a significant factor affecting performance.
Plasmic now serves fully optimized images. All images employ best practices that optimize for Core Web Vitals:
Automatically serve resized images for different window sizes and screen densities.
Properly preserve vertical space for dynamic-width images, to minimize content layout shift.
Use modern image formats (webp) if possible.
Lazy loads by default.
This means you can freely paste arbitrary source images straight into Plasmic and design rapidly, without having to think about manually downsizing or encoding the image. The work is inspired by components like next/image, but designed to behave as similarly as possible to normal img elements, particularly when it comes to layout.
This is being rolled out over the coming days, and will soon be enabled in all projects and included in all plans, including the free tier. You’ll be prompted to opt-in individual projects the next time you open them, which will convert all its images. After 3 months, all projects will be auto-migrated.
Presenting at Next.js Conf and Jamstack Conf
Our own Yang Zhang gave a talk at Jamstack Conf 2021 this month on the rise of some emerging approaches to page performance. Get a glimpse into the worlds of Astro, Marko, React 18, React Server Components, and more!
We’ll also be on stage at next week’s Next.js Conf this October 26, talking all about bringing visual building to Next.js. Our friends at Vercel have an amazing event in store, and it’s all-online and free—don’t miss the conference, register now!
PlayVS ships 4x faster to their logged-in app experience
PlayVS supports esports leagues around the country at the high school and collegiate level. Each season, they need to publish a lot of new design-rich content to their app. However, the typical engineering workflow of gathering requirements, engineering estimation, development, testing, code review, and release, meant that content updates were few and far between. Users frequently pointed to the stale content still being served by the app.
PlayVS needed a better solution for visual content like banners, referral pages, and featured tiles that would be shared across the application and marketing page.
Within 24 hours of deploying our first Plasmic-generated component, it proved its value. Multiple teams and stakeholders could change the content and redeploy multiple times in a day. It was instant, no developer required.
—Neel Palrecha, CTO, PlayVS
And more
Can now define default slot contents and default styles for code components—so when your content editors insert a Menu, you can ensure they don’t get just get an empty-looking container for the Menu itself, but a full set of example MenuItems. You can even define multiple such templates. See the new examples in the docs!
Can now set the default typography styles of common text tags, including headers (h1–h6), paragraphs (p) and links (a).
Can now define font family tokens.
Explicitly sized items now default to having flex-shrink: 0 for more intuitive layout behavior.
Significant performance improvements for large projects