Drupal Planet

Search Engine Optimization is not a destination, it is a journey, they say. Especially so with constantly changing algorithms and the influx of new websites every minute (~175*). But what is it really that helps boost a website’s SEO ranking? I would like to classify this into two factors - direct and indirect methods. While direct methods can include improving SEO with the help of the right content placement, usage of keywords, and mobile-friendly designs amongst others, some indirect methods can include optimizing the website’s performance, improving user experience, and some off-page SEO techniques. 
 

Applying all of these techniques is crucial to optimizing your website for search engines. As a CMS, Drupal offers many basic to advanced directly and indirectly impacting SEO boosting features, some of which can go unnoticed. In this article, we are going to talk about some of these features but before we dive into how Drupal lends itself well to SEO by default and with some helping modules, it is important to know what search engines are really looking for. And we are not including the quality and relevance of content here as it is one of the most important factors for your website to rank better.

The first step to understanding how search engines rank your website is to pick a search engine. And clearly, with a global market share of 83% of all search engines, Google is going to be the chosen one! 

So what does Google really look for in your website? Here’s an excerpt straight from Google:

Let’s break them down and know what it really means:

1. Meaning of the query: Involves identifying relevant results based on the intent of the query. Google uses various language models to match the words in the query with the most useful content. Thorough keyword research will help you identify and use the most trending and relevant keywords on your website.
2. Relevance of the content: Google now checks if the content available contains the keywords in the query. Especially scans if the keywords are placed in the most strategic locations like the Headings (H1, H2, H3), Titles, Meta descriptions, etc. Beyond this, it also checks if the content provided on your page has enough useful information (relevant images, relevant topics) that is related to the query.
3. Quality of content: This is more of an Off-page SEO factor that checks if other trusted sources have linked to the website and content. Therefore, the more quality backlinks you have, the better.
4. Content and settings: In order to provide you with the most relevant results, Google needs to know you better. Like your geographic location so when you search for “Cake shops near me” from New York, you’re not taken to cake shops in Cambodia. It also checks for your search history (if enabled) to provide you with the most meaningful content. To improve this, some off-page SEO techniques like local search listing can be applied.
5. Usability of web pages: Now this is where our on-page SEO techniques, which we are going to talk about in this article, come in handy! Google looks at Page experience aspects that impact user experience. Like the performance of the website, page load time, mobile friendliness, interactivity, safe browsing, accessibility, etc.  

Although there are many contributed modules that can help boost your SEO, Drupal also lends well to SEO by default. Let’s take a look at some of those factors that directly or indirectly help improve your Drupal website’s SEO.

The Big pipe module uses the Big pipe technique (invented by Facebook) to load pages faster. It requires zero configuration and employs the Dynamic page cache module’s caching abilities to lazily load content. In reality, it improves perceived performance which helps improve the core web vitals and overall usability of your website.

In addition to that, images can now be Lazily loaded by default. Since version 9.1, Drupal has added default support to native lazy loading of images (a browser feature that defers offscreen loading of images). Since images take up a huge chunk of the bandwidth, this feature support hugely reduces the page load time of a website.

Since Drupal 9.2, support for WebP format images is now out of the box. WebP formats drastically reduce the image size while maintaining the quality and it is widely supported by modern browsers today. Using Drupal core Image Styles, you can easily convert any image (png, jpg, gif, etc) to a webP format. Additionally, you can also download the WebP Drupal module to convert your images to webP format in runtime.

Not only can you provide a responsive website to your user, but now managing content on your website is also easy on the fly. Since Drupal 8, responsiveness is out of the box which means that various design elements are provided and supported to ensure your site looks great on all devices. 

Scaling down a bigger image to fit a small device is harmful to performance and consumes more data as it still needs to load the bigger image first. With the Responsive image styles and Breakpoint modules, images load faster as you can now provide various breakpoints for each device and load only a particular image for the specific breakpoint. 

