Guidelines for getting the best performance out of Chap theme.
Use an optimization plugin
The most common job of an optimization plugin is to combine multiple styles and scripts into larger bundles as well as minify them and the HTML. The result is then cached and served without needing to do much computation on the server. Every site looking for performance should do these things, how ever it is not something a theme can do out of the box. For that reason an optimization plugin is something you should install no matter how “high performance” your theme is advertised as (unless your server already does it with something like PageSpeed Module).
Read details about how to set it up here.
Disable Semantic UI components you don’t need
CSS
Under Chap Theme -> Chap Compiler -> Compiler settings you can uncheck Semantic UI components that your site does not use. By default some components are already disabled, so you may need to enable them when needed.
Don’t forget to hit Save Changes after modifying components and then hit Compile to recompile Semantic UI with the different set of components.
JavaScript
Under Chap Theme -> Chap Compiler -> Modular Semantic UI JavaScript you can enable a modular version of the Semantic UI JavaScript bundle from which you can exclude components that are not used in order to have a smaller JS file on your site.
First check the Enable box to use it and choose which components you would like from below, then when you hit Save Changes the bundle will be created in your WordPress uploads directory and will be served instead of the original full bundle.
The individual components that the bundle is created from also have debug functionality and messages (except errors) stripped from them to be even more lightweight.
Enable instant.page
In Chap Theme -> General -> Miscellaneous check the Enable instant.page option.
instant.page is a 1kb script that does not make your site’s first load faster, how ever it significantly improves the subsequent user experience by preloading the links that they are likely to follow. Usually there is around 300ms time between the user hovering over and clicking a link, instant.page uses that time to get the next page preloaded and once the user actually clicks they can be sent to the next page quite a bit faster.
This does, how ever, increase load on your server, so it’s best to turn it off if you are struggling serving large amounts of visitors.
Use SVG icons
Under Chap Theme -> Themes -> Elements -> Icon you can choose the Font Awesome SVG icon theme to avoid loading the full FA icon font file (~75kb) as well as their semantic naming CSS rules (~35kb). Instead each icon will be read and output individually from a svg file directly into your HTML (that process is also cached). This will increase your HTML size but as long as you don’t use hundreds of icons on the same page it should result in a net gain.
The removal the icons font file also allows to get rid of the “Ensure text remains visible during webfont load” message from Google PageSpeed Insights messages, as long as you don’t have any third party plugins that load additional fonts without font-display: swap attribute.
Read more about SVG icons here.
Defer rendering sidebar and sticky menus
Sidebar menu is usually only meant for mobile users and it’s not open by default, so it’s not critical to construct the markup for the menu immediately. By enabling the option Chap Theme -> Menus -> Sidebar menu -> Defer you can prevent rendering the sidebar menu initially, but once the user clicks the button to open the menu then it will be fetched using the REST API. This will reduce the markup that is sent during first page load, but may increase requests to your server.
There is also an option to do the same for the Sticky menu at Chap Theme -> Menus -> Sticky menu -> Defer. When enabled, the menu will be loaded only once the user scrolls below the masthead.
Lazyload images
Loading images only once the above the fold content is loaded and they are actually scrolled to on the screen is one of the most important optimizations to improve initial page load time.
Modern browsers are starting to support this functionality by default by using the loading="lazy" attribute on images or iframes, how ever the global support is still below 70%. For that reason it’s better to rely on Chap theme’s built-in lazy loading functionality or a third party optimization plugin.
Chap theme comes equipped with the 3.7kb library called lazysizes. This makes it so when an image is using the data-src attribute instead of src and has the lazyload class then it will be lazyloaded. For the most part, the theme will handle doing that automatically if you enable the following options:
The SUI Image and Gallery blocks, part of the bundled Gutenberg Semantic UI plugin, also come with an option to lazyload the images.
Optimization plugins such as the aforementioned Autoptimize can also handle the lazy loading of all images automatically, in which case you may wish to disable the Chap theme options mentioned earlier in case of any conflicts.
Serve images in next-gen file format
Even if you are lazy loading your images and they are properly optimized, there is still room for improvement. Next generation image formats such as WebP, JPEG 200 and JPEG XR are significantly smaller than typical images. Although not all browsers support them so you don’t want to upload these image formats directly to your WordPress media library.
Luckily you can set up a plugin such as WebP-Express to serve the images in modern formats when possible and old formats when not. If setting up such a conversion method on your server is too advanced there are also services such as CloudFlare, ShortPixel or EWWW albeit usually at a fee.