Talking Drupal: Talking Drupal #415 - Front End Performance

Today we are talking about Front End Performance, Common Front End Issues, and Ways to test and fix said issues with guest Andy Blum. We’ll also cover Webp Fallback Image as our module of the week.

For show notes visit: www.talkingDrupal.com/415

Topics
  • How do we break down front end performance
  • How do we measure front end performance
  • What are web vitals
    • Standard, objective measurements
    • First/Largest contentful paint
    • Cumulative layout shift
    • Time to Interactive/First Input Delay/Time To Next Paint/Total Blocking Time
  • What are some common client side performance problems
    • “Flickering”
    • “Slow loading”
    • Image size/resolution issues
    • Render-blocking resources
    • Screen jitters
    • Memory leaks
    • Memory Bloat
  • How do tracking scripts affect performance
  • Tools to help identify and resolve
  • Drupal front end performance
Resources Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Andy Blum - andy-blum.com - andy_blum

MOTW Correspondent

Martin Anderson-Clutz - @mandclu WebP fallback image

  • Brief description:
    • Do you want your Drupal site to generate WebP images in the most optimal way? There are a number of modules for that, today we’re going to talk about…
  • Brief history
    • How old: created in Jun 2022 by pedrop
    • Versions available: 1.0.0 and 1.1.0 versions available, both of which support Drupal 8, 9, and 10
  • Maintainership
    • Actively maintained
  • Number of open issues
    • 3, 2 of which are bugs
  • Has test coverage
  • Usage stats:
    • Almost 252 sites
  • Maintainer(s):
    • Most recent release is by dj1999
  • Module features and usage
    • Anyone using testing tools like Lighthouse will have seen suggestions to use modern image formats like WebP, and with good reason. They allow for much smaller image files at the same quality, which means a better user experience and less bandwidth used by both the server and the visitor. WebP is a natural choice because it enjoys over 95% browser support, but many sites still care about that other 5%
    • Drupal core added its own support for webp in 9.2, but without a fallback image, so browsers that don’t have WebP support have been out of luck
    • Contrib modules have allowed for generating a webp image and a jpeg fallback, to allow for universal support. Typically they have worked by creating the WebP variant from the output of a core image style, so after an image has been saved as something like a jpeg. That means the resulting WebP can’t compress as well, and can show compression artifacts
    • WebP Fallback Image is different because it allows Drupal core to generate the WebP image from the source file, and then creates the jpeg fallback.
    • Also worth noting that this module only creates the jpeg fallback when it’s requested, so it doesn’t add to the storage of your website unless it’s needed

The Drop Times: A Chaiwala Tale to Break the Monotony

On my way home each evening, I stop for 'chai' (tea); even better, I stop to watch the chaiwala (tea barista) show off his swag. Amidst the crowd of onlookers, he effortlessly tosses spoonfuls of sugar into a cup, then adds tea and a dash of milk. But the true display of his expertise lies in the mixing part. The distance between the two cups used to mix the chai is directly proportional to the swag. It's a visual representation of his flair and confidence. The longer the pour, the higher the swag, and the more mesmerized the audience becomes.

But as I stand there, sipping my chai and reflecting on this daily spectacle, I can't help but draw parallels to life itself. Just as the chaiwala's captivating act can slip into mundanity when it becomes a routine, an individual's life can also fall prey to a monotonous existence when confined to a single trade or skill. It's a state of mere existence, as Oscar Wilde so eloquently put it.

"To live is the rarest thing in the world. Most people exist, that is all!"

Oscar Wilde, The Soul of Man Under Socialism.

This sentiment serves as a poignant reminder that life is not meant to be merely an existence but a journey filled with exploration and growth. The chaiwala's swag, while captivating, is ultimately an everyday performance. On the other hand, in the world of web development, Drupal enthusiasts embrace the mantra of growth that comes from exploration and collaboration. They understand that being stuck in one place can lead to a dull and repetitive existence. Therefore, the Drupal community not only hones their skills but also actively encourages others to join in. On that note, let me take you through the major inputs from last week.

The DropTimes have started a new initiative for a weekly feature that deals with Drupal modules that have thrived and stood the test of time. A curated list of 15 exceptional modules has already been unveiled, and we eagerly anticipate further contributions from enthusiastic members of the Drupal community. Southeast's biggest Drupal Conference, DrupalCamp Atlanta, was held on September 08, 2023, and we had the opportunity to sit down for a Zoom interview with the Lead Organizer, Kaleem Clarkson, who announced his farewell from the event after ten long years of organizing it.

On another exciting note, today, September 11, 2023, marks the end of regular registration of DrupalCon Lille 2023. Secure your seats before the end of the day to save a whopping €130. The 2023 edition of the Debian Conference, DebConf'23, was hosted in the land of spices, Kerala. EvolveDrupal Toronto had a magnificent conclusion with EvolveUX+ Mini-Conference, a dynamic conference within a conference.

The Drupal community is abuzz with excitement about the annual elections for the Drupal Association board; the voting opens on September 12, 2023. Globant's upcoming digital marketing and digital experience conference highlights a training session titled Drupal CMS: A Catalyst for AI on September 14, 2023. Design4Drupal Boston's September webinar focuses on web design accessibility and will be conducted on September 20, 2023.

In recent developments, Genero launched the "Kamihaya" distribution for Drupal. Also, Debug Academy is gearing up to launch an immersive Drupal 9 and 10 Developer course, set to kick off on September 24 and run until September 27, 2023. ImageX Media shared insights on the progress of Drupal 10 to 11 and what to expect in the future in the latest blog post. Acquia shared essential Drupal website maintenance tips, and Philip Norton in Hashbangcode published a guide to third-party settings in Drupal.

Revanth Technology is now offering Drupal Online Training in Hyderabad, India. Amazee.io is hosting a webinar on September 21, 2023, titled "The Future of the Open Web is Composable." The Drupal Academy tutorial explores the potential of services in both Drupal 9 and Drupal 10. The Aveiro 2023 Free Software Festival is scheduled to run from September 15 to 17, 2023.

That's all for the week.

Yours sincerely,     
Alka Elizabeth     
Sub Editor, The DropTimes

qtatech.com blog: Streamline Your Transition: Verification & Correction Tools for Updating Drupal 9 Code to Drupal 10

Streamline Your Transition: Verification & Correction Tools for Updating Drupal 9 Code to Drupal 10 kanapatrick Fri, 09/08/2023 - 13:44

In the ever-evolving landscape of web development, staying up-to-date with the latest technologies and platforms is paramount. Drupal, a powerful content management system (CMS), is no exception. As Drupal evolves, so should your website, and this includes migrating from Drupal 9 to Drupal 10.

Image removed.

Peoples Blog: Unable to install Update Manager, update.settings already exists in active configuration

Generally you see this error while you try to install the update manager module via UI or via Drush command. Not really sure how you came up with this issue. But if you are seeing this issue, you have an entry in your site's configuration saying that the update module is already installed. 1. You can simply delete this configuration with the below command $ drush cdel update.settings Which