Drupal’s new default front-end theme, Olivero, is creating waves for its modern and mobile-friendly design features. It also offers native support for CSS variables which means that changing styles based on breakpoints is now easy. Navigation elements like breadcrumbs and menus are highly optimized for mobile devices.

Drupal is constantly improving accessibility and is always committed to providing an accessible web for all. The community’s Accessibility team works towards identifying and resolving accessibility barriers. By default, Drupal offers accessibility support for features like WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) elements, Aural alerts (providing timely messages to aural users), Alt text (making images/videos more understandable), Accessible in-line forms (making it easy to identify the errors while filling up a form), Tabbing Manager (guiding non-visual users to ‘tabbable’ parts of the page) and many more. The default WYSIWYG editor, CKEditor, also supports accessibility in that it enables a good semantic structure for content.  

Olivero, the default front-end theme, was designed with accessibility in mind. It has a level AA compliance with the WCAG (Web Content Accessibility Guidelines). The combination of light and dark colors in the theme also enables good accessibility. Additionally, the color contrasts used in the forms and buttons are beneficial for accessibility.

Besides Drupal's front-end theme, the back-end theme - Claro, also has high accessibility standards. It has been a part of Drupal core since version 8.8. It conforms with the WCAG 2.0 AA guidelines having a large enough base font size, careful usage of spacing, AA standard approved form elements usage, and more.

Now that we know how Drupal is great for SEO straight out of the box, let’s look into some crucial and absolutely must-have contributed Drupal modules that will enhance your website’s SEO ranking.

• Enable structured data with the Drupal MetaTag module. Read these articles to know more about the module and how to configure it.
• Generate user-friendly URLs with the Drupal PathAuto module. Read this article to learn more about the module and how to generate bulk URL aliases.
• Avoid invalid URLs and direct your users to the right path with the Drupal Redirect module. Read more about the Redirect module and other powerful Drupal SEO modules in this article.
• Find and fix broken links with the Drupal LinkChecker module. It periodically checks for broken links and generates a report for the same.
• Preview and edit SEO content in real-time with the Drupal Yoast SEO module. It also does content analysis and tells you what you are missing - like reminding you of the max length of the content, readability score, word count, right placements for the focus keyword, and more.
• Ensure your website follows all necessary SEO best practices with the SEO checklist module. It checks your website if it is search engine optimized and provides you with suggestions for improving it.

• https://siteefy.com/how-many-websites-are-there

Optimizing your website for search engines and getting listed above your competitors is critical for business growth today. As we mentioned right at the start, SEO is a journey, a process that keeps evolving with the market trends. Drupal is an ideal choice of CMS to help you sail through that journey smoothly. At Specbee, our Drupal experts and technical SEO experts. offer a comprehensive Drupal SEO services package to help your website get to the top of all search engines. Talk to us today!

Author: Shefali Shetty

​​Meet Shefali Shetty, Director of Marketing at Specbee. An enthusiast for Drupal, she enjoys exploring and writing about the powerhouse. While not working or actively contributing back to the Drupal project, you can find her watching YouTube videos trying to learn to play the Ukulele :)

Leave us a Comment

Today we are talking about The Schema.org Blueprints Module with Jacob Rockowitz.

www.talkingDrupal.com/366

• What is Schema.org
• What is the Schema.org first approach
• Is this just for SEO
• What is the Schema.org Blueprints Module
• What are the goals
• How does this module benefit your project
• Can you give us a demo
• Why Paragraphs
• How do you handle schema you do not need
• How do you handle missing schema
• Have any sites used this
• What is your maintenance approach
• Roadmap
• Recommendations
• Contributing to Schema.org

• Introducing the Schema.org Blueprints Module for Ambitious Drupal Site Builders
• Schema.org Blueprints project page
• Schema.org-first blog posts
  • The future of our Drupal CMS and Schema.org: APIs, UI, and UX
  • Using a Schema.org-First approach to build a single source of truth and a unified Content Management System
  • Exploring a Schema-First approach to Drupal and Content Management Systems
• Videos
  • Here is a 7 minute demo of the module’s features and functionality
  • Here is a demo of a podcast Github issue

Jacob Rockowitz - www.jrockowitz.com @jrockowitz

Nic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Tim Lehnen - @hestenet

Flex Field Defines a new “FlexField” field type that lets you create simple inline multiple-value fields without having to use entity references.

The Drupal Community Working Group (CWG) enters its 9th year and its members feel that it is their duty to continue pursuing the mission of building a friendly and welcoming community for Drupal projects and even uphold the Drupal Code of Conduct to its best ability. 

So, through this article let’s walk through the initiatives taken by the Drupal Community Health team and also look into the facts that would depict the state of the contributions made till now in order to improve the experience of working in the Drupal community.

In the year 2020, the Drupal Community Working Group expanded, and the Community Health Team was formed. The mission of this new team was to prioritize community health tasks that included workshops and knowledge transfer. 

As a refresher, the Community Health Team was asked to look after the following tasks:

• Community Event Support – To provide resources and support in relation to the Code of Conduct for Drupal events.
• Community Health – To provide opportunities in order to educate and train community members to be more effective contributors.
• Membership - To help recognize and recruit community members for the CWG.
• Ambassadors (subject matter experts) – To provide expertise and advice in relation to geographic, cultural, and other differences both inside and outside the Drupal community.

To your surprise, the team also worked on the following proactive community-health-related projects:

• Initial work on a Drupal Code of Conduct update.
• Continued development and monthly meetings of a group of community health representatives from other open source communities.
• Ongoing Code of Conduct contact workshops. 
• Initial authoring of the Drupal Event Accessibility Playbook. 
• Blog posts related to community health.
• "Nudges" for Drupal Slack Workspace and issue queues.  

In fact, to accomplish the long-term goals, the Community Health Team continues to include providing an on-ramp for the Conflict Resolution Team and recognizing and presenting additional community-health-related workshops for the community.

The Conflict Resolution Team welcomed its newest member, Donna Bungard in May 2021.  In fact, the team is looking on to add multiple new members to the team in 2022. 

The Conflict Resolution Team happens to work on ongoing and new Code of Conduct-related issues. During the weekly meetings, they usually work on three types of tasks:

• Internal business – In this, the examples include recruitment, public blog posts, and presentations, Aaron Winborn Award, event organizer requests, and other non-conflict-related requests from community members.
• External, old business – It includes ongoing conflict resolution tasks that are generally brought to the Conflict Resolution Team from community members.
• External, new business – It includes new conflict resolution tasks, that are generally brought to the Conflict Resolution Team from community members.

Well, the conflict resolution team decided to perform a quantitative analysis of the number and kinds of conflict resolution issues they work on by comparing data from 2019 and 2020 with data from 2021.

The team’s methodology enabled them to assign one or two of the following categories to each new issue they received during 2019-2021:

• Social media conflict
• Issue queue conflict
• Drupal Slack workspace conflict
• In-person Drupal event conflict
• Virtual Drupal event conflict
• Not CWG domain
• Other – In this, the examples include content issues on Drupal.org, issues related to local Drupal communities (but not directly related to an event), and interpersonal issues occurring in areas not covered by any of the other categories.

Talking about the overall number of incidents they continue to observe fewer new conflict-related incidents, with 14 reported during 2021 (in comparison with 35 in 2019 and 17 in 2020).

• Not a surprise, that the number of conflicts reported from in-person events was zero.
• There were zero incidents reported to the team from social media conflicts between Drupal community members.
• The number of issue queue conflicts was down to 6.

It’s time to take a look at what exactly the Community Health team holds in 2022.  

