WordPress Speed Booster Pack Assets post provides a list of features that manages the assets which helps you improve your sites speed.
Last Updated: August 3, 2020
Latest News: Updated the documentation.
The following assets tutorial helps you to further improve the speed and performance for your site by managing the assets like js, css, html and more.
Controlling the assets like javascripts, css, inline, html, Google fonts and more allows you to further improve the speed of your site. This post shows you how to minify the html code in pages by removing the white spaces created between words, sentences, paragraphs and more. These white spaces are not needed and removing them will reduce the size of the page which in turn will load faster. You can enable lazy loading of media files which improves the loading speed of pages when someone visits a page with images included.
Some of these features will not work well in your site. It is up to you to find out which ones will and which ones won’t work well in your site. Make sure you test thoroughly each feature you enable before finalizing your settings and going live.
Note: These steps require thorough testing.
Speed Booster Pack Tutorials
WordPress Speed Booster Pack Assets
Step 1 ) The following image Assets allows you to enable the following features.
Assets Part 1
- Enable/Disable Assets = Enables or disables the whole module without resetting its settings.
- Minify HTML = Removes all whitespace characters from the HTML output, minimizing the HTML size.
- Optimize Google Fonts = Combines all Google Fonts URLs into a single URL and optimizes loading of that URL.
Step 2 ) The following image allows you to enable the following features.
Assets Part 2
- Lazy load media = Defers loading of images, videos and iframes to page onload.
- Lazy load exclusions = Excluding important images at the top of your pages (like your logo and such) is a good idea. One URL per line.
- Optimize JavaScript = Loads JavaScript better, avoiding render blocking issues. Moving all tags to the footer (before the </body> tag) causes less issues but if you know what you’re doing, deferring JS tags makes your website work faster. Use the exclusions list to keep certain scripts from breaking your site!
- JavaScript exclusions = If you encounter JavaScript errors on your error console, you can exclude JS file URLs or parts of inline JS here. One rule per line. Since each line will be taken as separate exclude rules, don’t paste entire blocks of inline JS!
Step 3 ) The following image allows you to enable the following features.
Assets Part 3
- Inline all CSS = Inlines all CSS files into the HTML output. Useful for lightweight designs but might be harmful for websites with over 500KB of total CSS.
- Minify all inlined CSS = Minifies the already inlined CSS.
- CSS exclusions = If your design breaks after enabling the CSS options above, you can exclude CSS file URLs here. One rule per line.
Step 4 ) The following image allows you to enable the following feature.
Assets Part 4
- Preload assets = Enable preloading of the assets specified below. Enter full URLs of the assets you want to preload. One URL per line.
=======================================
I will be updating this tutorial from time to time. Make sure you come back for the latest updates.
If you have any questions please let me know.
Enjoy.
I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.