Drupal Planet

Dries Buytaert: Optimizing site performance by "lazy loading" images

13 godzin 16 minutes ago

Recently, I've been spending some time making performance improvements to my site. In my previous blog post on this topic, I described my progress optimizing the JavaScript and CSS usage on my site, and concluded that image optimization was the next step.

Last summer I published a blog post about my vacation in Acadia National Park. Included in that post are 13 photos with a combined size of about 4 MB.

When I benchmarked that post with https://webpagetest.org, it showed that it took 7.275 seconds (blue vertical line) to render the page.

The graph shows that the browser downloaded all 13 images to render the page. Why would a browser download all images if most of them are below the fold and not shown until a user starts scrolling? It makes very little sense.

As you can see from the graph, downloading all 13 images take a very long time (purple horizontal bars). No matter how much you optimize your CSS and JavaScript, this particular blog post would have remained slow until you optimize how images are loaded.

"Lazy loading" images is one solution to this problem. Lazy loading means that the images aren't loaded until the user scrolls and the images come into the browser's viewport.

You might have seen lazy loading in action on websites like Facebook, Pinterest or Medium. It usually goes like this:

  • You visit a page as you normally would, scrolling through the content.
  • Instead of the actual image, you see a blurry placeholder image.
  • Then, the placeholder image gets swapped out with the final image as quickly as possible.

To support lazy loading images on my blog I do three things:

  1. Automatically generate lightweight yet useful placeholder images.
  2. Embed the placeholder images directly in the HTML to speed up performance.
  3. Replace the placeholder images with the real images when they become visible.
Generating lightweight placeholder images

To generate lightweight placeholder images, I implemented a technique used by Facebook: create a tiny image that is a downscaled version of the original image, strip out the image's metadata to optimize its size, and let the browser scale the image back up.

To create lightweight placeholder images, I resized the original images to be 5 pixels wide. Because I have about 10,000 images on my blog, my Drupal-based site automates this for me, but here is how you create one from the command line using ImageMagick's convert tool:

$ convert -resize 5x -strip original.jpg placeholder.jpg
  • -resize 5x resizes the image to be 5 pixels wide while maintaining its aspect ratio.
  • -strip removes all comments and redundant headers in the image. This helps make the image's file size as small as possible.

The resulting placeholder images are tiny — often shy of 400 bytes.

The original image that we need to generate a placeholder for. The generated placeholder, scaled up by a browser from a tiny image that is 5 pixels wide. The size of this placeholder image is only 395 bytes.

Here is another example to illustrate how the colors in the placeholders nicely match the original image:

Even though the placeholder image should only be shown for a fraction of a second, making them relevant is a nice touch as they suggest what is coming. It's also an important touch, as users are very impatient with load times on the web.

Embedding placeholder images directly in HTML

One not-so-well-known feature of the element is that you can embed an image directly into the HTML document using the data URL scheme:

Data URLs are composed of four parts: the data: prefix, a media type indicating the type of data (image/jpg), an optional base64 token to indicate that the data is base64 encoded, and the base64 encoded image data itself.

data:[][;base64],

To base64 encode an image from the command line, use:

$ base64 placeholder.jpg

To base64 encode an image in PHP, use:

$data = base64_encode(file_get_contents('placeholder.jpg'));

What is the advantage of embedding a base64 encoded image using a data URL? It eliminates HTTP requests as the browser doesn't have to set up new HTTP connections to download the images. Fewer HTTP requests usually means faster page load times.

Replacing placeholder images with real images

Next, I used JavaScript's IntersectionObserver to replace the placeholder image with the actual image when it comes into the browser's viewport. I followed Jeremy Wagner's approach shared on Google Web Fundamentals Guide on lazy loading images — with some adjustments.

It starts with the following HTML markup:

The three relevant pieces are:

  1. The class="lazy" attribute, which is what you'll select the element with in JavaScript.
  2. The src attribute, which references the placeholder image that will appear when the page first loads. Instead of linking to placeholder.jpg I embed the image data using the data URL technique explained above.
  3. The data-src attribute, which contains the URL to the original image that will replace the placeholder when it comes in focus.

Next, we use JavaScript's IntersectionObserver to replace the placeholder images with the actual images:

document.addEventListener('DOMContentLoaded', function() { var lazyImages = [].slice.call(document.querySelectorAll('img.lazy')); if ('IntersectionObserver' in window) { let lazyImageObserver = new IntersectionObserver( function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { let lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; lazyImageObserver.unobserve(lazyImage); } }); }); lazyImages.forEach(function(lazyImage) { lazyImageObserver.observe(lazyImage); }); } else { // For browsers that don't support IntersectionObserver yet, // load all the images now: lazyImages.forEach(function(lazyImage) { lazyImage.src = lazyImage.dataset.src; }); } });

This JavaScript code queries the DOM for all elements with the lazy class. The IntersectionObserver is used to replace the placeholder image with the original image when the img.lazy elements enter the viewport. When IntersectionObserver is not supported, the images are replaced on the DOMContentLoaded event.

By default, the IntersectionObserver's callback is triggered the moment a single pixel of the image enters the browser's viewport. However, using the rootMargin property, you can trigger the image swap before the image enters the viewport. This reduces or eliminates the visual or perceived lag time when swapping a placeholder image for the actual image.

I implemented that on my site as follows:

const config = { // If the image gets within 250px of the browser's viewport, // start the download: rootMargin: '250px 0px', }; let lazyImageObserver = new IntersectionObserver(..., config); Lazy loading images drastically improves performance

After making these changes to my site, I did a new https://webpagetest.org benchmark run:

You can clearly see that the page became a lot faster to render:

  • The document is complete after 0.35 seconds (blue vertical line) instead of the original 7.275 seconds.
  • No images are loaded before the document is complete, compared to 13 images being loaded before.
  • After the document is complete, one image (purple horizontal bar) is downloaded. This is triggered by the JavaScript code as the result of one image being above the fold.

Lazy loading images improves web page performance by reducing the number of HTTP requests, and consequently reduces the amount of data that needs to be downloaded to render the initial page.

Is base64 encoding images bad for SEO?

Faster sites have a SEO advantage as page speed is a ranking factor for search engines. But, lazy loading might also be bad for SEO, as search engines have to be able to discover the original images.

To find out, I headed to Google Search Console. Google Search Console has a "URL inspection" feature that allows you to look at a webpage through the eyes of Googlebot.

I tested it out with my Acadia National Park blog post. As you can see in the screenshot, the first photo in the blog post was not loaded. Googlebot doesn't seem to support data URLs for images.

Is IntersectionObserver bad for SEO?

The fact that Googlebot doesn't appear to support data URLs does not have to be a problem. The real question is whether Googlebot will scroll the page, execute the JavaScript, replace the placeholders with the actual images, and index those. If it does, it doesn't matter that Googlebot doesn't understand data URLs.

To find out, I decided to conduct an experiment. Yesterday, I published a blog post about Matt Mullenweg and me visiting a museum together. The images in that blog post are lazy loaded and can only be discovered by Google if its crawler executes the JavaScript and scrolls the page. If those images show up in Google's index, we know there is no SEO impact.

I'm not sure how long it takes for Google to make new posts and images available in its index, but I'll keep an eye out for it.

If the images don't show up in Google's index, lazy loading might impact your SEO. My solution would be to selectively disable lazy loading for the most important images only. (Note: even if Google finds the images, there is no guarantee that it will decide to index them — short blog posts and images are often excluded from Google's index.)

Conclusions

Lazy loading images improves web page performance by reducing the number of HTTP requests to render a page.

Ideally, over time, more browsers will support lazy loading images natively, and some of the SEO challenges will no longer be an issue. Until then, it's not hard to implement good lazy loading yourself. For my own site, it took about 40 lines of JavaScript code and 20 lines of additional PHP/Drupal code.

I hope that by sharing my experience, more people are encouraged to run their own sites and to optimize their sites' performance.

Drupal Mountain Camp: Drupal Mountain Camp Program updates

1 dzień ago
Drupal Mountain Camp Program updates admin Wed, 02/20/2019 - 22:08

Hi everyone,

we are excited to share a few program updates on Drupal Mountain Camp as the team behind the scenes is working hard preparing the last bits before the conference in just 2 weeks.

We are extremely grateful for all the quality session submissions people have submitted. The full schedule over 4 days includes 9 workshops, 2 keynotes, 4 featured sessions and 42 regular sessions in 3 different tracks. 

Besides the already promoted keynotes, we would like to highlight the following featured sessions:

Thanks to the collaboration with the Drupal Recording Initiative by Kevin Thull, we'll be able to provide video recordings for you after the conference.

Contribution is a key topic for Drupal Mountain Camp. Make sure to sign-up for one of the 7 different initiatives or propose your own using our contribution sign-up sheet.

We also updated our social events page so you can start preparing for some fun in the snowy Swiss mountains.

So far, more than 95 tickets have been sold. Regular tickets are available for CHF 120 until 1st of March, afterwards we sell tickets for CHF 140.

We are looking forward seeing you at Drupal Mountain Camp in Davos, 7-10 of March 2019.

Josef / dasjo on behalf of the Drupal Mountain Camp team.

Jeff Geerling's Blog: How I upgrade Drupal 8 Sites with exported config and Composer

1 dzień 2 godziny ago

Over the years, as Drupal has evolved, the upgrade process has become a bit more involved; as with most web applications, Drupal's increasing complexity extends to deployment, and whether you end up running Drupal on a VPS, a bare metal server, in Docker containers, or in a Kubernetes cluster, you should formalize an update process to make sure upgrades are as close to non-events as possible.

Gone are the days (at least for most sites) where you could just download a 'tarball' (.tar.gz) from Drupal.org, expand it, then upload it via SFTP to a server and run Drupal's update.php. That workflow (and even a workflow like drush up of old) might still work for some sites, but it is fragile and prone to cause issues whether you notice them or not. Plus if you're using Drush to do this, it's no longer supported in modern versions of Drush!

So without further ado, here is the process I've settled on for all the Drupal 8 sites I currently manage (note that I've converted all my non-Composer Drupal codebases to Composer at this point):

Security advisories: Drupal core - Highly critical - Remote Code Execution - SA-CORE-2019-003

1 dzień 2 godziny ago
Project: Drupal coreDate: 2019-February-20Security risk: Highly critical 20∕25 AC:None/A:None/CI:All/II:All/E:Theoretical/TD:UncommonVulnerability: Remote Code ExecutionCVE IDs: CVE-2019-6340Description: 

Some field types do not properly sanitize data from non-form sources. This can lead to arbitrary PHP code execution in some cases.

A site is only affected by this if one of the following conditions is met:

  • The site has the Drupal 8 core RESTful Web Services (rest) module enabled and allows PATCH or POST requests, or
  • the site has another web services module enabled (like JSON:API in Drupal 8, or Services or RESTful Web Services in Drupal 7).
Solution: 

Versions of Drupal 8 prior to 8.5.x are end-of-life and do not receive security coverage.

To immediately mitigate the vulnerability, you can disable all web services modules, or configure your web server(s) to not allow PUT/PATCH/POST requests to web services resources. Note that web services resources may be available on multiple paths depending on the configuration of your server(s). For Drupal 7, resources are for example typically available via paths (clean URLs) and via arguments to the "q" query argument. For Drupal 8, paths may still function when prefixed with index.php/.

Reported By: Fixed By: 

Agiledrop.com Blog: Interview with Amber Matz: How will Drupal's greatest challenge shape its future?

1 dzień 11 godzin ago

This week we talked with Amber Matz, Production Manager and Trainer at Drupalize.me. In addition to these two important roles, Amber is actively involved in a number of projects in the Drupalverse, the current most notable one likely being the program team for the Builder Track at DrupalCon Seattle. Have a read if you’d like to find out more about her journey with Drupal and her insights on its future.

READ MORE

Sooper Drupal Themes: Sooperthemes Terms of Service and Pricing Update

1 dzień 12 godzin ago

With growth comes changes and today we're introducing changes to our legal terms and pricing. The basic susbcription remains the same at $78 USD per year and the Professional subscription was bumped from $249 to $360 USD per year. The Enterprise subscription now starts at $3000 with a $1000 USD set-up fee which is needed for the one-time job of collecting brand logos and brand names and setting up our scripts to produce the white-labeled/re-branded products automatically. The Enterprise subscription will now be charged per month rather than per year.

New terms of service: https://www.sooperthemes.com/legal/terms
Services catalog:  https://www.sooperthemes.com/legal/services-catalog

Drupal is becoming more valuable but more expensive

3 years after Drupal 8's release the results are in: Drupal is still relevant but Drupal 8 is more expensive to implement and Drupal's adoption curve has tapered off. I don't think this is necessarily bad. Drupal's leadership made a decision to make Drupal the best Enterprise-grade CMS, not the best everyman's CMS. The result is that Drupal's steep learning curve became steeper yet, and costs of training and hiring Drupal developers increased accordingly. Our price bump is not merely a reaction to a decrease in the volume of Drupal websites in need of our solutions, it is also part of our learning process. 

Sooperthemes is growing but it is not growing enough

Since our Drupal 8 launch last year business at Sooperthemes is better than ever. But with our growing popularity comes a big increase in workload from the customer support forum, customer success tasks, and managing simple tasks like account administration, taxes, sales questions. It adds up to a lot of work. Currently our prices are too low for the increase in customers to pay for new staff to take on the additional workload. We have been investing a lot of effort in training interns but the time has come to move to a more sustainable solution.

Without changes Sooperthemes is not ready for the future. This price increase in the Professional subscription is one part of our strategy for sustainable growth.

Another change is getting better at charging big clients more than small clients. We want to keep our products accessible to the entire Drupal community. While we love our enterprise clients. we don't want to develop an amazing product just for the Drupal elite who can afford hundreds or thousands of dollars per month per site. Therefore we're introducing new licensing terms to charge users based on the scale of their usage of our flagship product Glazed Builder.

We updated our terms for us to be able to charge websites fairly not just by the number of domain (site) licenses, but also by the number of users who are using our Glazed Builder product. Some examples to illustrate why I think this is fair.

  1. Freelance Music teacher's website with 1 domain license: $78 USD per year including updates and support.
  2. An Drupal agency with currently 10 clients on our products: $360 USD per year.
  3. A fast-moving consumer goods enterprise with 40 enterprise domain licenses: ~3000 USD per month.
  4. If Tesla.com would use our products for their marketing content, job portal, community forum, online stores, online tools, in 37 languages: $78 USD per year, or 6 dollars and 50 cents per month.

I think the last example illustrates why it makes sense to introduce this new lever to help Sooperthemes grow sustainably.  To learn how exactly our new licensing term works make sure to read our services catalog.  

Provide More Value To Enterprise Clients

In order for Sooperthemes to be successful in the future we will need to work on signing on more Enterprise clients. We're going to work on adding more features that are important to enterprise clients. Starting today we offer better support options and dedicated support developers to cases in the Enterprise tier. If you want to share ideas on what you think should differentiate the Enterprise subscription tier from the other tiers don't hesitate to send me an email here: https://www.sooperthemes.com/contact

I would be especially interested in hearing what it would take for your business to purchase an enterprise subscription.

Photo by Benjamin Voros on Unsplash

Dries Buytaert: Two internet entrepreneurs walk into an old publishing house

1 dzień 13 godzin ago

A month ago, Matt Mullenweg, co-founder of WordPress and founder of Automattic, visited me in Antwerp, Belgium. While I currently live in Boston, I was born and raised in Antwerp, and also started Drupal there.

We spent the morning together walking around Antwerp and visited the Plantin Moretus Museum.

The museum is the old house of Christophe Plantin, where he lived and worked around 1575. At the time, Plantin had the largest printing shop in the world, with 56 employees and 16 printing presses. These presses printed 1,250 sheets per day.

Today, the museum hosts the two oldest printing presses in the world. In addition, the museum has original lead types of fonts such as Garamond and hundreds of ancient manuscripts that tell the story of how writing evolved into the art of printing.

The old house, printing business, presses and lead types are the earliest witnesses of a landmark moment in history: the invention of printing, and by extension, the democratization of publishing, long before our digital age. It was nice to visit that together with Matt as a break from our day-to-day focus on web publishing.

OpenSense Labs: The Magic of Zurb Foundation

1 dzień 15 godzin ago
The Magic of Zurb Foundation Vasundhra Wed, 02/20/2019 - 11:40

You don’t want people to treat your website as an outcast. You don’t want to be the ugly duckling in this sharp, serious and extremely competitive world. 

Correct?

Thus, owning a professional looking website becomes an important platform for all sorts of business. It doesn’t really matter whether you are planning to make money or not, treating your website just like your employees is a must.

Why?

Well, because it creates an impression of your business, a place where people come to see who you are and what you want. Whether it is a big e-commerce site or a one-pager - a good website would always bring values to you and your company.  


As important as the website is for you, the themes contributes highly to the user experience and functionality of a particular site.

Your theme is the overall look, feel and styling of your website and the very first thing which the audience witnesses. And nothing can beat Drupal in this area.  

Beginning with the Zurb Foundation 

So here is Zurb foundation for you.

Zurb Foundation is the prototype theme that is used to prototype in the browser. It allows you to rapidly create a website or application while leveraging mobile and responsive technology that is well tested. 

The front end framework is the collection of HTML, CSS, and Javascript containing design patterns. These design patterns help the user in persevering time by helping them to dodge boring, boilerplate codes. The sites that are built on this foundation works great when there are multiple screens which include laptops, mobile phone, PC, iPad. The reason is that Zurb foundation has a responsive framework that uses CSS media queries and a mobile-first approach. 


Different versions of Zurb 
 


Zurb Foundation 3

If the primary goal for your website is rapid prototyping then Zurb foundation 3 is for you.  This theme is developed in Sass, which is a powerful CSS pre-processor that helps you to write, clean and organize CSS which can be maintained easily over time. 

One of the biggest advantages of using Zurb Foundation 3 was the shift of development of the framework to Sass and compass rather than pure CSS. 

Sass grants the user with variables, functions and powerful mixin that speeds up the development of framework as well as made the code more coincide. 


Zurb Foundation 4 

This version of Zurb foundation brought many new functionalities and changes in its framework. Started from being a mobile-friendly theme, Zurb foundation 4 supported some complex layouts, grids, and media queries. 

This version brought about flexible and powerful built-in tools with the advantage of it being accessible to different screen size (new, simpler syntax that better reflects how the grid works)

Apart from this, Zurb foundation 4 is all about semantics.  Users were granted with the power of removing and writing all the presentational classes from the markup with built-in sass mixins and extensions. 

Zurb Foundation 4 also presented the users with some splendid plugins that worked well with AJAX. 


Zurb Foundation 5

Fast, strong and a better foundation, Zurb foundation 5 is great for designers and developers that are using it in their workflow. The foundation specifically focused on smart coding that introduced the users with better coding practices. And if it is a team then this would give them an idea to start from a common point. The advantage: It helped them to put together all interactions and workflow in a shorter period of time. 

Zurb Foundation 6

Foundation of site 6 has been designed to give the users with production efficiency in their project. It includes a wide range of modular and flexible components that are not only lightweight but easy to maintain as well. 

Foundation 6 is also half the size of foundation 5, in other words, there was a reduction of 50 % code. All these codes have come with ARIA attributes and roles alongside instructions. 

The base style in foundation 6 act as a coded framework, which makes the work of the user even more easy and flexible. Simpler CSS styles allow the user to easily modify them and fit it according to their needs. 


Zurb Foundation or Bootstrap?

If talking about Zurb and its different version, bootstrap tends to make its way between all this. 

How?

Well, because Bootstrap and Zurb are the major participants when it comes to web designing methods.  Often designers and developers seem to get lost in the mist while battling and choosing between one. 

  Zurb Foundation Bootstrap Community The community here is smaller as compared to bootstrap but it is growing with decent technical support.  The community here is smaller as compared to bootstrap but it is growing with decent technical support.  CSS Preprocessor Foundation supports SASS Bootstrap also supports SASS but it is a less camp. Customization Minimalist approach to its pre-built UI components giving room to the designers to create new things. Bootstrap consist of basic GUI customizer which most of the time doesn’t allow the users to create something new.  Browser Support Supports Chrome, Mozilla Firefox, Safari, opera, android  Supports Chrome, Mozilla Firefox, Safari, opera, android, and IE8 Grid System Foundation was the first one to go mobile friendly and adapt to the grid system. Bootstrap has ample of time to bridge the gap in terms of features and functionalities.  Advanced Feature Elements Zurb foundation   of X-y grid, responsive tab, off-canvas etc It is customizable with a variety of designs. Releases Zurb has more releases w.r.t the development requirement. It has 6 releases and the 7th one is yet to come. Bootstrap has 4 release. The  4th  release was on August 19, 2011 Why choose Drupal for Zurb foundation?

When building a website what is the very first thing which the user sees?

Content? Functionalities? Information? Or Layout?

Selecting the theme and functionalities of a website is one of the most primary decisions that a website owner has to make and Drupal is the CMS that can help you achieve this task. It has about 1,316 themes where each theme has a variety of strengths

Out of which Zurb Foundation theme is grid-based, mobile first CSS. When used with Drupal, Zurb provides efficiency to the front end developer. It is a platform-specific method that helps you achieve various functionalities. 

  • The foundation XY grid (in timeless condition) allows the user to easily create and layout Drupal content.
  • The top bar of the foundation is combined with Drupal’s menu navigation and works well with submenus.
  • The off-campus region in the Zurb foundation are available as Drupal blocks and the menu bar that is placed in this region are automatically themed. 

Creating Sub Themes 

It is imperative that the user creates a sub-themes that allow Zurb foundation to apply on any website. 

There are two ways of creating a sub-theme:

Drush: Drush is basically a command line access to common Drupal administrative tasks and configuration. The user can change the directory with the help of Drush.  

Manually: The user can also create sub-themes manually. They can complete the task by expanding the theme folder and then replacing it with starter files. 

Contributed Drupal modules that can be used with Zurb The Zurb foundation aims to do theming without the help of any dependencies but there are many modules that help in theming better. 

Modules like panels, block class, display suite, special menu items. 

Panels: Panels module allow a site administrator to create customized layouts for one or more users. It provides an API that allows the configuration and placement of
blocks into regions. 

Block Class: Block class allows the user to add classes to any block through the block’s configuration interface. 

Display Suite: Display suite allows the users to take control over content fully using drag and drop interface. 

Menu Items: This module allows the user to create dropdown divider and all sort of headers in the navigation menu. 

Case Study on MIT Press CogNet 

MIT Press CogNet is an essential online resource for all the students and scholars that are into cognitive sciences. 

The objective of this project was to provide a completely responsive design in all devices for the users. An organization worked closely with the CogNet team. With the CogNet team, they developed a basic wireframe. custom Drupal theme based on the zurb foundation was built.

Zurb foundation theme and sass for CSS preprocessing were used to rework the already existing theme. To guarantee a seamless experience on any type of screen the developers used jQuery to construct slick navigation, scrolling, and content exploration. 

The results were eye-catching. From being a desktop-only website, MIT Press CogNet was modified into an accessible one where the users were able to view it in any device. The biggest achievement of the whole procedure was that it was done under the budget provided by the organization.  

Future of Zurb Foundation

Zurb is yet to launch another version of the architecture (ITCSS+SMACSS). 

Zurb Foundation 7 separates the view layer from the logic layer to make it easy and reliable. 

It would dramatically improve your freedom to shift between JavaScript frameworks with a super-powerful pluggable JavaScript architecture. In short, there are two major changes that would take place in Zurb Foundation 7 

The first one as mentioned would dramatically let user shift between javascript frameworks with javascript architecture. UI framework today tends to either go in one framework or have different and independent ports for different JS framework.

And yes, the second major change in the foundation is the ITCSS based architecture with the usage of SMACSS. This would make it easier to build and maintain scalable sites and themes. 

Conclusion 

Remember that themes are connected to the protagonist's internal journey. It is not just the visuals but it is also the journey of the user experience that they would have while going through your website.

At OpenSense labs, we understand how important it is to create a website that matches your goals and objectives. Ping us at hello@opensenselabs.com so that we can arrange services to make your website what you have always hoped for. 

blog banner blog image Drupal Drupal 8 Zurb Foundation Drupal theme Bootstrap Blog Type Articles Is it a good read ? On

Acro Media: Drupal 8 Commerce Performance Benchmarks

2 dni 5 godzin ago
Performance and scale for all levels of digital commerce


Drupal Commerce is a fantastic open source ecommerce platform, but there is a common misconception that it is lacking when it comes to performance and scalability. This is not true! Drupal Commerce is extremely fast and is more than capable of scaling from small business all the way to enterprise level ecommerce. We have proof and it’s right here for you to view.

About the report

Shawn McCabe, Acro Media’s CTO, put Drupal Commerce to the test to see how it performed on a number of different AWS configurations, ranging from single server setups all the way up to multi-server configurations.

He ran simulated traffic through Drupal Commerce, mimicking actual traffic as close as possible, testing concurrent users, site speed, transactions per second, and a number of other useful technical metrics.

The smallest server configuration tested was capable of handling 130 concurrent users flawlessly, with a throughput of 13.59 transactions per second. On the other hand, the largest configuration could handle 52,000 concurrent users with a throughput of 1,305.85 transactions per second.

The report goes further and includes how the tests were set up, their limitations and methodology, all of the server configurations details and, of course, the test results. This testing puts the performance and scalability question to rest, backed by hard data that anyone can reproduce. Drupal Commerce is a viable option for ecommerce that businesses of any size can use and grow with in the future.

Security public service announcements: Critical Release - PSA-2019-02-19

2 dni 7 godzin ago
Date: 2019-February-19Security risk: Highly critical 20∕25 AC:None/A:None/CI:All/II:All/E:Theoretical/TD:UncommonVulnerability: Critical ReleaseDescription: 

There will be a security release of 8.5.x and 8.6.x on February 20th 2019 between 1PM to 5PM America/New York (1800 to 2200 UTC). (To see this in your local timezone, refer to the Drupal Core Calendar) . The risk on this is currently rated at 20/25 (Highly critical) AC:None/A:None/CI:All/II:All/E:Theoretical/TD:Uncommon.

Not all configurations are affected. Reserve time on February 20 during the release window to determine whether your sites are affected and in need of an immediate update. Mitigation information will be included in the advisory.

Contributed module security updates may also be required.

If you are running Drupal 7, no core update is required, but you may need to update contributed modules if you are using an affected module. We are unable to provide the list of those modules at this time.

Neither the Security Team nor any other party is able to release any more information about this vulnerability until the announcement is made. The announcement will be made public at https://www.drupal.org/security, over Twitter, and in email for those who have subscribed to our email list. To subscribe to the email list: log in on Drupal.org, go to your user profile page and subscribe to the security newsletter on the Edit » My newsletters tab.

Security release announcements will appear on the Drupal.org security advisory page.

ComputerMinds.co.uk: How to import config without losing changes

2 dni 10 godzin ago

Drupal empowers site builders and editors to configure their sites in settings forms. Configuration management lets developers push changes up to live sites to be imported. But developers have to be considerate to ensure imports will not wipe out those changes made directly through the live sites' settings forms. At the least, they have to export the changes before making further tweaks. But admins may make further changes in the meantime too, so developers can end up frequently pulling irrelevant changes back from live, which seems unnecessary.

Here's some examples of the kind of config that I'm thinking of:

  • The site email and Google Analytics account are usually managed by site admins, not developers. So developers should not be the ones to manage those settings.
  • Marketers may like tweaking the site name or slogan. That doesn't need to affect developers.
  • Contact forms contain labels and other text which may be key to the communication between a client and their customers.
  • Permissions - sometimes it's not clear where the lines are between editors/admins/etc, so why not allow some flexibility to reassign permissions directly on live without needing to touch the codebase?

We need an approach that allows for specific settings to be considered 'unmanaged' - so an import wouldn't touch whatever they have made to be on live. The Config Ignore project claims to solve this, but we already use Config split which is more powerful, more flexible and has a better user interface. (Although Config Ignore does allow targeting parts of config rather than whole config items.)

Config split is often used to create environment-specific sets of configuration, but its design means it can be used for separating config for other purposes. In this scenario, what's needed is a split that represents settings to be protected, which can be exported immediately before any import. Then when importing, Drupal only sees the preserved version of the settings, so won't change them, regardless of what is in the main configuration files.

The split, which I've called 'Unmanaged', needs to be set up like as follows (see screenshot):

  • Use a folder (directory) which already exists and is writable. I use ../config/unmanaged, so it matches the split name and is outside the webroot.
  • Set to active. I usually set all other splits to inactive, and only make them active in an environment's settings.php, but this split exists for the sake of workflow, not environment. For example, it can actually be useful locally, so I can tweak things for development without affecting what ends up in version control.
  • Have the largest weight of any split, so that it overrides any other exported version of config it contains.
  • Use the Conditional split section, not Complete split, to pick configuration to protect.
  • Do not tick either of the checkboxes in the conditional split section.

Once the split has been created, the container needs rebuilding for it to work. Run this, which includes exporting it for the first time:

drush cache-rebuild drush -y config-split-export unmanaged

Now that it is exported, a .htaccess file will be have been added to the directory alongside the config. Add the following line to your project's .gitignore file, adjusting the directory location as appropriate. This ensures the directory will get created on live when changes are pulled from git (containing .htaccess), but deliberately without the exported config:

config/unmanaged/*.yml

So now before running any imports, make sure to export the split:

drush -y config-split-export unmanaged drush -y config-import

With this split and the export step in place in your workflow, you can be confident of allowing your developers and site admins to get on with their respective work, without getting in each others' way. This puts configuration splits to use for something beyond environment-specific overrides, which I think is exciting. I wonder what other useful purposes they may have?

 

Photo by Sascha Hormel from Pexels

OSTraining: PHP Notices, Warnings and Errors on Your Drupal Site

2 dni 16 godzin ago

Websites will run into problems. Whether you're using Drupal or any other software, there will be problems at some point.

Drupal runs on PHP and when PHP has problems, it reports them to you. 

However, often these errors will appear on your site and will be visible to visitors, as in the image below:

Agaric Collective: Build and Manage Online Donations in Drupal with the Give Module

3 dni 3 godziny ago

So often an organization's online donation system is divorced from their website. For staff, it means one more tool to use and manage. For supporters, it can result in a donation experience that is tedious or clunky. There are free software tools like CiviCRM and CommitChange which do a good job of feeling integrated into your site, despite being a separate system. However, for smaller groups these tools can be overkill. We built the Give module to provide a lightweight donation solution built right into your Drupal site.

 

Read more and discuss at agaric.coop.

Kristian Polso: Launching Pino: a Drupal 8 Distribution for Member Management

3 dni 5 godzin ago
Last week I published Pino: a Member Management web app built as a custom Drupal 8 distribution. With Pino, you can manage members and their metadata, send email notifications to the members and more. I have been thinking about this doing this project for some time now. I am personally a board member in several associations, and I have seen several different member management solutions. Most common of them all, is honestly just Excel.

Craft of Coding: Drupal on OpenShift: Enhancing the developer experience

3 dni 6 godzin ago

Learn how to automate all the pieces once you deploy your first Drupal 8 site on OpenShift. We walked through a detailed Drupal 8 deployment on OpenShift. We just scratched the surface of OpenShift and didn’t explore all its features. In this post, we will further this setup by enhancing the developer experience in using OpenShift. […]

The post Drupal on OpenShift: Enhancing the developer experience appeared first on Craft of Coding.

Spinning Code: SC DUG February 2019

3 dni 9 godzin ago

For the SC DUG meeting this month Will Jackson from Kanopi Studios gave a talk about using Docksal for local Drupal development. Will has the joy of working with some of the Docksal developers and has become an advocate for the simplicity and power Docksal provides.

We frequently use these presentations to practice new presentations, try out heavily revised versions, and test out new ideas with a friendly audience. If you want to see a polished version checkout our group members’ talks at camps and cons. So if some of the content of these videos seems a bit rough please understand we are all learning all the time and we are open to constructive feedback.

If you would like to join us please check out our up coming events on Meetup for meeting times, locations, and connection information.

OpenSense Labs: Going ultra-minimalist: Metalsmith with Drupal

4 dni 5 godzin ago
Going ultra-minimalist: Metalsmith with Drupal Shankar Sun, 02/17/2019 - 22:22

A metalsmith sees potential where others might see trash. In his vision, a plastic bag can become a ring, the zipper can turn into a bracelet and brass platters can be metamorphosed into a striking hollow vessel. In the digital spectrum, there’s another Metalsmith which can shape a great web presence for your organisation with its amazing web development capabilities.


A combination of Metalsmith and Drupal even more fruitful with Drupal’s spectacular backend that can be used to feed data to all sorts of clients and Metalsmith’s exceptional capabilities as a static site generator.

Forging an understanding Source: Werner Glinka | Twin Cities Drupal Camp 2018

Metalsmith is not aimed at particular project types such as blogs. It supports a wide array of templates and data format options. It offers a simple plug-in architecture and is easy to get started. It uses a modular structure. Its lightweight nature and fewer dependencies make its a magnificent solution.

Metalsmith is an extremely simple, pluggable static site generator - Metalsmith.io

Static site generators create HTML code locally on the developer’s computer and all the required components are stored in a well-structured directory characterised by the strict separation of layout and content. That means a static site generator produces static build files for their deployment to a web server wherein the files are developed from source files. This is exactly the reasoning on which Metalsmith was built. Metalsmith is more than just a static site generator as everything is a plugin and Metalsmith core is an abstraction for manipulation of the file directory. It can be used for building a plethora of use cases like a project scaffolder, or an ebook generator, or even the technical docs.
 
Its working principle is simple. It takes the information from the source files of a source directory and it, then, writes the manipulated information to the files into a destination directory. The manipulations can be the translation of templates, replacement of variables, grouping files, moving files among others.
 
All the manipulations are done by plugins. Only thing Metalsmith has to take care of in its core is to offer an underlying logic of how the manipulations are confronted with and for a defined interface for the plugins. Moreover, source files are, in the nascent stage itself, converted into JavaScript objects so that plugins only do the modifications to the JavaScript objects. Moreover, Metalsmith is divided into a core and several plugins that minimises the intricacy by giving the user complete authority to use only those plugins that are needed and disseminating the task of maintaining the Metalsmith core to the Metalsmith community. Being programmed in Javascript, the need for another language like Python or Ruby is eliminated and it also has a simple plugin-interface thereby offering a simple workflow.

Metalsmith with Drupal

Twin Cities Drupal Camp 2018 had a session that demonstrated how a headless Drupal 8 installation serves content to a local Metalsmith-based static website build process. Drupal 8 turned out to be a fantastic backend CMS for serving data to all kinds of clients. Here, simply put, the local environment is the Metalsmith process uploading anything onto the Github. Once uploaded, Netlify loads it into its own process and publishes it.

Source: Werner Glinka | Twin Cities Drupal Camp 2018

Server data are leveraged for building pages dynamically at build time with the assistance of Metalsmith as the static site generator and the Nunjucks template engine. As a result, the merits of a static website as well as the magnificent backend data governance of Drupal is obtained. Drupal is only utilised for governing content in the backend and is then used to serve the content to the build process through an API.

Conclusion

Metalsmith, along with Drupal's great prowess in content governance, can be a great solution for building static sites.
 
We believe in empowering the digital firms and making their digital transformation dreams come true with our suite of services.
 
Let us know how do you want us to help you build an astounding web presence at hello@opensenselabs.com

blog banner blog image Metalsmith Drupal 8 Headless Drupal Decoupled Drupal Blog Type Articles Is it a good read ? On

Vardot: How to Rank #1 on Google Using Drupal CMS

4 dni 9 godzin ago
Firas Ghunaim February 17, 2019

"Content is king! SEO is so 2017." Sure, why not.

Where is that king's throne? Where do you find content?

Content is found on web and mobile pages across the internet, amongst millions of millions of pages. Search Engine Optimization is about the process of being found by your content consumers and readers.

What Search Engine Optimization is not is that it's all about keywords; a common and prevalent misconception. You still need to create content that is of relevance to someone searching for it.

and of course, follow Google's rules and learn their ranking factors.

Basic stuff really.

"SEO? Gotta follow the Google machine's rules bro"

 

A critical consideration that usually escapes the decision-making process of what to use to publish that content: Which CMS suits my needs the most? 

A CMS (Content Management System) is the beating heart of your digital platform, website or experience. It is where you develop, manage and publish your content. Most websites look like Ferraris' but drive like an Austin Allegro.

Long story short, the CMS you built your site on will play a key role in your SEO efforts.

 

4 Ways Drupal CMS Enhances Your SEO

I am not here to shamelessly promote Drupal CMS (I really am though), but if you are looking to create the best digital experience for your users without bothering about on-site SEO then look no further than Drupal.

At its core, Drupal was built with SEO in mind. It has the power, flexibility, and tools needed to optimize every facet of your website for search engines, and in its huge kit of modules, there are quite a few that are dedicated to giving you an easier time when it comes to improving the optimization of your website. 

 

1. Implementing Meta tags

 

Meta tags are bits of text that are integral when it comes to improving your website’s search ranking, because, in a way, it tells search engines what the content is on each page on your website. This could be the titles of your pages to the little descriptions you see underneath the website links on a Google results page. You and your search engine need these bits of information to properly present and index your site on the search results page.

Usually, you can leave it up to your search engine to generate your page’s metadata for you, but by using the Drupal Metatag module, you can customize the metadata yourself. Set your own information such as page titles and descriptions to more properly and correctly present your site to your search engine and the online world.

 

Read More: 6 Reliable SEO Tools To Make Your Life Easier   2. Cleaning up Your URLs

 

Having bad, messy-looking links is a no-no when it comes to SEO. You want links that are easy to read and not just a jumble of letters and numbers so that they look more attractive to prospective visitors and to your search engine, who may be looking at your URL for keywords when it determines your site’s ranking.

Many web developers never realize the implications of messy URLs and leave their link syntax as-is, but going through each and every page on your website and manually setting the URLs isn’t an attractive option either. Luckily, Drupal generates clean URLs by default, improving the readability of your links and making things a bit easier on you.

If you want your links to be better and even more easy on the eyes, popular Drupal module Pathauto is a configurable system that automatically creates clean and extremely readable links that are perfect for your site’s optimization.

Another thing to keep in mind is making sure that your links actually go somewhere. Nothing sours the user experience more than clicking a link and being presented with a 404 page, and this in turn negatively affects your search rankings.

You can avoid this from happening by using the Redirect module. If you happened to have changed the page’s URL after Google indexed it, or moved the content to a different URL, this module allows you to make 301 redirects from that old link to the new one, quickly and painlessly, without having to go through the headache of cleaning up after yourself and fixing broken links.

 

3. Improving Page Speed

 

Google has been using the speed your page loads as an influencing factor in search rankings for years at this point. As they point out, sites that load faster have users that stay on for much longer, so it’s not only Google that you’re pleased by speeding up your website.

You might have to spend a little to have your website up to speed, but Drupal comes with several measures to help pages load faster, such as using BigPipe.

However, it’s not only desktop users you have to keep in mind, but mobile users, too. Given the leaps and bounds that technology has undergone in the last couple of years, you now find more and more people browsing the web on their smartphones and tablets. It’s important to make sure that your site experience is just as friendly and accessible on mobile devices as it is on desktop computers. As anyone who has used a desktop site on a mobile device knows, it’s not a pleasant experience.

Drupal’s default theme is responsive by design, which means it will display well on mobile screens of any size without having to do complicated rewrites of code or having to juggle multiple URLs to make sure your site displays correctly. With Google now also looking at the page speed of mobile sites, it’s now more important than ever to focus on delivering a good, well-optimized mobile experience to improve your SEO.

 

Read more: SEO Checklist Before Launching Your Drupal Website

 

4. Talking to Your Search Engine

 

Optimizing your website can be a little tough when you don’t even know basic things such as where your site traffic is coming from. Installing modules like Google Analytics makes you privy to such information, and for someone with their finger on the pulse of the site’s SEO, it’s perhaps one of the most important tools they can have.

With Google Analytics, you get to know things about your site visitors: Where in the world they come from, which links they followed to get to your site, which pages they visit and how much time they spend on those pages, what keywords they searched to find your page and more. If you’re concerned about SEO, then getting information about your website directly from Google, the most popular search engine in the world is valuable information to have, and can help you make decisions on what to improve on next.

And while you’re pulling information from Google about your website, you can also provide information about your website to Google in the form of an XML sitemap. These are specially formatted, condensed summaries of the pages of content on your website that you can submit to Google to help them find your site and let their bots crawl through your pages. Google can crawl through your site without an XML sitemap, but you take on the risk of them possibly missing pages.

With Drupal, generating an XML sitemap is as easy as installing the XML sitemap module which creates one for you, and modules like Cron can automatically make sure your sitemap is kept up-to-date with the latest information from your website.

Read More: Top 5 Drupal Modules For Marketers

Drupal is inherently optimized for search engines after all the whole idea behind Drupal was to enable the creation of digital experiences that are user-centric. That user includes the development team who are always aided by the open-source community of experts that provide us with awesome SEO tools such as the SEO Checklist.

You see, friend... SEO is not dead. Content's prominence just made SEO eternal.

Want to boost your site’s traffic and rank #1 on Google with Drupal? Message us through our Contact Us page, or via email at sales@vardot.com.

Aten Design Group: Flexible Authoring with Structured Content

6 dni 8 godzin ago

As a writer or editor for your organization’s website, you should be able to quickly write articles or build pages that are collections of smaller elements. You should be able to write some text, add a slideshow, write some more text, perhaps list a few tweets, and finish things off with a list of related content. Or maybe you paste in a pull quote, add a couple full-width images with captions, or even put together an interactive timeline. Your content management system should let you do all that, easily. But chances are, it won’t be with the WYSIWYG you’re used to right now.

What You See Isn’t What You Get

WYSIWYG editors still fall short when it comes to doing much more than simple formatting and embedding a few images. Anything beyond that, and the underlying technology has to leverage some kind of proprietary “smart code” or “token” and do some find-and-replace magic that makes slideshows, media players, or other more complex blocks of content show up right to the editor. These tokens aren’t typically based on any adopted standard. It’s just this custom, arbitrary formatting shortcut that programmers decided to use that tells the CMS, “Replace this snippet with that other piece of content.”

If it sounds complicated, that’s because it is. It’s hard to get right. It’s hard to build in a sustainable way. It’s hard – impossible, really – to make it look right and work well for authors. It’s REALLY hard to migrate.

Here’s an example: In earlier versions of Drupal, Node Embed was a way to embed one piece of content (say, an image) inside the body of another (like an article). The “smart code” [[nid: 123]] tells Drupal, “replace this with the piece of content that has an ID of 123.” It worked, but the authoring experience was janky. And it really wasn’t structured content, since your markup would end up littered with these proprietary snippets referencing objects in the CMS. Somewhere down the line, someone would inevitably have to migrate all of that and write regular expressions and processors to parse it back into a sane structure for the new system. That gets expensive.

Fieldable Entities and Structured Content

The thing that lets you, the web editor, write content that is both manageable and flexible is breaking your content into discrete, single-purpose fields. In Drupal it’s called “fieldable entities.” You don’t dump everything into the WYSIWYG (which would be hard to do anyway). Instead, there’s a field to add the author’s name, a field for attaching images, and a field for the text (that last part gets the WYSIWYG). More generally, this serves an important concept called “structured content.” Content is stored in sensible chunks. It adapts to a variety of contexts, like a mobile app or a news aggregator or (of course) your website. In the case of your website, your CMS pushes all those fields through a template, and voila, the page is published beautifully and your readers eat it up.

What If My Fields Have Fields?

Here’s where it gets interesting. Back to our earlier example: let’s say your article has a couple slideshows. Each slideshow has a few images, captions, and links. Suddenly your discrete, single-purpose field (slideshow) has its own fields (images, captions, links). And, you may want to add a slideshow virtually anywhere in the flow of the page. Perhaps the page goes text, slideshow, text. Or maybe it’s text, slideshow, text, some tweets, another slideshow. And now you want to swap some things around. Again, you should be able to do all that, easily.

Drupal Paragraphs

Enter the Drupal Paragraphs module. Paragraphs takes the approach of creating content bundles, or collections of fields, that can be mixed and matched on a given page in virtually countless configurations. They’re called “Paragraphs” because they are flexible, structured building blocks for pages. The name is a little misleading; in fact, they are 100% configurable groups of fields that can be added, edited, and rearranged however you want on a given article. You can have paragraph types for slideshows, pull quotes, tweets, lists of related content, or virtually anything else. Paragraphs are building blocks: smaller elements that can be combined to build a page. And like I said earlier, you should be able to easily make pages from collections of smaller elements.

Drupal Paragraphs is Sort of Easy

We use Drupal Paragraphs whenever a particular type of content (a news article, blog post, etc.) is really built up of smaller, interchangeable collections of other fields (text, slideshows, videos, etc.). Drupal Paragraphs are flexible and organized. They let authors create whatever kinds of pages they want, while storing content in a way that is structured and adaptable. Migrations with Paragraphs are generally easier than migrations with special, proprietary embed codes. Breaking content types into Paragraphs gives authors the flexibility they need, without sacrificing structure. You don’t end up with a bunch of garbage pasted into an open WYSIWYG field.

So what’s the catch? Well, the interface isn’t awesome. Using Drupal Paragraphs can add a lot of complexity to the authoring experience. Forms will have nested forms. It can be overwhelming.

Alternatives to Drupal Paragraphs

As I’m writing this, another approach to page building is gathering momentum in the Drupal universe. Layout Builder is currently an experimental module in core, and slated to ship as a stable release with Drupal 8.7. Layout Builder provides a slick drag-and-drop interface for editors to build pages from blocks and fields. We’re excited to see how Layout Builder develops, and to see how well it performs for large editorial websites. For websites with hundreds or thousands of articles, managing pages with Layout Builder may be difficult. As Drupal’s founder, Dries Buytaert, pointed out in a post late last year, “On large sites, the free-form page creation is almost certainly going to be a scalability, maintenance and governance challenge.”

Other open source CMS communities are seeing a similar rise in the demand to provide authors with flexible page-building tools. WordPress released Gutenberg, a powerful drag-and-drop editing experience that lets authors quickly build incredibly flexible pages from a massive library of components. It’s worth noting Gutenberg is not without challenges. It poses accessibility issues. Antithetical to the themes in this post, it does not necessarily produce structured content. It relies on proprietary tokens for referencing embedded blocks of content. But it is very flexible, and offers an expressive interface for authors. For Drupal users, there’s a Drupal port for Gutenberg.

For us at Aten, the balance comes back to making sure content is stored in a way that is structured, can be adaptive, is reusable, and is relatively easy to migrate. And that you, the writer, can easily build flexible web pages.

Structured and Adaptable: Drupal Paragraphs with Layout Control

We’ve been working on an approach that keeps Paragraphs in place as the primary way content is managed and stored, but also gives authors the ability to easily control layout. Using Drupal’s core Layout Discovery system, Entity Reference with Layout is a custom field type that combines layouts and Paragraphs. It’s still in very early experimental development, but we’re excited about the impact this approach might have on making it even easier to create flexible pages. And it uses Paragraphs for content storage, with the benefits we’ve already touched on: content is well-structured and relatively easy to migrate. It’s not as flexible or robust as Layout Builder, but might be a great option for authoring flexible pages with Paragraphs. (More on this in a future post.)

Reusable and Flexible: Advanced Paragraphs

Since Drupal Paragraphs are themselves collections of flexible fields, there are all kinds of interesting ways they can be applied to building complex publishing features. We’re working with a client in publishing who needs the ability to completely customize the way content appears on their home page. They would like to promote existing content to the homepage, but they may want to override article titles, images, and summaries. Since the article authors aren’t the same people editing the home page and other key listing pages, they didn’t want authors to have to think about all of those variations. The way content is presented on an article page isn’t always the best-suited for the homepage and other contexts. We used paragraphs to give home page editors the ability to drop articles onto the page, with fields for overriding everything they need to.

Where to Go From Here

Your CMS should make it easy to write content and build pages. If you’re interested in seeing a demo of Drupal Paragraphs, Layout Builder, or Gutenberg, drop us a line. We’d love to help.

Sprawdzone
1 godzina 50 minutes ago
Drupal.org - aggregated feeds in category Planet Drupal