CFIDE Scripts - load order

[Ryan11]

Hello,

I have a coldfusion page which I am including a number of css and .js files (in the header). To increase the load spreed of a page, it is always recommended

to include script files after css files. This works fine for all other .js files, however not for any CFIDE srcipt files - I have tried including the <cfajaximport> tag

below all the css files, however the CFIDE scripts always get loaded above all my css files. This has a causes render-blocking issues and I was wondering

if anyone knew a way around it ...ie, a way to arrange the load order of CFIDE scripts ?

Thanks,

Ryan,

[James Moberg]

There is a way, but it requires installing Google PageSpeed (or IISpeed if you use IIS).  (NOTE: This will fix the issue you are encountering as well as provide many other benefits.)

We used to jump through a lot of hoops and use ColdFusion to maintain optimized versions of files, but it was never performed correctly.   Some mobile devices have maximum file+caching limitations and you can't simply concat all Javascript & CSS into single large files.

On a per-site basis, we use IISpeed to automatically perform the following optimizations on ColdFusion 9 generated pages:

• Combine & Prioritize Critical CSS
• Move CSS Above Scripts to Head
• Combine, Minify & Defer JavaScript & Move to Head
• Extend Cache (uses a hash to cache resources for 1 yr, unless changed)
• Lazy Load Images, Sprite Images & Convert JPEG to Progressive
• Optimize Images (Resizes images for smaller device screens & serves WebP to Chomr browsers)
• Collapse Whitespace & Remove Comments

If I want to disable PageSpeed for any given page, add "PageSpeed=off" to the response header:

     <CFHEADER NAME="PageSpeed" VALUE="off">

On 4/24/2014, I tweeted:

Hey @WeAmp, #IISpeed rocks! Page load time from 13 sec to 7.2 (-5.8s / 44% faster) http://ow.ly/vZSmM #PageSpeed #ColdFusion

http://twitter.com/gamesover/status/458315659630624768

For more information on PageSpeed Module filters, go to:
https://developers.google.com/speed/pagespeed/module/filters

[JackinTheBox]

James,

I am just wondering if you are still using IISWebSpeed? I currently using Coldfusion 2016 on Windows Server 2012R2 and am considering purchasing a 12 month license for IISWebSpeed.

I just wanted to ask if you were still experiencing the drastic speed improvements that you mentioned above? Also, I was wondering if you had an example of a particular config file that you use on your sites that you have found works well - and if you wouldn't mind sharing it ? 🙂

[James Moberg]

We are currently using ColdFusion 2016 w/Windows 2016 and are still in the process of upgrading to the new IISWebSpeed. (We've been through a bunch of upgrades within the last couple of months.)  I definitely recommend using PageSpeed.  We also use jsoup after our HTML generation to programmatically add CSP nonces, auto-generate ALT tags for IMG tags, move flagged JS/CSS scripts to the footer, correct invalid HTML, etc... and then it's automatically processed by IISWebSpeed for optimization.

Regarding IISWebSpeed.config, it will depend on other client-side libraries you are using.  Some optimization features may not work correctly and then it's a matter of determining which feature(s) to disable or figure out how to recode something to better deal with extended caching.

Here's some defaults that we enable.  (NOTE: I'm not sure if any of these directives have been deprecated in the latest version yet.):

pagespeed RewriteLevel CoreFilters

pagespeed EnableFilters insert_dns_prefetch

pagespeed EnableFilters collapse_whitespace,trim_urls

pagespeed EnableFilters extend_cache,inline_import_to_link,inline_css

pagespeed EnableFilters lazyload_images,combine_javascript,combine_css

pagespeed EnableFilters rewrite_images,convert_jpeg_to_progressive,convert_jpeg_to_webp

pagespeed EnableFilters convert_jpeg_to_progressive

pagespeed EnableFilters prioritize_critical_css,move_css_above_scripts,move_css_to_head

pagespeed RetainComment " Website*"

pagespeed EnableFilters inline_google_font_css;

pagespeed EnableFilters rewrite_javascript

pagespeed EnableFilters rewrite_css

pagespeed EnableFilters extend_cache

pagespeed EnableFilters resize_mobile_images

pagespeed EnableFilters resize_rendered_image_dimensions

pagespeed InPlaceResourceOptimization off

pagespeed FetchHttps enable

# Configure loading files from disk using whitelisting:

pagespeed MapOriginDomain http://www.website.com https://www.website.com

pagespeed LoadFromFile http://www.website.com/images/ C:\myWebsites\website\images\

pagespeed LoadFromFile http://www.website.com/scripts/ C:\myWebsites\website\scripts\

pagespeed Disallow */ajax*

