Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Aug 20 2020
Aug 20

In our 4 part series on "Faster Drupal", we have so far published three different articles on: 

  1. Faster Drupal: Part 1: Caching
  2. Faster Drupal: Part 2: Aggregation, CDN and Image Optimization
  3. Faster Drupal: Part 3: Theming

If you haven't already read those parts, go ahead and check them out! Now let's get to our beloved CSS/JS stuff!

Faster Drupal - Part 4: CSS/JS Tips

We’ve come to find this amazing blog post by Charlie Gerard, The first three items are from her blog post, I added the TL;DR version that we need for this guide but it's worth checking:

CSS: Avoid modifying layout wherever possible: Changes to some CSS properties will require the whole layout to be updated. For example, properties like width, height, top, left (also referred to as “geometric properties”), require the layout to be calculated and the render tree to be updated.

CSS: The descendant selector can be expensive: in an example like this: #nav a The browser is going to assess all the links on the page before settling to the ones actually inside our #nav section. A more performant way to do this would be to add a specific selector of .navigation-link on each  inside our #nav element. CSS: Browser reads selectors from right to left, so less selector the better

  • CSS: Some CSS properties are more expensive than others. What this means is that they take longer to paint.
    Some of these expensive properties include:
    1. border-radius
    2. box-shadow
    3. filter
    4. :nth-child
    5. position: fixed
  • Check to see if you are overriding your CSS selectors, there are IDE tools for that
  • Avoid duplicated CSS selectors, in large scale websites I’m pretty sure you can find a lot of them
  • Avoid !important declaration
  • Avoid DOM manipulation in javascript. If you really have toi do that (and often we do) keep the DOM updates to the bare minimum
  • The Drupal core will call attached behaviors when the DOM (the object representation of the HTML) is fully loaded and on each AJAX response altering the DOM.
  • Conditionally load assets where necessary! You have some JS or CSS only being used for certain nodes/content-types/pages? Load those files for those necessary pages only
  • Consider component-based themes that handle assets per component such as bootstrap_storybook
  • Use one of the methods below to defer parsing for external JavaScript files:
    1. Use the async attribute
    2. Use the defer attribute
  • Append the script to the DOM in JavaScript during the onload event
  • Make sure your scripts are placed at the bottom of the page (ideally at the end of the body) unless you really need it to be in the head..
  • Be sure to deliver the lightest possible font format. And also note the order of fonts loading is important as well. The preferred order of web font formats are as follows:
    1. EOT
    2. WOFF2
    3. WOFF
    4. TTF
    5. SVG
  • Try vanilla JS instead of jQuery: I mean we all love jQuery and it has saved us a lot of time and headache in the past, however nowadays you might not need jQuery for most of day-to-day operations.
    That said.. Sometimes you gotta do what you gotta do, but even then: do yourself a favour and use the latest jQuery available, not the default which comes with Drupal core to get the most updated library.
    • In Drupal 8 you can go one step further: Since D8 jQuery is not automatically loaded in the frontend so you can remove the jquery dependency from your theme's libraries and just use Vanilla JS!
  • Consider making a CSS/Image sprite out of your icons, especially if your users are still heavily using HTTP1.1.
    On the other hand if most of your traffic si via HTTP2 the number of your requests to the server are not really an issue (but don't go crazy)!

Are we done with this list? Never! We would like to continuously improve it.

We would also love to have your comments and suggestions!

Written by Sohail LajevardiSohail Lajevardi
Developer at Ramsalt Lab

Nov 22 2019
Nov 22

This article was originally posted on Thunder.org and is reposted here with the permission from Community Manager Julia Pradel. 

Not everyone has the necessary resources to engage their own design team. Our Certified Thunder Integrator (CTI) Ramsalt has recognized this need and developed a generic theme that will be available to other Thunder users as an open-source product.

The idea for the theme emerged a few years ago: “We wanted to develop a generic design which newspapers could easily customize to their individual needs” explains Ramsalt’s CEO Yngve Bergheim. “We had a starter kit in mind which could either be used as is, or easily tweaked by a designer.”

The first task was to gather all of the requirements for a design. We arranged focus groups with digital editors from several newspapers to understand their needs. “We also drew upon our own pool of experience,” says tech lead Stephan Zeidler. Ramsalt has made numerous magazines and newspapers since 2011. The analytic process ended up in a 51 pages design requirement specification and corresponding wireframes.

[embedded content]Example of Longform/featured articles


Art director Evgeny Pugachev led the design process while Stephan Zeidler was tech lead. The CTI Ramsalt Lab has offices in several countries among them Sweden, Norway, the Netherlands and Russia, and the Thunder development is directed from the German office in Berlin. According to Stephan, the greatest challenge with the theme’s development was ensuring that everything would be reusable - and at the same also be customizable. Stephan, therefore, relied on a component-based approach: “It is certainly significantly more complicated and takes longer at the beginning of the project but the risk of regressions is much reduced”.

Simple to adjust

The component-based approach also enables Stephan to capture updates from the numerous Drupal modules. “Since we use our own HTML templates rather than the standard Drupal templates, adjustments are much simpler than they would otherwise be.” Another advantage in his view is the lean markup which makes the site significantly quicker and also delivers plus points in terms of SEO aspects. The theme has also been put to the test and further optimized in order to achieve the best possible results in Google’s Pagespeed. It was a project by itself and led to the publication of a series of articles on Planet Drupal, under the heading The ultimate guide for faster Drupal.

The theme was conceptualized over a period of six months with two designers, challenged with the help of several customers and continuously developed along the way - and it is still a work in progress. The three-person development team working with Stephan, also wants to examine whether Drupal’s Color Module can be integrated and how the design could also be used as a demo theme by other CTIs.

 

Get the new design now!


For company chief, Yngve Bergheim, there is no question about whether the Ramsalt design will be made available to Thunder users: “Anyone that wants to try out the new design can drop us an email on [email protected]. - We want to use the theme as a showcase for publishers evaluating Thunder. Publishers already have the best technology in place in the Thunder distro, the best and biggest community. What is lacking now is a good looking design on the bodywork that fits the top-notch “Porsche” engineering we have in Thunder”, says Bergheim.

Open-source

The design is aimed to be released as an open-source module on drupal.org as soon as the integration with Thunder works seamlessly. There is still some work left: “The design currently makes many assumptions, like how the menu and various article variants look, that there is a search bar or that authors are shown with their names, pictures and even job titles” explains Stephan. The fields for these points did not exist in a standard Thunder. “And that is also a good thing, Thunder should remain as generic as possible” stresses Stephan. This does, however, pose him and his team the question of how the theme can, together with its Thunder installation, show its full effectiveness out of the box. Which is our goal, to have the theme in the Thunder distro eventually.

May 20 2019
May 20

We are on our journey to master the Drupal performance, after having our previous Part 1: Caching published a couple of weeks ago, we've been lucky enough to get into Issue 386 of TheWeeklyDrop newsletter, Planet Drupal, and got much love and good feedback on Twitter.

If you haven't already read the first part of the series, the ultimate guide for faster Drupal: Part 1 Caching, please feel free to read that article too.


Note: You don't necessarily have to do all of these, some items listed here are replaceable with each other as well, so proceed with caution!

Faster Drupal - Part 2: Aggregation and CDN

  • The one and the only holy grail: Advanced CSS/JS Aggregation
    On every Drupal optimization post you’d read you have to setup and configure AdvAgg module, but you gotta do what you gotta do!
    AdvAgg features and core benefits are listed on the module page completely, so go ahead and read them all, configure it the way that works best for you and move on
    Advanced CSS/JS Aggregation Drupal module

    Note: If you have Mod Pagespeed you might not need AdvAgg module, make sure that you don't overlap your own work

    But that’s not all, if you are on Drupal 7, you should consider checking Speedy module as well, in some areas, this might work a bit better so make sure to check it out as well
    Speedy module

  • For good JavaScript minification in Drupal, you can use modules such as minify but we’d like to recommend minifyJS instead, they listed the differences and benefits on their module page so check it out
    Drupal MinifyJS module

  • CDNize the whole project, as much as you can! You may use CDN module too

  • Move JavaScript to the footer if necessary, some JS files need to be rendered in the head based on the use case and what does the JS do! Also in Drupal 8, it’s quite easy to append your necessary library (Read it JS files) in the footer in twig template files

  • Consider if you can make your own scripts defer/async (a new challenge when it comes to Drupal js aggregation)

Okay, this round was much easier thanks to AdvAgg module for taking care of half of the things we need to do for us! Note that on the frontend side you can Uglify, Minify and make sure everything that you code, will become compressed, whether it’s CSS, JS or even images or SVG files! Now let's get to it, Image optimization. 

Image optimization

  • Drupal 8: Use the Responsive Image module wherever possible and create the appropriate styles. It uses the tag which is what we really want

  • One might say we have one too many image optimization modules in Drupal, which is a good thing! For that we tested some, experienced with some of them and here’s what we suggest: Use blazy and lazyload_images (Drupal 8 that uses IntersectionObserver instead of scrolling events), Also consider: lazyloader and image_lazy_loader when using the picture module for responsive images in Drupal 7. There is also a lazy loading option that works well

  • Image optimization: for main images/icons used in the design (Yes you can optimize SVG files as well), also the best tool for that is not in Drupal, try ImageOptim desktop app, Also there’s an API-based service available with a Drupal 7 module, take a look here, might worth setting/selling this up to clients

    Also in the same context, we can use ReSmush.it which is free (But should donate some beer to them)
    Drupal 7 Module, Drupal 8 Module

  • Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. There's a really good module that help you serve WebP, it's called, you guessed it; WebP.

  • Serve WebP images with your web server with the MOD PageSpeed by Google for Apache and Nginx.
    Or conditionally serving WebP images with Nginx.
     

Bonus tip: Even favicons should be optimized. Sometimes people ignore the weight of a favicon file. You shouldn’t! 

 

For the next week, we will be covering subjects regarding Drupal database/web server tweaks & improvements, stay tuned.

Written by Sohail LajevardiSohail Lajevardi
Developer at Ramsalt Lab

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web