Home / Blog / What a digital marketer needs to know about website performance

What a digital marketer needs to know about website performance

Website performance is one of those things that keeps me up at night. How do we improve our performance? When is our performance bad? Does it affect our user experience? These are all questions that run through my head in regards to our website, and I’m here to help you get answers for your site. Performance discussions can get very technical very fast, so my goal in this post is to maintain a balance between high level and informative so you can go to your dev team and ask the right questions.

Do you know what cache is?
Caching is a way to store small amounts of data so that the next time it is needed, it can be served quickly. For web pages, this means that the first time the page loads it will take longer, but every load after that will be faster because the data can be grabbed from the cache. When editing and managing a website, we ask our developers to “clear the cache” during development so our changes can be seen quickly. Since the cache stores a copy of your page, you may not see your changes immediately, and instead you’ll see the cached version. However, the caches will clear themselves after a set period of time.

Caching helps ensure your pages load quickly for all users. If you don’t use cached pages, you could be sacrificing higher website performance.

Different types of cache
For websites, you will typically encounter 4 types of cache: Server Cache, Browser Cache, Page Cache and Page Element Cache.

  • Server Cache: This is when your site is cached closest to its original location on your server. If a version of your site can’t be retrieved from your page cache or browser cache, it will then look to server cache before going back to its original location. We use Varnish Cache for our server level caching. Varnish is known as a best practice for Drupal sites, and your developers can set this up and also clear it if needed.
  • Browser Cache: Your browsers will store versions of your web pages by default, so when a user hits the back button the page loads faster. As site managers, we need to be aware of this on our sites. For example, if you’ve made changes to your site and they are not appearing, consider clearing your browser cache as well.
  • Page Cache: This is a more targeted approach to caching and is best done on pages where the displayed content is the same for all users
  • Page element cache: Page element caching is another way to refer to the block caching used in Drupal. Blocks are smaller chunks of content that can be reused throughout your website. Since these can be added to pages dynamically, they require a different type of caching in order to speed up delivery time longer term.

Image size and compression:
Another important piece to web site performance is understanding image size and compression. I wrote a blog post on this topic a few weeks back that could be helpful if you need a refresher. To ensure that load time is faster for your user, all images used on your website should be compressed to the smallest size possible.

It is also important to load regularly used images through your CSS files ahead of time.
As a digital marketer, knowing how to compress images on your site isn’t necessary, but understanding why it is crucial to performance and making sure your dev team can execute is important.

Javascript:
As marketers we tend to use lots of services that make our jobs easier. A lot of these services require you to add a snippet of code to your website. A single snippet doesn’t do much to affect your performance, but as time goes on, adding many snippets will cause big issues with load times. You might have your analytics tracking snippet, your ad tracking snippet, your personalization software snippet, your heat mapping snippet, and the list goes on. I haven’t found a magical solution for alleviating this code snippet drag yet but understanding the impact that each one adds is important. You need to weigh each new service carefully and understand the hit your site performance will take. Don’t trust the vendor, and ask your developers opinion on how it will effect your site. Vendors will typically tell you their service won't affect anything, it will load asynchronously, and that it all will be fine. This isn’t always the case, so make a habit of asking your dev team before adding any additional scripts to your production site.

Performance is very important, and you can dig even deeper than I’ve done here today. I’ve reviewed some key high level things you need to know, but if you're interested in digging into more of the backend details, check out these assets and resources:

Comments

Posted on by Pablo Madrid (not verified).

Thanks for the info, for Drupal for all static pages we have boost, but if you put SSL in your Drupal site like https://w ebtematica.com/los-mejores-modulos-de-drupal you have a problem, ¿which could be the best solution, for Drupal Speed and SSL pages?

Posted on by Dave Myburgh.

You can look at using Authcache (https://www.drupal.org /project/authcache) for https. Along with core Drupal caching it might solve the problem. Other options on the server side would be things like Memcache, or Varnish with SSL support. One final option would be a CDN like Cloudflare.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.