Forum Replies Created

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • @goldengate415
    In the settings of the Pagespeed/Above the Fold plugin, when you are on the tab CriticalCSS, then halfway the page you see:

    Extract Full CSS
    For the creation of Critical Path CSS you need the full CSS of a page. This tool allows you to extract the full CSS from any url and optionally to select the specific CSS files you want to extract.
    You can quickly output the full CSS of any url by adding the query string ?extract-css=0eae7250104aba6e53dcec8cb3d6c00e&output=print.

    At that point you can download your complete css of your website.

    @CurlyHost
    You should start a Chrome Webbrowser, press Ctrl-Shift-I to open the developer tools.
    With the plugin disabled and your browser-cache cleared, open your website and check in Chrome-dev-tools on the network-tab how fast you site was loaded. Notice the number of files that are downloaded from the webserver.
    Now enable the plugin, clear your browser cache and open your website again and check the network speed in the Chrome-dev-tools. The number of files is decreased, and also the time to load the total number of files is less.
    So there should be a difference, less files should be downloaded because more css is rewritten as inline style.
    Of course you should know that Google also uses the loading-time of your website to rank your website, although this is only small part of your ranking.

    Hi all,

    I am finetuning my settings to further optimize the “Above the fold’ issue. By reading a lot of information on the internet how this works you should get good knowledge of this complicated matter could be solved. The short story is that all CSS and JS files loaded in the <HEAD> section of your webpage could block the rendering (loading). By placing them in the <BODY> section the webpage starts rendering the page earlier. The disadvantage is that the layout of the page could be messed up, so that is why some of the CSS content should be loaded in the <HEAD> section. In stead of loading CSS files, you can also add CSS as inline stylesheets, thus not blocking the rendering of the webpage. The JS part is a bit more complicated, so I am still reading (and learning) about this.

    Maybe this will help to you too Orhan:

    In the Above the Fold plugin, at the Critical CSS tab extract the full CSS.
    Then disable the Above the fold plugin.
    Go to https://jonassebastianohlsson.com/criticalpathcssgenerator/
    At this website, at number 1 type your website URL
    At number 2 paste your full-extracted CSS
    Press the button at number 3.
    Copy the generated CSS.

    Go back to your WordPress admin and enable the Above the Fold plugin again.
    Go to the Critical CSS tab of the Above the Fold plugin and paste the newly generated CSS here.
    Go to the CSS tab and enable the Optimize CSS Delivery option and save all settings,

    To be sure the website loads with this settings empty the cache of your webbrowser, and if you have cacing plugins on you site, also clear those caches.

    Good luck.
    Arnold

    Hi all,

    I agree with Rikard that a Google-tool decides for you if your site has a good user-experience or not.

    I mentioned that I will update the experiences I have done on my website.
    Right now I have 93/100 on Mobile and 97/100 on Desktop via the https://developers.google.com/speed/pagespeed/insights website. The last few percentages are javascript-optimization items, but some js-optimization plugins I tried broke the website-functionality.

    Below are the settings I made to get to this score. Of course it took a lot of time trying, testing and reading to get to this point. Don’t be disappointed if it does not work for you, those are my settings for my website and things will depend on which other plugins you have deployed on your site, that might have other blocking css or js.

    What I did:
    Installing
    Install the plugin Autoptimize.
    Install the plugin Comet Cache.
    Install the plugin Above the Fold Optimization.
    Activate them all.
    So far the easy part ;)

    Go to Comet cache settings :
    (only important settings below)

      Enable: yes
      Automatic Cache clearing: set them all to yes
      Cache Directory: any writable directory on you hosting server; keep default cache/comet-cache
      Client side cache: yes
      Get requests: no

    Above the fold Optimization (Pagespeed)
    Critical CSS:
    Critical Path CSS: <get the full CSS, and put it into an online CSS-optimizer and paste it here>
    Enable Condition CSS: no

    CSS:

      Optimize CSS Delivery: yes
      Enhanced loadCSS: yes
      Position: Footer
      Ignore List: <empty>
      Remove List: print.css
      Optimize Web Fonts: yes
      webfont.js Load Method: async
      Load Position: footer
      WebFontConfig: <default>
      Google Web Fonts: Lato:300,400,700:latin <and your other fonts that you use from Google, each on one line>
      Exclude List: <empty>

    Javascript:

      Optimize Javascript Loading: yes
      Script Loader: little-loader + HTML5 Web Worker <for this setting to enable, you need also to enable Proxy Scripts on the Proxy Tab>
      Position: header
      Ignore List: <empty>
      Remove List: <empty>
      Force Async: yes
      Async Disabled List: <open the avia.js in a text-editor, find the function for Smooth Scrolling (starts at line 713, ends at 853), copy and paste it here>
      Abide dependencies: no
      JQuery Stub: yes
      Lazy Load Scripts: no

    Autoptimize
    Show Advanced Settings
    HTML Options

      Optimize HTML Code: yes
      Keep HTML comments: no

    Javascript Options

      Optimize JavaScript Code: no

    CSS Options

      Optimize CSS Code: yes
      Generate data: URIs for images: no
      Remove Google Fonts: no
      Also aggregate inline CSS: no
      Inline and Defer CSS: yes
      <paste necessary/critical CSS here that you acquired in the previous step>
      Exclude CSS from Autoptimize: admin-bar.min.css, dashicons.min.css, print.css
    • This reply was modified 8 years ago by Arnold. Reason: formatted this post a bit

    Hi Rikard,

    The first result of your query is the plugin I am using: https://wordpress.org/plugins/above-the-fold-optimization/

    The only technical difference between inline javascipt and css versus external .js and .css files is that WordPress will not start rendering the output html before all necessary .css and .js files are loaded. Of course putting all css and js inline gives a much larger html-output which will also be a blocking issue on slow connections e.g. mobile devices with 3G. So I am still checking what needs to be inline and what can be loaded (asynchronously) from .css and .js files and still have all functionality as it should be.

    Right now I already have a 80/100 on mobile and 82/100 on desktop which is already a great score, but now both on mobile and desktop the “Next-Section” button does not work anymore.

    I keep you posted.
    Best Regards
    Arnold

    To add some useful information to this thread: I am using the above-the-fold-optimization plugin in WordPress. At the moment I have succeeded to get all critical-css into html-inline css, and am nearly done with the javascript.
    To get a non-blocking html-page you need to have all critical css and js to be inline in your html page (thus not to be called from an external .css or .js file) and have the inline javascript call the remainder of the css and js. This can all be done by the plugin I mentioned.
    Right now I have 79/100 on desktop and 69/100 on mobile, and hope to have a better score when I find the blocking javascript function.
    I keep you posted with my progress.
    BR, Arnold

Viewing 5 posts - 1 through 5 (of 5 total)