Having served more than 3 years on the team, the multiple current resolution team members look forward to adding new members to the team. This seems to be one of their major goals for 2022. In fact, they have been interviewing multiple candidates already in 2022 and wish to have an announcement soon.

Also, one of the goals of the Community Health team is to offer an on-ramp to the Conflict Resolution Team. The Community Health team will ask all the potential Conflict Resolution Team members to join the Community Health Team as a necessity.

With the addition of Donna Bungard in 2021, they could document and formalize their onboarding process for new conflict resolution team members. Also, during the onboarding period, new members mainly shadow the team and have very limited access to historical conflict resolution reports.

The new members at the conclusion of the trial period will either become regular members or won’t be able to be a part of the team any longer. And all the trial members need to be approved by the CWG Review Panel as per recommended by the team’s charter.  

The Community Health Team strongly plans to focus on the aforementioned Drupal Code of Conduct update, assisting with the expansion of the Community Health Discussions group from multiple open-source communities and continued support for the other proactive community health initiatives in this year 2022.

These videos also can give you better clarity on the contributions made by the Drupal Community Health Team. 

Learn more on:

• The role of Community Initiatives to help Drupal evolve
• Drupal for Every Industry: Serving Needs and Fulfilling Demands
• The new features and improvements in Drupal 10

Hoping that this article really helped you in getting a proper understanding of how the Drupal Community Health Team is taking initiatives in building a secure and friendly community for all aspiring Drupalists. 

You also get to learn about their future plans and endeavors which can possibly help them in creating an atmosphere where every contributor can grow and reach their desired career goals with ease and convenience.
 

• The role of Community Initiatives to help Drupal evolve

• Drupal for Every Industry: Serving Needs and Fulfilling Demands

• The new features and improvements in Drupal 10

Client requirements can be complex and those complex requirements often require custom code to be written. This includes making sure that the editing process conforms to certain validations.

Drupal can easily handle simple validation like having a value in the field or making sure an email is valid, but with more complex validations usually require custom code.

Whilst it is possible to inject custom validators into form submissions, I find using validation constraint classes makes the whole process much more predicable. Also, validation constraints are applied at a lower level than form validations, which means we can validate the data is correct even if we are creating the entity from an API.

In this article I will look at creating a custom validation constraint that can be used on a field to provide custom validation for certain fields. We will also look at how we can use unit testing to ensure these custom validation constraint classes do what we expect them to do.

A validation constraint is essentially a pair of classes that work together to validate something. One class is constraint plugin that we register with Drupal, and the other is a validator that we add our custom validation code to.

First, let's create the constraint. This class needs to live in the directory src/Plugin/Validation/Constraint in your module directory and must extend the Symfony\Component\Validator\Constraint class.

The definition of the class is pretty simple, you just need to add an annotation to the class to let Drupal know that this is a constraint. It is also quite common to add error messages that we can generate from the validation class.

Read more.

Drupal Mountain Camp brought together visitors from Europe and beyond to Davos, Switzerland for the third time. 2022, the team was glad to be able to host an in-person event again, this time with a twist: instead of fun in the snow, we met for an adventure in summer. June 23-26, a group of web enthusiasts met in the mountains to exchange, share, and improve their knowhow of building and maintaining websites using the open source content management system and framework, Drupal.  

To the organizers surprise, most of the audience arrived on Thursday to participate in contribution activities as well as workshops. 

Thanks to our keynote speaker Baddý Sonja Breidert, the audience learned why contribution is at the core of being successful with Drupal and running a Drupal business. 

Awesome #Lego workshop today at @mountaincampch #DrupalMountainCamp #Drupal #DigitalExperiences #Requirements pic.twitter.com/ctfxU9W9NH

Then we moved onto a very well received workshop presented by Michael Mauch from netnode called a Lego Serious play game.

Gábor Hojtsy, our second keynote speaker, presented about the state of Drupal 10.

