Remove render blocking javascript in rails with react-rails gem -


i have ruby on rails app. views using react-rails gem. want improve pagespeed through google pagespeed. main problem remove render-blocking javascript added async: true javascript_include_tag helper method. when refresh site have blank white window browser these messages inside console:

referenceerror: $ not defined    $(document).ready(ready); referenceerror: jquery not defined    }(jquery);  referenceerror: jquery not defined    })( jquery );  referenceerror: react not defined     this.about = react.createclass({

my applicaton.js file: 

// //= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap-sprockets //= require react //= require react_ujs //= require semantic-ui //= require components //= reqiore custom //= require_tree .  var ready; ready = function() {  };  $(document).ready(ready); $(document).on('page:load', ready);

what need in order remove blocking javascript?

since virtually on page dependent on jquery, successful page rendering needs jquery loaded start. therefore in experience there no way around blocking javascript.

from user's perspective, putting in lot of work prevent jquery blocking may allow dom load, lot of jumping around after jquery , related plugins have loaded dom gets rewritten, making experience worse marginally longer page load.

overall, i'd focus efforts on ensuring jquery , related js , css files delivered through cdn, can benefit http pulling second domain in parallel primary, , ensure nothing break browser caching of jquery , other assets not block on subsequent request.

edit

i meant mention worth testing assets precompiled (which necessary anyway if using cdn), switching off asset live compilation missing items with

config.assets.compile = false

this prevent missing assets causing confusing delays, , possibly invalid compilations once live.

an additional note regarding serving assets web server:

according http://guides.rubyonrails.org/asset_pipeline.html

4.1.1 far-future expires header

precompiled assets exist on file system , served directly web server. not have far-future headers default, benefit of fingerprinting you'll have update server configuration add headers.

for apache:

# expires* directives requires apache module # `mod_expires` enabled. <location /assets/>   # use of etag discouraged when last-modified present   header unset etag   fileetag none   # rfc says cache 1 year   expiresactive on   expiresdefault "access plus 1 year" </location>

for nginx:

location ~ ^/assets/ {   expires 1y;   add_header cache-control public;    add_header etag "";   break; }

finally, make sure test running on server mimics eventual production environment, rails development servers not going provide same responsiveness.


Comments

Post a Comment

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

i'm trying link specific pdf page msoutlook'10 or msword'10, #page=... anchor particularly useful , works fine elsewhere. unfortunately when click [ctr-k] in outlook or winword, links re-formatted assuming unc path. pdf file located on shared drive. using "file:" prefix links open pdf in adobe reader (outside of browser), , "http:" open inside browser. issue seem need open in browser "file:" prefix in order anchor work. know anchors work inside browser. outlook uses windows/explorer default program (based on file extension) seems open in adobe reader neglecting anchor. is aware of solution, link specific page or bookmark of shared-pdf ms outlook and/or winword link? common references: mailermailer.com/...anchor-tags-html-emails campaignmonitor.com/...anchor-links-in-email-newsletters/ stackoverflow.com/...anchor-in-pdf-document
Read more

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

consider code: test = function() { } t = new test(); (var = 0; < 8; i++) { result = t instanceof test; } if change number of iterations 8 9 , loop take 100 times longer complete in latest version of firefox (41.0.1). tested on 2 different pcs , magic limit 8. here jsperf test used: http://jsperf.com/instanceof-8-times-vs-9-times does have idea why might happen? seems specific instanceof . not happen if else object, example check property. note: filed bugzilla bug this. jan de mooij mozilla team has posted details in bugzilla thread . here's simplistic interpretation of highly technical answers: in i < 8 case, firefox smart enough hoist result = t instanceof test; statement out of loop (according tests, doesn't seem omit altogether). in i < 9 case, apparently doesn't optimization . why? reason not clear, related fact 9 iterations threshold above function considered "hot" enough run through jit compiler. i < 8 cas...
Read more

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -

following this guide setup app on digital ocean droplet, not working. site not loading , it's throwing: "gateway time-out". the puma server works, since ps aux | grep puma prints: root 15878 0.0 0.4 376832 2168 ? sl 12:50 0:00 puma 2.13.4 (unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock) [20150930164940] root 15881 0.0 0.7 903676 3692 ? sl 12:50 0:06 puma: cluster worker 0: 15878 [20150930164940] root 24654 0.0 0.1 11748 916 pts/2 s+ 18:00 0:00 grep --color=auto puma my nginx config: user root; worker_processes 1; events { worker_connections 1024; } http { upstream puma { server unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock; } server { listen 80; server_name myapp.com; root /var/www/myapp/current/public; access_log /var/www/myapp/current/log/access.log; error_log /...
Read more