In an era where mental health is increasingly claiming space in our daily lives, it is essential to bring this concern to our workplace as well. If vigorous mental health brings more productivity to the performance of a professional activity, a Cognitive Load adjusted to the capacity of each one will also produce similar effects. But to what extent are we considering the influence of each individual’s Cognitive Load on the performance of their work? And what is the impact of this type of load on each individual’s mental health?

Mental health and Cognitive Load

Cognitive Load theory was first developed by educational psychologist John Sweller in the late 1980s while analysing how his students studied and solved problems. Sweller realised that to solve problems, his students needed to have high cognitive thinking skills. From then on, Sweller dedicated himself to understanding how to reduce this cognitive load to help his students. Cognitive Load theory was John Sweller’s way of quantifying this effort. He defines Cognitive Load as “the total amount of mental effort being used in the working memory.”

What is Cognitive Load?

Working memory can only hold a limited amount of information, so it's important to keep it manageable. Cognitive Load Theory refers to the different types of information that working memory can handle at once.<ul><li class="ql-align-justify">🧠 Intrinsic Load: the difficulty and complexity of a task or new information</li><li class="ql-align-justify">🚀 Extraneous Load: how information is presented and the environment in which tasks are performed</li><li class="ql-align-justify">💡 Germane Load: the effort put into connecting new information with existing knowledge for long-term storage</li></ul>

The Three Types of Cognitive Load

When managing a large ecosystem, it's crucial to consider the cognitive load of different teams. Neglecting this can lead to mental overload, physically and mentally impacting employees and resulting in delayed tasks, poor quality work, and decreased motivation.To prevent this, carefully managing the amount of information and tasks assigned to each team member is essential. Key concepts to remember include:<ul><li class="ql-align-justify">Recognize each person's capacity for handling information</li><li class="ql-align-justify">Avoid assigning too many tasks at once</li><li class="ql-align-justify">Regularly check in on team members' stress levels</li></ul>

The Importance of Managing Cognitive Load in Teams

In an era where mental health is increasingly claiming space in our daily lives, it is essential to bring this concern to our workplace as well. If vigorous mental health brings more productivity to…

productivity

Productivity

personaldevelopment

Personal Development

mentalhealth

Mental Health

Are you overloading your mind?

Lighthouse warns us about large DOM sizes because they increase memory usage and can produce <a href="https://web.dev/articles/reduce-the-scope-and-complexity-of-style-calculations">expensive style calculations </a>. This can have a significant impact on user experience, especially for users on lower-end devices.When we work with a tree data structure like the DOM, its depth has a lot to do with how fast operations such as lookups perform on them. The deeper a tree goes, the more operations it could take to access one of its elements.

Trees in the browserwoods

A tree's height and balance impact efficiency and performance, as seen with Binary Search Trees. Consider self-balancing BSTs to maintain a minimum height and fast operations.Deep DOM trees in CSS can be problematic. Large and nested trees result in expensive style recalculations, affecting performance and responsiveness.<ul><li class="ql-align-justify">To decrease issues with styling, keep the DOM tree shallow and wide</li><li class="ql-align-justify">Self-balancing BSTs can also help reduce tree height and improve performance</li><li class="ql-align-justify">With a shallow and wide DOM tree, style recalculations are quicker, improving app response time</li></ul> 🌳🌳🌳🌳

Tall vs Wide Trees

You can measure DOM size and depth on your site using a tool like Lighthouse or <a href="https://pagespeed.web.dev/">PageSpeed Insights </a>. If you want to quickly check how many elements you have on the page at any given time, you can run this on your browser’s console:The main thing is to periodically check your DOM size and depth . I know this sounds obvious, but since we typically work with UI components or template partials that only expose us to a bit of HTML at a time, it’s easy to forget about how these bits of markup add up.

Regular checkup

Another thing that helps a lot is reducing the scope and complexity of your CSS selectors . This gives the browser an easier time finding the elements you’re trying to target and helps perform style recalculations much faster.

Are you overloading your mind?

How Deep is Your DOM? | Frontend at Scale

Andrew Stepikov