Like many other DrupalCamps, the magic of Drupal Mountain Camp not only happens in the program that gets presented but between the people that meet for the first time, or after not having seen each other in a while.

For the social events, participants visited the local ice hockey stadium and also met up in the mountains for local food and hiking.

An event like Drupal Mountain Camp wouldn’t be possible without the support from many volunteers as well as sponsors.

Thank you Susanne Perreijn, Mathilde Dumond, Josef Kruckenberg, Miro Dietiker, Ursin Cola, Daniel Lemon, David Pacassi Torrico, Floris van Geel, Kevin Wenger for making the event happen.

Thank you platform.sh for being a diamond sponsor, infomaniak and amazee.io for supporting as gold sponsors, Liip, MD Systems, soul.media. iqual, netnode, Unic, LakeDrops, Cyon, Hostpoint and Happy Coding for your support as silver sponsors.

What’s next?

Part of the team is busy organising and attending DrupalCon Europe in Prague this week. We are looking forward to organising Drupal Mountain Camp again, most likely in 2024. The Drupal Switzerland association will be hosting the general assembly before the end of the year where we want to set new goals. If you are interested in helping drive the Swiss community forward, organise events like the Splash Awards or Drupal Mountain Camp or have another idea you would like to implement, please do get in touch with us.

Looking for further resources? Drupal Mountain Camp 2022 in the media.

Image credits: Patrick Itten

Photo by Paul Johnson - Driesnote at DrupalCon Prague

Drupal is an open source project that helps foster an open web for everyone. At DrupalCon, project lead and founder Dries Buytaert laid out the latest developments for Drupal. Drupal’s authoring experience and headless capabilities are among the key features. Drupal will see an extra focus on accelerating product innovation and sustaining Drupal’s market growth. 

Drupal has a strong market position and is growing steadily. It empowers digital experiences for many top organizations worldwide, including Lufthansa and The European Government. With its API-first approach, Drupal is an ideal choice for organizations tying their CMS into their back office. Headless frameworks accelerate this even more. At DrupalCon in Prague, Dries Buytaert talked about Drupal improvements and innovation driving Drupal’s growth further.

Drupal’s vision remains based on an open, flexible, and accessible platform that allows individuals and organizations alike to own their own data. This is something that has become very important in a world where big tech owns people’s data. Using open source gives full control over the digital experience you want to offer to people, whether it harvests data or not. Proprietary systems often give no control and lock in on privacy and limit creative possibilities. You can’t fix accessibility issues when you use proprietary systems. Open source gives full control to developers and organizations alike. There is no limit to what you can do. 

Dries Buytaert: “My personal belief has always been not to collect people’s data and personalities. I aspire to the privacy of a printed book.”

Drupal has commitments to various ingredients for an open web allowing organizations to own their own digital experience. Scalability, accessibility, and reliability are important cornerstones for Drupal. Good software cares about end users and helps people. This will remain at the heart of the Drupal project.

Moving Drupal’s code from its homegrown environment to Gitlab eliminates friction points for the open source community to contribute to Drupal and it will improve collaboration. Automated testing will offer instant review feedback which is a huge impulse for Druapl’s product innovation.

Buytaert finally underscores the importance of the work being done on Drupal by thousands of Drupal professionals worldwide. The vast support base helps to get started with Drupal and support organizations who believe in an Open Web. People are attracted to good software. It’s an important reason why people adopt Drupal, whether it's for business purposes or making a career. 

Drupal version 10 will be scheduled to release in December 2022. Drupal 9 users will have 11 months to upgrade to Drupal 10. This is because of underlying third-party dependencies that will end support by then. 

DrupalCon is an international conference where individuals and organizations meet to talk about Drupal and exchange experiences. Over 1200 people meet in person in Prague this week at DrupalCon and collaborate on the project. The Drupal Association is a non-profit organization that caters to the needs of Drupal and its worldwide community. It focuses on helping the growth of the Drupal community and supporting the project’s vision to create a safe, secure, and open web for everyone. Are you using Drupal or are you a Drupal community? Feel free to connect! 

