Render Blocking CSS and Browser Caching

Discussion in 'Subrion Open Source CMS Core' started by Helang_IT, Mar 19, 2017.

  1. Helang_IT

    Helang_IT New Member

    As always, I would value your thought on this if you have a moment to spare:

    Google Analytics is giving me the following Site Speed Recommendations:

    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Your page has 6 blocking CSS resources. This causes a delay in rendering your page.
    None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
    Optimize CSS Delivery of the following:

    Leverage browser caching

    Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
    Leverage browser caching for the following cacheable resources:

    Do you have any suggestions as to IF or how I might go about implementing these improvements, or is this a Subrion developer issue?
  2. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hello @Helang_IT !

    Good question you have :)

    First, I'd like to point out that each website on the web differs and has its own purposes and that is why optimizations are done individually. Because of this, we do not include some of optimization in our CMS (some basic minifications for files are applied of course).

    And here is what I suggest you to do with Google Recommendations:

    Leverage browser caching
    Add these instruction to your .htaccess file:
    Code (Text):

    <IfModule mod_expires.c>
        ExpiresActive on
        ExpiresDefault                                      "access plus 1 month"

        # CSS
        ExpiresByType text/css                              "access plus 1 year"

        # Data interchange
        ExpiresByType application/atom+xml                  "access plus 1 hour"
        ExpiresByType application/rdf+xml                   "access plus 1 hour"
        ExpiresByType application/rss+xml                   "access plus 1 hour"

        ExpiresByType application/json                      "access plus 0 seconds"
        ExpiresByType application/ld+json                   "access plus 0 seconds"
        ExpiresByType application/schema+json               "access plus 0 seconds"
        ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
        ExpiresByType application/xml                       "access plus 0 seconds"
        ExpiresByType text/xml                              "access plus 0 seconds"

        # Favicon (cannot be renamed!) and cursor images
        ExpiresByType image/              "access plus 1 week"
        ExpiresByType image/x-icon                          "access plus 1 week"

        # HTML
        ExpiresByType text/html                             "access plus 0 seconds"

        # JavaScript
        ExpiresByType application/javascript                "access plus 1 year"
        ExpiresByType application/x-javascript              "access plus 1 year"
        ExpiresByType text/javascript                       "access plus 1 year"

        # Manifest files
        ExpiresByType application/manifest+json             "access plus 1 week"
        ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
        ExpiresByType text/cache-manifest                   "access plus 0 seconds"

        # Media files
        ExpiresByType audio/ogg                             "access plus 1 month"
        ExpiresByType image/bmp                             "access plus 1 month"
        ExpiresByType image/gif                             "access plus 1 month"
        ExpiresByType image/jpeg                            "access plus 1 month"
        ExpiresByType image/png                             "access plus 1 month"
        ExpiresByType image/svg+xml                         "access plus 1 month"
        ExpiresByType image/webp                            "access plus 1 month"
        ExpiresByType video/mp4                             "access plus 1 month"
        ExpiresByType video/ogg                             "access plus 1 month"
        ExpiresByType video/webm                            "access plus 1 month"

        # Web fonts
        # Embedded OpenType (EOT)
        ExpiresByType application/         "access plus 1 month"
        ExpiresByType font/eot                              "access plus 1 month"

        # OpenType
        ExpiresByType font/opentype                         "access plus 1 month"

        # TrueType
        ExpiresByType application/x-font-ttf                "access plus 1 month"

        # Web Open Font Format (WOFF) 1.0
        ExpiresByType application/font-woff                 "access plus 1 month"
        ExpiresByType application/x-font-woff               "access plus 1 month"
        ExpiresByType font/woff                             "access plus 1 month"

        # Web Open Font Format (WOFF) 2.0
        ExpiresByType application/font-woff2                "access plus 1 month"

        # Other
        ExpiresByType text/x-cross-domain-policy            "access plus 1 week"

    <IfModule mod_deflate.c>
        <IfModule mod_setenvif.c>
            <IfModule mod_headers.c>
                SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
                RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding

        <IfModule mod_filter.c>
            AddOutputFilterByType DEFLATE \
                text/html text/plain text/xml text/css text/javascript text/xml \
                application/xml application/xhtml+xml application/rss+xml \
                application/javascript application/x-javascript application/json \
                font/opentype application/x-font-ttf font/eot \
                image/x-icon image/ image/svg+xml image/svg+xml

        <IfModule mod_mime.c>
            AddEncoding gzip svgz
    This should solve caching issue.

    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    This one is more complicated..
    The basic idea here is to grab all the CSS code and put it in one file, ie iabootstrap.css and remove all links to other css files. This technique is also applied to JS.
    In this case you have less queries to the server and it speeds up loading of the website.

  3. Helang_IT

    Helang_IT New Member

    @Gleb_S. Great answer. Thanks for this.

    I did find that for some JS, the warning was dealt with by using the async flag. E.G <script async src="/js/extjs/googleanalytics.js">. Apparently, the async flag allows the DOM to load before the JS is executed. This does not necessarily apply to all JS, because sometimes the JS has to run before rendering. For example, I don't know if it would be a good idea to do the same with calls to jquery.js.

    Merging the CSS sounds a bit dangerous for me. Do you mean that every php page would need to be edited to remove the links to the other CSS files? And (if I understand the concept of templates), these optimizations would probably be lost if the template were changed?

    As for the .htaccess code. Wow... thanks. That's a lot of code! I will go and add it now. :)

    I will now start a new thread about Search Engine Optimisation, as Google is opening up a whole can of worms for me!

    Thanks again.
  4. Boue

    Boue New Member

    How do you async the JS when it is like this in layout.tpl;
    {ia_add_media files="jquery, subrion, js:bootstrap/js/bootstrap.min, c....etc............
  5. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hello @Boue !

    We have a special function in Smarty that composes all scripts using {ia_add_media}. You can find it here: root/includes/classes/ia.core.smarty.php
    Here we have a string on line 37:
    const LINK_SCRIPT_PATTERN = '<script src="%s"></script>';
    You can change it to:
    const LINK_SCRIPT_PATTERN = '<script src="%s" async></script>';
    and that should do the trick.


Share This Page