maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[deploy] Experiment with the removal of inline critical path css (#11027)

Browse source 
* Experiment with the removal of inline critical path css

* Fix up tests, remove reference to deleted file

* Change docs

* Fix typo
This commit is contained in:
Ben Halpern 2020-10-22 19:22:28 -04:00 • committed by GitHub
parent 429d9fb947
commit 6fac74b741
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 18 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/initializePage.js
View file

@ -1,5 +1,5 @@
/*
global initializeLocalStorageRender, initializeStylesheetAppend, initializeBodyData,
global initializeLocalStorageRender, initializeBodyData,
initializeAllChatButtons, initializeAllTagEditButtons, initializeUserFollowButts,
initializeBaseTracking, initializeTouchDevice, initializeCommentsPage,
initializeArticleDate, initializeArticleReactions, initNotifications,
@ -46,7 +46,6 @@ function callInitializers() {
initializeArticleDate();
initializeArticleReactions();
initNotifications();
initializeStylesheetAppend();
initializeCommentDate();
initializeCommentDropdown();
initializeSettings();
@ -83,6 +82,5 @@ function callInitializers() {
function initializePage() {
initializeLocalStorageRender();
initializeStylesheetAppend();
callInitializers();
}

10
app/assets/javascripts/initializers/initializeStylesheetAppend.js.erb
View file

@ -1,10 +0,0 @@
function initializeStylesheetAppend() {
if (!document.getElementById("main-head-stylesheet")){
var link = document.createElement('link');
link.type = 'text/css'
link.id = "main-head-stylesheet"
link.rel = 'stylesheet'
link.href = '<%= stylesheet_url 'minimal' %>';
document.head.appendChild(link);
}
}

4
app/assets/stylesheets/user-profile-header.scss
View file

@ -28,10 +28,6 @@
margin-left: 3%;
text-align: center;
width: 94%;
&.query-header-text {
font-size: calc(0.9vw + 28px);
font-weight: 500;
}
img {
max-height: calc(3vw + 33px);
max-width: calc(3vw + 33px);

113
app/views/layouts/_styles.html.erb
View file

@ -1,103 +1,10 @@
<% cache "base_inline_styles_#{@story_show}_#{@article_index}_#{@home_page}_#{@article_show}_#{view_class}_#{@notifications_index}_#{@tags_index}_#{@reading_list_items_index}_#{@history_index}_#{ApplicationConfig['RELEASE_FOOTPRINT']}_#{user_signed_in?}_#{@shell}", expires_in: 8.hours do %>
<% if @shell %>
<style>
<% Rails.application.config.assets.compile = true %>
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
<%= Rails.application.assets["views.css"].to_s.html_safe %>
<%= Rails.application.assets["minimal.css"].to_s.html_safe %>
</style>
<% elsif @story_show %>
<style>
<% Rails.application.config.assets.compile = true %>
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
<%= Rails.application.assets["views.css"].to_s.html_safe %>
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
<% if @article_show %>
<%= Rails.application.assets["comments.css"].to_s.html_safe %>
<%= Rails.application.assets["ltags/LiquidTags.css"].to_s.html_safe %>
<% else %>
<%= Rails.application.assets["podcast-episodes-show.css"].to_s.html_safe %>
<%= Rails.application.assets["comments.css"].to_s.html_safe %>
<% end %>
</style>
<% elsif @article_index %>
<style>
<% Rails.application.config.assets.compile = true %>
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
<%= Rails.application.assets["views.css"].to_s.html_safe %>
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
<%= Rails.application.assets["articles.css"].to_s.html_safe %>
<%= Rails.application.assets["buttons.css"].to_s.html_safe %>
<%= Rails.application.assets["widgets.css"].to_s.html_safe %>
<%= Rails.application.assets["preact/sidebar-widget.css"].to_s.html_safe %>
<% unless @home_page %>
<%= Rails.application.assets["user-profile-header.css"].to_s.html_safe %>
<%= Rails.application.assets["sidebar-data.css"].to_s.html_safe %>
<%= Rails.application.assets["index-comments.css"].to_s.html_safe %>
<% end %>
</style>
<% elsif @notifications_index || @reading_list_items_index || @history_index %>
<style>
<% Rails.application.config.assets.compile = true %>
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
<%= Rails.application.assets["views.css"].to_s.html_safe %>
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
<%= Rails.application.assets["readinglist.css"].to_s.html_safe %>
<%= Rails.application.assets["articles.css"].to_s.html_safe %>
<%= Rails.application.assets["buttons.css"].to_s.html_safe %>
<%= Rails.application.assets["widgets.css"].to_s.html_safe %>
<%= Rails.application.assets["comments.css"].to_s.html_safe %>
<%= Rails.application.assets["notifications.css"].to_s.html_safe %>
<%= Rails.application.assets["user-profile-header.css"].to_s.html_safe %>
<%= Rails.application.assets["ltags/LiquidTags.css"].to_s.html_safe %>
</style>
<% elsif view_class.start_with? "comments" %>
<style>
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
<%= Rails.application.assets["views.css"].to_s.html_safe %>
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
<%= Rails.application.assets["comments.css"].to_s.html_safe %>
<%= Rails.application.assets["ltags/LiquidTags.css"].to_s.html_safe %>
<% if view_class.include? "comments-settings" %>
<% end %>
</style>
<% elsif view_class.include?("registrations") || @new_article_not_logged_in %>
<style>
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
<%= Rails.application.assets["views.css"].to_s.html_safe %>
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
</style>
<% elsif view_class.include? "listings-" %>
<style>
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
<%= Rails.application.assets["views.css"].to_s.html_safe %>
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
<%= Rails.application.assets["listings.css"].to_s.html_safe %>
</style>
<% elsif view_class.include? "credits-" %>
<style>
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
<%= Rails.application.assets["views.css"].to_s.html_safe %>
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
<%= Rails.application.assets["credits.css"].to_s.html_safe %>
</style>
<% elsif view_class.include? "videos-index" %>
<style>
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
<%= Rails.application.assets["views.css"].to_s.html_safe %>
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
<%= Rails.application.assets["video-collection.css"].to_s.html_safe %>
</style>
<% elsif view_class.include? "badges-index" %>
<%= stylesheet_link_tag "crayons", media: "all" %>
<%= stylesheet_link_tag "views", media: "all" %>
<%= stylesheet_link_tag "minimal", media: "all" %>
<style>
<%= Rails.application.assets["badges.css"].to_s.html_safe %>
</style>
<% else %>
<%= stylesheet_link_tag "crayons", media: "all" %>
<%= stylesheet_link_tag "views", media: "all" %>
<%= stylesheet_link_tag "minimal", media: "all" %>
<% end %>
<% end %>
<%# We used to inline a good majority of our CSS %>
<%# We are currently testing a simpler method of just using "traditional" render-blocking CSS %>
<%# The trade-off is the potential to render without blocking the page %>
<%# But if we in-line everything we lose the ability to cache assets for repeat visitors %>
<%# This is a production test to see how this might affect UX and/or SEO %>
<%= stylesheet_link_tag "crayons", media: "all" %>
<%= stylesheet_link_tag "views", media: "all" %>
<%= stylesheet_link_tag "minimal", media: "all" %>

10
docs/technical-overview/architecture.md
View file

@ -22,14 +22,16 @@ We also use server-side caching: [Rails caching][rails_caching]. If you see
`Rails.cache` or `<%= cache ... %>`, this is code affected in production by
caching.
## We use inline CSS and deferred scripts for usage performance improvements
## We Mostly defer scripts for usage performance improvements
To avoid blocking the initial render, we frequently write critical CSS inline,
and we use the `defer` attribute to accelerate page loads. This practice results
in a faster page load, and doesn't leave users waiting on heavy assets. However,
To avoid blocking the initial render, we use the `defer` attribute to
accelerate page renders. This practice results in a faster page load,
and doesn't leave users waiting on heavy assets. However,
this practice limits our ability to manipulate layout with JavaScript. As a
rule, you should avoid relying on JavaScript for layout when working on Forem.
We have also experimented with different techniques involving inline CSS
## We attempt to reduce our bundle size
We use [PreactJS](/frontend/preact), a lightweight alternative to ReactJS, and

2
spec/requests/stories_index_spec.rb
View file

@ -262,7 +262,7 @@ RSpec.describe "StoriesIndex", type: :request do
describe "GET query page" do
it "renders page with proper header" do
get "/search?q=hello"
expect(response.body).to include("query-header-text")
expect(response.body).to include("=> Search Results")
end
end