You probably noticed it for the first time several years ago. You were trying to visit some website or online article–but before you could read or do anything else, there was suddenly a pop-up window or banner blocking you.

And the message wasn’t trying to sell you anything. It was simply about “cookies”. Most followed some version of the following– ”this site uses cookies, and I hope you’re ok with that.” They often didn’t say more than that. Just that this website relies on cookies and they thought you should know. Don’t like it or understand what they’re talking about? Well, too bad.

I guess you could always turn and run, but then you wouldn’t get to read or find whatever it was you were looking for. As they advanced in technology, these “cookie compliance” banners or “cookie walls” have become a little more useful. Now they may include a lot more info, such as a list of the different types of cookies being used, and what they are for. Even better, they often now give you the option to say “no, I don’t want your cookie” (aka, don’t track what I do).

But where the heck did these come from and why did it seemingly start out of the blue? We never got asked this before. Ever wonder why everyone started asking you to “approve” their use of cookies on websites? And perhaps equally important, should you be doing this on your own websites? Let’s take a run through the cookie madness.

The website loading speed is a very important aspect in the user's perception of the portal. Then how can you speed up the loading of a website that has a lot of media or iframes? One of the best solutions is to take advantage of lazy loading. The easiest way to use this method in Drupal is to use the Lazy-load module.

It’s the time required to display a website to a user, calculated from the moment the link is clicked. It depends on the amount of text, embedded elements (such as iframes), scripts, and media (images, videos), where the size also matters. Often the media and embedded elements take the longest to load. On big websites, many elements are invisible to the users until they scroll the website, yet they are loaded before the part that fits on the display is shown.

Google has introduced SEO guidelines in which loading speed is taken into account when positioning a website. Therefore, it’s worth taking care of the smooth display of web pages. Two significant metrics in terms of the website loading speed are TBT (Total Blocking Time) and LCP (Largest Contentful Paint). TBT indicates the time it takes for long tasks to complete, while LCP determines after how long a website's content is likely to be usable. Both metrics are largely influenced by the number and size of loaded items.

Newer versions of Drupal (v9.1.0 and above), along with commonly used browsers (Chrome from v76, Firefox from v75), support lazy-loading right after installation. However, you have to reckon with the fact that many websites use older versions of Drupal. Most often, these are websites that have been developed for years, and therefore often have a lot of data (including media and embedded elements), the long loading of which worsens the perception of the portal. In such cases, it’s worth checking whether lazy loading can be used to reduce the loading time of the website and the transfer needed to load visible elements.

Released on April 10, 2018, the Drupal Lazy-load module allows you to limit the loading of the abovementioned elements to only those required at a given time. This reduces the website loading time and, above all, reduces the consumption of transmission. Due to its usefulness, the module is used by more than 10 thousand websites. It has versions for both Drupal 8+ (the latest version 8.x-3.11 as of January 31, 2022) and Drupal 7 (the latest version 7.x-1.4 as of April 22, 2019).

It’s commendable that Osman Gormus is the sole maintainer of the project, and yet the module hasn’t lost support since its creation.

To illustrate the effectiveness of the Lazy-load module, here are the test results on a website containing 36 iframes (of which 6 are visible in the loaded area) and 116 images that are out of view.

In the above example, the user is able to see the website almost fifty percent faster when using the module. Moreover, the link savings is more than 98%. Of course, the results for each website will strongly depend on the size and number of elements outside the loading area. While the example is grotesque (we are unlikely to encounter a website with such a large number of images or embedded elements), it’s meant to illustrate how important the use of a lazy loading strategy can be in the perception of a website.

The module uses additional libraries, so the installation requires taking them into account. The easiest and fastest way is to use the composer.json file for this. In a few steps, we can perform a full installation of the module, including dependencies.

