mirrors/notebook
3
0
Fork 0
mirror of https://github.com/indentlabs/notebook.git synced 2025-10-26 11:19:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimize javascript load times

Browse Source 
Our application JS is bloated with minified libraries, while our actual
application Javascript barely amounts to more than two hundred lines.
I propose removing these libraries from our sass file, and instead
load them as separate resources in `<link>` and `<script>` tags.

This has several advantages:

 - By using common CDNs, users are likely to have many of these libraries
   cached already.
 - Even if the files aren't cached, the CDN is likely to deliver them
   faster.
 - We can use the HTML5 'async' attribute to load these libraries
   asynchronously, so users aren't held up while they download.
 - Our fully compiled application JS is much, much smaller, which
   reduces the load on our host.

Also, on the topic of load times, I realized that in #152 that one of the
images was a PNG, not a JPG. I had tried optimizing the image, but I didn't
realize that it wasn't a JPG like the others. Here, I converted it to a JPG,
and it is significantly smaller, and it is visually unchanged.

I'm having some difficulty testing on my local machine, so I would appreciate
some additional manual testing before merging this.
This commit is contained in:
Robert Richter 2016-11-02 23:41:00 -05:00
parent 9451c60d6f
commit 7dcf798f8a
No known key found for this signature in database
GPG Key ID: BEC39BF873A0103B
13 changed files with 29 additions and 17044 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gemfile
View File

@ -26,8 +26,6 @@ gem 'dateslices'
# Javascript
gem 'coffee-rails'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'rails-jquery-autocomplete'
# SEO

10
Gemfile.lock
View File

@ -148,12 +148,6 @@ GEM
guard (~> 2.0)
rubocop (~> 0.20)
i18n (0.7.0)
jquery-rails (4.2.1)
rails-dom-testing (>= 1, < 3)
railties (>= 4.2.0)
thor (>= 0.14, < 2.0)
jquery-ui-rails (5.0.5)
railties (>= 3.2.16)
json (1.8.3)
libv8 (3.16.14.15)
listen (3.1.5)
@ -358,8 +352,6 @@ DEPENDENCIES
guard
guard-minitest
guard-rubocop
jquery-rails
jquery-ui-rails
material_icons
medium-editor-rails
meta-tags
@ -392,4 +384,4 @@ DEPENDENCIES
uglifier (>= 1.3.0)
BUNDLED WITH
1.13.2
1.13.6

BIN
app/assets/images/landing/screenshot.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 225 KiB

BIN
app/assets/images/landing/screenshot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 MiB

8
app/assets/javascripts/application.js
View File

@ -10,14 +10,6 @@
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-ui/autocomplete
//= require autocomplete-rails
//= require cocoon
//= require medium-editor
//= require Chart.bundle
//= require chartkick
//= require_tree ../../../vendor/assets/javascripts
//= require_tree .

3
app/assets/stylesheets/application.css
View File

@ -9,9 +9,6 @@
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require jquery-ui
*= require material_icons
*= require medium-editor/medium-editor
*= require medium-editor/themes/bootstrap
*= require_tree .
*/

18
app/views/layouts/_common_head.html.erb Normal file
View File

@ -0,0 +1,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application' %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" integrity="sha256-fGJODaGYSINeMscXSbyu3k+sCt9ON9XOpsVOcvco3Qg=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script async src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ujs/1.2.2/rails.min.js" integrity="sha256-BbyWhCn0G+F6xbWJ2pcI5LnnpsnpSzyjJNVtl7ABp+M=" crossorigin="anonymous"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js" integrity="sha256-pVJ6toFhRjat2LSvxugXvMnNDp33i00nfn0CpPXZevs=" crossorigin="anonymous"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.6/lodash.min.js" integrity="sha256-BWnUqM2wJJk2qUy9kUxldWF2drzn2awHUNcmMy87bDQ=" crossorigin="anonymous"></script>
<%# <title> is set in _seo.html.erb %>
<%= render 'layouts/favicon' %>
<%= javascript_include_tag 'application' %>
<%= render 'layouts/seo' %>

12
app/views/layouts/admin.html.erb
View File

@ -1,15 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title><%= content_for?(:title) ? yield(:title) : 'Notebook' %></title>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<%= render 'layouts/common_head' %>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js" integrity="sha256-1uH5nQ+1cUZEU9YOfMzc9rapsWyuGtvKPpvKN9xDgug=" crossorigin="anonymous"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/chartkick/2.1.0/chartkick.min.js" integrity="sha256-Nux9AlQvMarSN0Lk52PcKRlezOXTqHGlZRFgBJ7UXyY=" crossorigin="anonymous"></script>
</head>
<body>

15
app/views/layouts/application.html.erb
View File

@ -1,20 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<%# <title> is set in _seo.html.erb %>
<%= render 'layouts/seo' %>
<%= render 'layouts/favicon' %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= render 'layouts/common_head' %>
</head>
<body data-in-app="true">

11
app/views/layouts/editor.html.erb
View File

@ -1,15 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Notebook</title>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.22.1/css/medium-editor.min.css" integrity="sha256-R45gjjgTM82XinRpA4xKOL00zJ2/ajOSjY3tvw5JaDM=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.22.1/css/themes/bootstrap.min.css" integrity="sha256-IAkbHl+TfLeobqAknNEdwDbXIW8A0Rj7GEftvOJa/LI=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<%= render 'layouts/common_head' %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.22.1/js/medium-editor.min.js" integrity="sha256-Q35a6YaW9okg2cZSdp9fcxRE33VKe3rp1mX1uf1Q85M=" crossorigin="anonymous"></script>
</head>
<body>

10
app/views/layouts/landing.html.erb
View File

@ -1,15 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title><%= content_for?(:title) ? yield(:title) : 'Notebook' %></title>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<%= render 'layouts/common_head' %>
</head>
<body>

2
app/views/main/index.html.erb
View File

@ -198,7 +198,7 @@
</h5>
</div>
<div class="hero-container">
<%= image_tag 'landing/screenshot.png', class: 'hero-image'%>
<%= image_tag 'landing/screenshot.jpg', class: 'hero-image'%>
</div>
</div>

16982
vendor/assets/javascripts/lodash-4.16.4.js vendored
View File

File diff suppressed because it is too large Load Diff