In optimizing large WordPress Websites for performance I always look at caching certain parts of the Website, mostly (of course) those that require a lot of Queries/calculation.
For the Caching of the WordPress menu I usually use a function like the one I posted as an Answer here.
This function checks if there is a transient containing the menu-HTML, and if it exists, delivers the HTML from the transient. If it does not exists, the menu is build and the transient set. To be clean, I also hook into
wp_update_nav_menu to clean the transient as soon as the menu is saved, to always have the latest version available.
So far so good.
This technique works very good and gives a great performance boost, especially if the menu contains a lot of entries.
Now, some months after developing this method, I ran into a problem, and feel stupid for not thinking about it in the first place.
Menus are different on different pages
Depending on what Page is called,
wp_nav_menu delivers different HTML Code.
current-menu-item and classes like that are of course applied to the menuitems.
So the problem is, what is the best way to cache the menus and still have the correct classes available for each specific page?
I thought about two versions
- adding the classes via jQuery, which results in more calculating on the Clientside
- caching the menus for each
IDseperatly, resulting in quite some Databaseload, if the page has a lot of menuentries
However, I tend to use the second option. Do you have any concerns with caching that much HTML as Transients?