1. In the repositories section, we add the following: { "type": "composer", "url": "https://asset-packagist.org" }
2. Then we need to run the command (we add the -W option at the end if necessary): composer require drupal/lazy:^3.0 bower-asset/lazysizes:^5.1 oomphinc/composer-installers-extender:^2.0 --no-update
3. We need to edit the extra section in composer.json to include the following: "installer-types": ["bower-asset", "npm-asset"], "installer-paths": { … "web/libraries/{$name}": ["type:drupal-library", "type:bower-asset", "type:npm-asset"], … }
4. Now we can run the composer update command.

Full instructions can be found in the official documentation.

In case you need a manual installation, download the module files from its website on Drupal.org and the library available on GitHub and extract them one by one to the folders of modules/contrib/lazy and libraries/lazysizes. Full instructions can be found on the module website.

Important: The module has its own configuration located under the path of admin/config/content/lazy. It’s divided into 3 tabs.

1. Prefer native lazy-loading - checking the option will force the use of lazy loading embedded in the browser.
2. skipClass - elements that have the class entered won’t use lazy loading.
3. Placeholder image URL - image inserted in the place of loaded objects.
4. Enable default CSS effect - enabling default transitions when loading objects, using CSS with appropriate classes.
5. Use minified versions - checking this option will cause the use of minified versions of scripts.
6. Lazysizes library path, or URL - path or address pointing to the Lazysizes library (required by the module).

1. Pages - the paths of websites to use or have disabled lazy loading, dependent on the checkbox from point 2.
2. Enable lazy-loading ONLY on specified pages - the option determining whether the paths entered in point 1 should have lazy-loading disabled (unchecked option), or whether it should be active only on the indicated websites (checked option).
3. Disable lazy-loading for administration pages - blocks the execution of the module script on administrative websites.

1. lazyClass - a class designating the elements that should be considered for lazy loading.
2. loadedClass - a class assigned when the element is loaded.
3. loadingClass – a class assigned when the element is being loaded.
4. preloadClass - a class designating the elements that should be loaded after "onload”.
5. errorClass - a class assigned to the elements whose loading failed to complete correctly.
6. autosizesClass - a class designating the elements that will be automatically scaled.
7. srcAttr - the attribute of src
8. srcsetAttr - the attribute of srcset
9. sizesAttr - the attribute of sizes
10. minSize - for use with data-sizes=”auto”. The minimum image size to calculate the attribute of sizes.
11. customMedia - an object that is an alias for mapping various media queries. It can be used to separate/centralize the implementation (layout) of multiple specific media queries from the attribute of source[media] (content/structure) through the creation of tagged media queries.
12. init - determines the initialization of the Lazysizes library. In some cases, it may be required to disable automatic initialization. Manual initialization is then required by using lazySizes.init();.
13. expFactor - a factor indicating how many assets should be loaded when no valid action is performed.
14. hFac – a factor analogous to expFactor, but in horizontal orientation.
15. loadMode - loading mode. 0 - no loading, 1 - loading of visible elements only, 2 - loading of visible and close elements, 3 - loading of visible, close and catching elements within the range of expansion by expFactor. During onload, the option is automatically set to 3.
16. loadHidden - determines whether hidden elements should also be loaded. LazySizes loads such elements with a delay.
17. rlcTimeout - delay option for requestIdleCallback.
18. throttleDelay - delay used for listeners.
19. Plugins - selection of plugins that should be attached. The full specification and description of plugins can be found on Github.

In order to attach lazy loading, editing the display of the fields for which its use is needed is required. For example, you want to enable the addition of images that support lazy loading on the page type websites. To do this, you need to perform the following steps:

1. Select Structure -> Content Types -> Content Page -> Manage Fields in the admin panel (admin/structure/types/manage/page/fields).
2. Add a new field (e.g. of the Image type).
3. Go to display management. 
4. Expand the field options (click the cog symbol on the right-hand side).
5. In the expanded settings, check the box of Enable lazy-loading.

    