pagespeed Disallow */admin/*

# By default - don't allow anything to load

pagespeed LoadFromFileRuleMatch Disallow .*

# But do allow these file extensions. Note that assets with querystrings won't match, and will still be fetched via http

pagespeed LoadFromFileRuleMatch Allow \.(css|js|pdf|gif|jpe?g|png|woff|otf|svg|swf|ttf|eot|ico|bmp)$

[JackinTheBox]

Awesome... thank you for the very detailed and informative response James!

I will give those config settings a go and will also look into Jsoup. You mention that you use Jsoup to move css and js scripts to the footer - I thought iisWebspeed would optimize this for you? This is one of the main reasons why I would be using iisWebspeed  - to handle the render blocking CFIDE scripts.

[James Moberg]

IISWebSpeed does handle this automatically, but we don't have IISWebSpeed enabled on every website for every request.  We use jsoup to prep the content and ensure that it's valid HTML before it gets handed off to IISWebSpeed.

We refuse to use any CFUI tag.  Even if we used jsoup to optimize the HTML, ColdFusion still adds the CFIDE scripts "after" OnRequestEnd and, if I recall correctly, can occassionaly invalidate the HTML  Using IISWebSpeed should automatically fix this for you since the optimizations that it performs are post-ColdFusion and pre-IIS.

You may want to increase "Maximum Output Buffer size" and disable CFFlush so that none of your content is prematurely optimized.  (This may not be a problem.  We increase it so we can use jsoup effectively.)

Let me know how it goes.

[JackinTheBox]

Great, thanks for the explanation - makes sense now!

[Charlie Arehart]

Interesting stuff, indeed. I'm curious, though: you both mention using cf2016 but then refer to "CFIDE scripts". To be clear, in cf2016, the files and folders in cfide/scripts were moved to a new cf_scripts folder as a sibling to CFIDE.

Is that what you guys are referring to, perhaps just generically as "CFIDE scripts"? Because if you are REALLY using cfide/scripts or seeing it in html, that may be referring to a copy of that folder left over from before cf2016 (when cf put it in a folder of your choosing in your web server root). If so, beware that CF would no longer be updating that folder (it presumes to update only those in the cfusion/wwwroot), and you would have old non-updated versions of those files  I've seen it happen, so just asking in case it may help.

Finally, Jack, do you really have many pages referring to those cf scripts at all? As James said, there's a strong move away from the CF ui tags that relied upon the cf scripts. Many are even retired as of cf2018...meaning they no longer work unless you take a step to enable them. (See the cf2018 deprecated features page, at the bottom, for more.)

[James Moberg]

Charlie Arehart, Whenever CFUI tags are used, ColdFusion prepends every JS/CSS resource to the beginning of the HTML Head section.  Regardless of whether the script directory is called "CFIDE" (for 11 past versions of CF) or "cf_scripts" (for the 2 latest versions), nothing is done by ColdFusion to optimize the code (or reduce whitespace) apart from blindly prepending everything to the HTML header.

Using Google PageSpeed (or IISWebSpeed) helps to fix many optimization problems.  It intelliegently concats JS & CSS files knowing that many devices have different limitations.  It relocates CSS/RSS resources in the order that they should appear (CSS first) and also collapses whitespace.  It can automatically add "defer" to non-critical scripts and set long expiration dates to extend caching.  If a developer adds CSS or JS to the HTML body, PageSpeed can relocate that to the header and put it in the proper order. IISWebSpeed also monitors for changes to linked JS/CSS resources and automatically cachebusts the resource files as needed.

I don't use CFUI tags, but I do use PageSpeed on all publicly accessible webpages whether they are static HTML or generated using ColdFusion.  Here's a comparison of the source code generated with a simple CFM page using CFUI before and after PageSpeed.  You'll notice that all CSS files have been relocated before JS files as Ryan11​ originally asked.

ColdFusion webpage using UI Tags - with and without Google PageSpeed · GitHub

[Charlie Arehart]

James, I understand that (your first point). I alluded to that in my last paragraph to Jack, "Finally, Jack, do you really have many pages referring to those cf scripts at all? As James said, there's a strong move away from the CF ui tags that relied upon the cf scripts."

But my main point was to make sure you guys weren't seeing some other possible implication based on referring specifically to "CFIDE scripts" in CF2016 when it was now cf_scripts. I wasn't being snarky, or questioning whether you knew of the change. I was just pointing out that that could be a factor in what you were both observing/reporting.

But you're right, when it's CF putting the header on the page, I don't mean to counter the assertion you guys are making about an opp for improvement. That's why I opened my comment with "Interesting stuff, indeed" and then proceeded to share the rest with merely "I'm curious, though".

So I'm with you guys on seeking the improvement you propose.

[James Moberg]

The original question may have been regarding pre-2016 version of ColdFusion.  Ryan11 didn't indicate which CF version was used.

I haven't used and CFUI tags since CF6/7 and only recently upgraded to CF2016, so I wasn't familiar with any sub-directory name changes. The name of the directory doesn't impact any advice that I've offered and the correct HTML optimization is performed regardless of which directory name is used.  The reason we stopped using CFUI tags was because there wasn't any control over how JS/CS code was injected into the webpage and many of the libraries were outdated/deprecated/unmaintained and/or conflicted with modern JS libraries that we were using.

The follow-up question was regarding whether PageSpeed can improve ColdFusion-generated webpage performance.  Jack didn't mention which version of ColdFusion was used, but did mention CFIDE directories.  PageSpeed (or IISWebSpeed which works with IIS) can improve the HTML output generated by any version of ColdFusion.