Speed Optimization

Optimizing your website for a high-quality user experience is essential for success.

Many factors affect your site’s loading time, including server hardware, operating system, web server software, configuration, and more. This comprehensive guide provides a solid overview of why website loading speed is important and the factors involved.

If you need a simple goal, Google recommends that your site load in under 3 seconds. Their Core Web Vitals are a series of metrics that measure the user experience and provide feedback on areas requiring improvement.

Note: The content provided on this page is a reference to help you get the most out of Mega Menu. The scope of support included with Mega Menu does not cover server configuration, general Concrete CMS configuration, and theme design.

The Structure of Mega Menu

With the release of Version 3.0, Mega Menu features advanced intelligent caching to significantly reduce page loading time – by up to 70%! It is optimized to take advantage of caching that occurs at the web server level, Content Management System (Concrete CMS), Content Delivery Network (CDN) (if you use one), and web browser.

To better understand how this works, let’s take a closer look at the components that make up Mega Menu:

• Dynamic HTML - generated by the Mega Menu block based on the Sitemap.
• Static CSS files - the base styling, modern skin, etc.
• Static JavaScript files - for standard functionality such as generating drop-downs.
• Dynamic CSS file - for customized styling based on options selected in the Mega Menu block.
• Dynamic JavaScript file - for customized functionality and content based on the Mega Menu block and relevant Stacks.

From this point, the content on this page will become more technical. However, it is still recommended that non-technical users read and understand as much as possible in order to make educated decisions about building and maintaining their websites. Complicated jargon is deliberately avoided to ensure this guide is as accessible as possible.

Compression

Most core CSS and JavaScript file sizes have been reduced using minification. This process strips unnecessary spacing and characters from the files, which are still readable by web browsers, to save up to 50%. Smaller files are quicker to transfer from the web server to the visitor, reducing page load times.

Caching Features

External Files

Modern web browsers and CDNs cache external CSS and JavaScript (JS) files more effectively than inline code - especially on repeat visits to a website. For example, browsing to a second page on the same website will result in the web browser “remembering” what it downloaded on the previous page, and using that again. In addition, modern web browsers download multiple external files concurrently while rendering a web page to reduce page loading time. Mega Menu 3.0 moved all dynamic CSS/JS code into external files to decrease the HTML footprint, increase speed, and improve your website’s SEO friendliness.

Due to Concrete CMS's flexible nature and wide range of use cases, these external files are separated for guest users and logged-in users. External CSS code is cached for each Mega Menu block (if you only have 1 block in a global area, then 1 external CSS file is cached). And JavaScript is cached on a per-page basis, as the dynamic content of the Mega Menu can change on each page.

Dynamic Nav Menu Cache

Mega Menu’s dynamic Nav Menu content is generated from the list of relevant pages in your Sitemap. Large websites with many pages or sites hosted on an underpowered server can take a long time to generate dynamic content on each page load.

When the Cache Navigation Menu Contents option is checked in Dashboard > Mega Menu, the Nav Menu is only generated once (on the first page load), and stored in a small file on your server for a maximum length of 1 day. Every subsequent page load, reads this file instead of scanning your entire Sitemap. Each page on your site is uniquely cached to preserve currently selected paths in drop-downs, as these can change on each page. This internal cache is automatically cleared when you manually clear the CMS cache via the Dashboard, or when you add, update, move or delete a page, so it never contains stale content. The default location of the disk cache on your server is application/files/cache/expensive.

External Dynamic File Cache

Dynamic CSS and JavaScript are served from external files, and generated based on settings you’ve selected in the Mega Menu block, as well as relevant Stack contents. When the Cache Dynamic CSS and Cache Dynamic JavaScript options are checked in Dashboard > Mega Menu the contents of the dynamic CSS and JavaScript files are only calculated once (on the first page load, assuming Mega Menu is placed in a Global Area), and stored in a small file on your server for a maximum of 10 days. This internal cache is automatically cleared when you manually clear the CMS cache via the Dashboard, or update the Mega Menu block, so it never contains stale content.

Handing Registered Users

To ensure all visitors to the website see accurate and relevant content, both dynamic CSS and JavaScript cached content is separated into 3 groups:

• guests (not logged in)
• registered users, without write permissions (such as customers or members); and
• registered users, with write permissions (such as staff or team members)

Mega Menu’s cache features can be activated independently of built-in block caching or full page caching in the Dashboard. These under-the-hood features will help improve the user experience and increase search engine rankings for your website.

Dashboard Caching Controls

By default, all of Mega Menu’s caching features are disabled at the time of installation. This ensures that you’ll always see the most accurate and current content while building your website. Once you’re ready to move into Production mode and site modifications are less frequent, it’s recommended that you enable all relevant caching features. You can control these features from Dashboard > Mega Menu > Settings:

Cache Dynamic JavaScript (including Stack contents)

Dynamic JavaScript includes settings for the Mega Menu and Extended Menu content pulled from Stacks. If your Extended Menu drop-downs are showing outdated content, then turn this off or clear the site cache. Turning on the next checkbox will help automatically flush this cached content whenever the relevant Stack is updated.

Autoflush JavaScript Cache (when Stack contents are updated)

To ensure cached Extended Menu content is not outdated when relevant Stacks are updated, check this box to initiate a targeted flush of dynamic JavaScript caches. This is triggered upon Approving the changes to a Stack (and a new version is created). If you update a Stack that is NOT used anywhere in a Mega Menu, it will NOT trigger the flush.

Note: If you do not update the Stacks used in Mega Menu frequently, it may be worth leaving this unchecked for improved performance. This feature can cause a short delay each time ANY new page version is created/approved as it must scan the entire site looking for Mega Menu blocks, and linked Stacks – and the larger the website, the longer this will take.

Cache Dynamic CSS

Dynamic CSS includes settings for the Mega Menu that control presentation and formatting, such as font size and padding. The external dynamic CSS file only changes when you modify the Mega Menu block (not when adding/editing/deleting/moving pages).

Cache Navigation Menu Contents

Scanning through all the pages within a site to build the dynamic Nav Menu items requires more server resources on larger websites. This feature takes a snapshot of all the pages used to build the Mega Menu and temporarily stores it on the server for quicker use on the next page load. This cache is automatically flushed when ANY page is added, updated, deleted or moved.

Block Caching

Mega Menu supports Concrete’s block-level caching, which takes a snapshot of the HTML output of the block to re-use rather than dynamically generating it from scratch for every page load. The advantage is that this speeds up the page loading time. The disadvantage is that every user will then see the exact same block, regardless if they are logged in, which prevents content personalization. So Mega Menu adds extra intelligence to this feature, and if any of the following conditions are true, the block caching will be deactivated:

1. User is logged in AND has editing permissions; or
2. User is logged in AND Member menu feature is activated (not set to “Not Displayed”)

Full-Page Caching

Concrete full-page caching can significantly speed up page loading time. However, enabling this is only recommended if you are displaying the exact same Mega Menu content to ALL users (ie. not using the Member menu feature or personalized Stack contents). If you update a Stack that is used by Mega Menu, it may not trigger a cache flush automatically, so you’ll need to do that manually. Use full-page caching with caution, as it has the potential to break other add-ons.

Access Concrete caching settings from /dashboard/system/optimization/cache.

How to Test Performance Gains

The easiest and most effective way to test the speed of a site you’re developing is Google Chrome’s DevTools (see full documentation). I recommend testing your page load time before and after enabling Mega Menu’s cache features.

Inspect Tab

This is my preferred method for a high-level, simplified calculation:

1. Open Chrome DevTools by right-clicking on the page and selecting Inspect.
2. Then click the Network tab and the current page name (at the top of the list).
3. Close the right panel to reveal the Time column. This is how long it takes to generate and download the HTML code that makes up the page.
4. Take note of the red total “Load” time at the bottom which also calculates images, CSS and JavaScript files.

Tip: Remember to do a “hard refresh” (macOS: Cmd + Shift + R, Windows: Ctrl + Shift + R) to ensure the browser cache doesn’t skew your results. Here’s a useful guide from A2hosting with more detail.

An example from my development environment (block and full-page caching turned off):

Before Mega Menu Cache Enabled

After Mega Menu Cache Enabled

Total Improvement (when user is not logged in): 1.583 seconds saved (61.8% reduced loading time)

Note: The ideal page load goal is 0.5 seconds for desktops and 2 seconds for mobile devices. Enabling Concrete’s block and page-level caching will result in even faster load times. I get down to 0.63 seconds on my laptop, and a high-powered web server with a web application accelerator (such as Varnish or LSCache) and a CDN (like Cloudflare) can reach that goal.

Performance Tab

Another measurement method uses the Performance tab. Here’s a comprehensive guide to page speed with examples from DebugBear. Open Chrome DevTools then select the Performance tab and click the Start profiling and reload page button.