From this moment on, all images added in this field will use lazy loading. What's more, classes will be added, set in the module's configuration (admin/config/content/lazy) in the Lazysizes configuration tab, discussed earlier in the Lazysizes configuration section.

With the above settings, we can add effects to elements with lazy loading, depending on their status, using styling in CSS files (such as blurring images that are still being loaded or adding a red border to elements that failed to load). Below is an example with two images – one fully loaded (top) and one in the process of loading (bottom):

For embedded content, added within the content, be sure to add the attribute of loading=”lazy”, as in case of iframe:

The module adds the hook of hook_lazy_field_formatters_alter, which allows adding formatters, not yet supported, to image-based fields.

Example:

Using the Drupal Lazy-load module significantly reduces the loading time of websites that have multiple media, which are outside the visible area, immediately after they are loaded, and reduces user data transmission. Lazy-load is useful for older versions of Drupal, as newer versions have native lazy-load support embedded. However, even for them, this module is noteworthy for its configurable styling of elements, depending on their current loading status.

Are you wondering if the Lazy-load module is right for your website? We maintain and develop a lot of websites on Drupal, so applying our experience, we’ll be happy to recommend which solution will be best for your website.

When Microsoft killed off Internet Explorer in June of 2022, front-end developers breathed a sigh of relief. IE's death meant that the development of lots of exciting features in CSS could now be fully supported across all major browsers (Chrome, Firefox, Safari, Edge) without worrying about IE compatibility.

GitKraken, the world’s leader in creating premier Git tools for software developers, will host the 2nd annual GitKon tech conference 11-13 October 2022. This free, virtual event will bring together developers, technical teams, managers, executives, and thought leaders united by a passion for software development, team collaboration, and Git. 

The event will offer 36 sessions across three days of content with speakers from companies like GitHub, GitLab, Microsoft and VS Code, Atlassian, Amazon, and more. Each day, 12 tech experts will have 15 minutes to present their thoughts on topics ranging from DevOps, distributed collaboration, security, developer skills, emerging trends, and more. 

Registration for GitKon is completely free on gitkon.com.

One of the most anticipated sessions of this year’s event is the keynote presentation on Tuesday, 11 October. Drupal Founder and Acquia CTO/Co-Founder, Dries Buytaert will present: From the Dorm Room to The White House - How Drupal Grew and Became the Standard for Open Source Web Experiences.

In this talk, Dries will tell the Drupal story, including how the team was able to achieve success ultimately by embracing open source. 

Bringing people together under a shared passion is at the heart of what Drupal does,” says Dries. “GitKon is a great venue for sharing our story, and I’m excited to pass along lessons learned to show more teams that they can also achieve corporate success by supporting open source. 

Founded in 2001, Drupal is a free and open source web content management system that has scaled to become a standard tool in the industry. While Dries initially created Drupal as a simple message board that could be easily edited and managed by his college community, the tool quickly gained popularity with developers and currently powers millions of websites worldwide. 

GitKraken CEO, Matt Johnston is a former colleague of Dries, joining his team after Acquia acquired Mautic, an open source marketing automation leader for which Johnston served as the CEO before joining GitKraken. 

I’ve known Dries for a decade and had the pleasure of working directly with him on Acquia’s Marketing Cloud solutions,” says Matt. “His ability to balance the needs of Drupal and Acquia–while simultaneously scaling both–is a rare feat. Dries’ talk will be an awesome opportunity for GitKon attendees to hear about open source innovation.

The theme of GitKon 2022 is Creating a Collaborative Future, a mission at the heart of what Drupal does and stands for, with collaboration through the open source community leading Drupal’s success and now Acquia’s mission.

To hear Dries and other tech experts from around the world, register now for free at gitkon.com.