Overview
UberMenu won’t negatively impact your site speed when configured correctly. However, UberMenu gives you the ability to add lots of content to your menu which other menu systems do not. Therefore, there is the risk that the content you add to the menu can increase the weight or processing time of your site to the point where it can slow things down.
When designing your menu, it’s important to consider the overhead of the content that you’re adding. Assets that can increase page size or HTTP requests can slow page load, and increasing the amount of processing required can increase server load. As long as you follow the recommendations provided in the UberMenu Optimization Guide, you should not have an issue. This article provides information on some of the most common misconfigurations that can lead to slow site performance.
To be as flexible as possible, UberMenu does not implement restrictions on what you can add to your menu. But this means that you need to be responsible when adding content so that you don’t negatively impact your site.
Images
Adding too many or too large images to the menu is the most common reason for site slowdowns. For detailed information, please see the Image Optimization Guide. Here are some quick tips:
- Too Many Images – Keep the number of images you add to your menu as minimal as you can. More images increases HTTP requests and means more back and forth with your server
- Too Large Images – Make sure that you are using the smallest image possible by selecting an appropriate Image Size. Don’t use larger images and scale them down in the browser. You can also use an Image Compression plugin to reduce your file sizes even further
- Utilize Lazy Loading – If you need to use many images, you should enable lazy loading, so that the images won’t be loaded until users open the submenu
- Background Images – Keep in mind that background images are still images that need to be loaded. Keep their number and size to a minimum
Too Many Items
Adding too many items to your menu can make things difficult for your users to navigate, and slow down your site if the menu gets too large. A maximum of 100 items is generally a good limit to shoot for. I’ve seen customers try to add 400+ items to the menu; at that point, the menu is likely going to become unusable for most users (who can parse 400 items visually?). While the maximum number of items that your server can handle without struggling is going to depend on the server’s processing capabilities, if you have more than 200 items in your menu, you should definitely reconsider your menu design for both user experience and performance purposes.
For more detailed information, see Database and Processing Optimization
- Keep your menu items to a minimum – Carefully consider each menu item and whether it truly serves your users. Don’t add unnecessary items. Each additional item means extra processing time. If you have a site with many sublevels, consider using the top 3 levels in the main navigation, and deeper levels in a secondary navigation.
- Use a page cache – If you have a large menu, you’ll want to use page caching (such as W3TC) to cache your entire page markup, preventing the need for the menu to be regenerated on every page load
- Use Menu Segment Caching – While a page cache is generally your first line of defense, if you can’t use one or if you have a lot of logged in users, you can use Menu Segment Caching to cache your submenus and significantly reduce processing load.
- Remember, caching is not an excuse for poor menu designing! That cache still needs to be rebuilt from time to time, and you should aim to keep the stress on your server as minimal as possible
Too Many Dynamic Items
Dynamic Posts and Dynamic Terms are a great feature because they allow you to automatically generate content. But keep in mind that these queries can become expensive (in terms of server processing). Only use these items when needed, and be aware of how they can affect your processing time. This is again something that servers with higher processing power will be able to handle more of. When used reasonably, they are very powerful; but it is easy to use them excessively if you’re not mindful. More information: Database and Processing Optimization.
- Use Dynamic Items sparingly, and only for dynamic content – Dynamic Items require extra queries on each page load by nature. If you use too many, you can increase the processing load significantly
- Don’t use dynamic items for static content – Dynamic Items are meant for dynamic content. If your content isn’t changing regularly, use static items rather than dynamic items for optimal performance. It’s more work up front, but it saves your server processing on each page load.
- Use caching – If you do use Dynamic Items, it’s a good idea to use either a Page Cache or Menu Segment Caching so that your dynamic items aren’t reprocessed on every page load
- Keep in mind query expansion when nesting dynamic items – If you have 3 levels of terms represented by 3 dynamic items, and each term has 5 children, then that means you run 1 query (5^0) in the first level, 5 queries (5^1) at the second level, and 25 queries (5^2) at the third level, for a total of 31 queries. If you had 10 terms per level, that would be 10^0 + 10^1 + 10^2 = 111 queries. This means two things:
- keep in mind the number of terms/posts that you have in your results (you can limit them if necessary)
- you likely never want to use more than 2 nested levels, unless you are quite sure of the number of items you have.
- In short, use this tool wisely – It’s not hard to overdo it.
Custom Content
Of course, UberMenu also allows you to add any custom content you want to your menu. Since this could be anything, it’s impossible to provide specifics here, but make sure any custom content you add doesn’t add excessive weight or load time to your site. For example, a content that adds a large image or video, or a shortcode that runs a complex and slow query, could contribute negatively to the site speed (and would only occur when UberMenu is active, because the content is only present inside the menu).