Best Practices For Optimizing Website Speed While Using Awesome CSS

1. Combining various CSS file requests into one CSS file

1. We have Site Skin App for CSS
2. In Site Skin App create modules for each CSS request and paste the minified code of the requested file in the module.
3. Include these modules in awesome-css module.
   Ex- [this_collection.include swiper-css /]
4. Remove CSS requests from modules

2. Minimizing Third party Fonts Requests

Instead of including Google Fonts get Base64 converted fonts and use them.

Use https://transfonter.org to convert fonts.

1. Identify primarily needed fonts and Secondary fonts and create a different module for fonts such as primary_font and secondary_font. Paste respective font code in modules.
2. Include primary fonts in awesome-css file
3. Insert secondary fonts in footer using script
   Ex –
   
   
   XHTML

   <script type="spa/axn" axn="core.run_script"> $("head").append($("<link rel='stylesheet' href='[php.site_url /]/site-skin/css/fonts-secondary' type='text/css' />")); </script>

   1 2 3

   <script type="spa/axn" axn="core.run_script"> $("head").append($("<link rel='stylesheet' href='[php.site_url /]/site-skin/css/fonts-secondary' type='text/css' />")); </script>

   
    

3. Convert <script> tags to <script type=”spa/axn” axn=”core.run_script”>

1. Identify scripts tags without “spa/axn” value of “type” attribute and convert them. Because when we load all-js file with defer, normal scripts tags will give an error if that contains jQuery code.

4. Combining JS file requests into one JS file

1. Create Awesome JS App to create modules for JS requests like Awesome CSS app
2. Find external JS file requests and create a  module for each.
3. Include these modules in all-js module with proper priority. Such as we first need jQuery to load other libraries depend on it.
4. Include all-js file in the footer with defer.
   Ex- <script src='[php.site_url /]/awesome-js/js/all-js’ defer></script>

5. Responsive Images (optional)

If you’re just changing resolutions, use srcset to display different images in HTML for different resolutions.

Ex-

1. <img srcset=” url size, url size, url size ” src=”default url” alt=”title”>
2. <img src=”small.jpg” srcset=”medium.jpg 1000w, large.jpg 2000w” alt=”title”>