WordPress.org

Forums

Calculated Fields Form
[resolved] Eliminate render-blocking JavaScript and CSS (3 posts)

  1. bair004
    Member
    Posted 1 year ago #

    Google Page Insights returned the following message in regards to my page load time: Eliminate render-blocking JavaScript and CSS in above-the-fold content. So is it possible to eliminate that by snipping a few lines of code in CSS or make a change to the JS? My form is 50+ fields broken up into 5-6 pages... hope it's not dragging because of the length, but in any case, I could use some help.

    https://wordpress.org/plugins/calculated-fields-form/

  2. codepeople
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    The plugin includes some javascript and CSS files. There are some plugins that allow minify the CSS and javascript files on website, but you should understand that your form is really complex. Rendering a complex form will be always slower than a simple contact page.

    Best regards.

  3. Enrique Murillo
    Member
    Posted 1 year ago #

    I have a problem like yours and found this blog(at the end comes the original link:

    LightsOut's Avatar LightsOut LightsOut is offline
    Master Babbler

    Join Date
    Aug 2011
    Posts
    293
    Default
    If I were you, I wouldn't care. This wouldn't increase your google pagespeed score too much, and it is a very tiny improvement. On the other hand its almost impossible to achieve. What google wants you to do is to load your javascript and CSS after all of the HTML has been loaded.

    This basically means that you have to include your javascript after the closing </html> tag instead of doing it in the head or footer. Then you would need to create inline CSS styles for rendering the content that is "above the fold" (which is next to impossible.. especially if you use responsive design for your site). After that is done, you would need to asynchronously load the CSS via javascript. Here is an example of how your page might look like:

    <html>
    <head>
    </head>
    <body>
    <div class="navigation" style="color:red"></div>
    </body>
    </html>
    <script src="/js/jquery.js">
    <script>
    $(function() {
    $( "head" ).append("<link rel="stylesheet" type="text/css" href="theme.css">");
    });
    <noscript><link rel="stylesheet" type="text/css" href="theme.css"></noscript>

    Like I said earlier.. don't bother unless you have a super simple site and this would be easy thing to do. It has literally almost no benefit for your page and is a huge time/effort investment.

    http://goo.gl/82dQVw

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Calculated Fields Form
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic