Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough

Does Your Drupal Site Pass the 2-3 Second Test?

At Isovera, we like to build websites that people like to use. One of the best ways to enhance a user's experience is to give them what they are looking for fast! Site performance is often overlooked or relegated to the end of a project; but, it could be the most important factor in the success of your project.

While we would like to make every page we build load as fast as possible, sometimes you have to make compromises — whether for design, features or budget. That said, in most cases there is really no excuse to have a page that takes more than a few seconds to load on a fast connection. Pages that take more than two or three seconds to load fail to meet users' expectations and lose visitors.

Testing your site

Just loading the page to see if your site seems slow might be a good place to start. Most often, though, I want a little more data; and, in that case there are a few tools that I like to use when assessing the speed of a site:

I like http://www.webpagetest.org/ because it gives you a visual timeline of the page load. Often, you don’t have to wait for the entire page to load in order to start using it, so seeing when the page looks right can be very helpful.

Google’s PageSpeed Insights is another nice tool that gives you a clear sense of how well your site is doing using its PageSpeed Score, and also lists actionable steps you can take to improve things.

Performance budget

The average size of the top 1000 websites has increased from 1.2MB to 2.1MB during the past three years. While some may argue that a 2MB webpage is far too big, if you are just starting to think about performance as a goal for your web projects, then it's probably a good guideline to start with.

Using the Isovera website as an example, the home page is about 2.8MB and loads the visible part of the page in about two seconds. While there is always room for improvement, we are not doing too bad. One thing to note, though, is that these numbers are all based on a very fast broadband connection. If you want users to have a fast experience on their phones, with a decent 3G connection for example, then optimizing your site becomes even more important.

Chrome has a nice feature in its developer tools that not only lets you view your site at different device screen sizes but also simulates different mobile network speeds. While this is only a simulation, and other factors may impact page load times (that's why Isovera has a device lab), it provides a good starting place if you want to see what mobile users' experience might be like.

So what should you do?

While tools like these are a good start, it is important to incorporate the underlying best practices that make a site performant from the beginning. In some cases you might be able to just change a setting or tweak some code; but, in other cases there are more fundamental underlying architectural decisions that need to be made.

For example, using web fonts has become commonplace but often designers don’t realize how much of a performance impact this can have if you are not careful. Each different font style variation (bold, italic, etc.) requires an additional file to be loaded, so it is important to work with the designer to limit the number of different fonts and styles required for the site.

The list of performance issues that need to be considered is far too long to go into here. You need developers who think about performance issues all day long to be a part of the website design and development process — from beginning to end — if you want your site to delight your users. The basic idea here is to keep an eye on your page load times. Everyone on the team should be keeping performance in mind; and, it should be a part of your testing process. In the best case scenario this is integrated into your automated testing or continuous integration process.

Author: 
Original Post: 

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