Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .ruby-version
Original file line number Diff line number Diff line change
@@ -1 +1 @@
2.6.1
2.7.7
6 changes: 3 additions & 3 deletions Gemfile
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# rubocop:disable LineLength
source "https://rubygems.org"
ruby "2.6.1"
ruby "2.7.7"

# Enforce git to transmitted via https.
# workaround until bundler 2.0 is released.
Expand All @@ -16,7 +16,7 @@ end
gem "actionpack-action_caching", "~> 1.2"
gem "active_record_union", "~> 1.3"
gem "acts-as-taggable-on", "~> 5.0"
gem "acts_as_follower", github: "thepracticaldev/acts_as_follower", branch: "master"
gem "acts_as_follower", github: "forem/acts_as_follower", branch: "master"
gem "addressable", "~> 2.5", ">= 2.5.2"
gem "administrate", "~> 0.11"
gem "ahoy_email", "~> 0.5"
Expand Down Expand Up @@ -122,7 +122,7 @@ group :development, :test do
gem "derailed", "~> 0.1"
gem "erb_lint", "~> 0.0", require: false
gem "faker", git: "https://github.com/stympy/faker.git", branch: "master"
gem "fix-db-schema-conflicts", github: "thepracticaldev/fix-db-schema-conflicts", branch: "master"
gem "fix-db-schema-conflicts", github: "jakeonrails/fix-db-schema-conflicts", branch: "master"
gem "memory_profiler", "~> 0.9"
gem "parallel_tests", "~> 2.27"
gem "pry-byebug", "~> 3.7"
Expand Down
30 changes: 15 additions & 15 deletions Gemfile.lock
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
GIT
remote: https://github.com/stympy/faker.git
revision: 9910aa58d92c018abab25d491191576fcc1a7707
remote: https://github.com/forem/acts_as_follower.git
revision: 06393d3693a1a3d4b390aec4976c8b8f3a81cf01
branch: master
specs:
faker (1.9.1)
i18n (>= 0.7)
acts_as_follower (0.2.1)
activerecord (>= 4.0)

GIT
remote: https://github.com/thepracticaldev/acts_as_follower.git
revision: 288690cd99bc470eaee493fce5bfa9fe23157692
remote: https://github.com/jakeonrails/fix-db-schema-conflicts.git
revision: ae9135e0bb1fb142dd483f883da0064b8be17732
branch: master
specs:
acts_as_follower (0.2.1)
activerecord (>= 4.0)
fix-db-schema-conflicts (3.1.1)
rubocop (>= 0.38.0)

GIT
remote: https://github.com/thepracticaldev/fix-db-schema-conflicts.git
revision: 4172392392e1a8d907f7ab673cb5ddd9a4a31940
remote: https://github.com/stympy/faker.git
revision: 9910aa58d92c018abab25d491191576fcc1a7707
branch: master
specs:
fix-db-schema-conflicts (3.0.2)
rubocop (>= 0.38.0)
faker (1.9.1)
i18n (>= 0.7)

GEM
remote: https://rubygems.org/
Expand Down Expand Up @@ -317,7 +317,7 @@ GEM
faraday_middleware (>= 0.9)
loofah (>= 2.0)
sax-machine (>= 1.0)
ffi (1.9.25)
ffi (1.16.3)
figaro (1.1.1)
thor (~> 0.14)
fission (0.5.0)
Expand Down Expand Up @@ -613,7 +613,7 @@ GEM
connection_pool (~> 2.2)
netrc (0.11.0)
nio4r (2.3.1)
nokogiri (1.10.1)
nokogiri (1.10.2)
mini_portile2 (~> 2.4.0)
notiffany (0.1.1)
nenv (~> 0.1)
Expand Down Expand Up @@ -1082,7 +1082,7 @@ DEPENDENCIES
zonebie (~> 0.6.1)

RUBY VERSION
ruby 2.6.1p33
ruby 2.7.7p221

BUNDLED WITH
1.17.3
8 changes: 8 additions & 0 deletions app/controllers/stories_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,14 @@ class StoriesController < ApplicationController
before_action :set_cache_control_headers, only: %i[index search show]

def index
push_headers = [
"<#{view_context.asset_path('bell.svg')}>; rel=preload; as=image",
"<#{view_context.asset_path('menu.svg')}>; rel=preload; as=image",
"<#{view_context.asset_path('connect.svg')}>; rel=preload; as=image",
"<#{view_context.asset_path('stack.svg')}>; rel=preload; as=image",
"<#{view_context.asset_path('lightning.svg')}>; rel=preload; as=image",
]
response.headers['Link'] = push_headers.join(', ')
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

add_param_context(:username, :tag)
return handle_user_or_organization_or_podcast_index if params[:username]
return handle_tag_index if params[:tag]
Expand Down
6 changes: 3 additions & 3 deletions app/views/layouts/_top_bar.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,19 @@
</div>
<a href="/new" id="write-link" class="cta nav-link write">WRITE A POST</a>
<a href="/connect" id="connect-link" class="nav-link connect-icon" aria-label="Connect">
<%= inline_svg("connect.svg", size: "100% * 100%") %>
<%= image_tag("connect.svg", size: "100% * 100%") %>
<div class="connect-number" id="connect-number"></div>
</a>
<a href="/notifications" id="notifications-link" class="nav-link notifications-icon" aria-label="Notifications">
<%= inline_svg("bell.svg", size: "100% * 100%") %>
<%= image_tag("bell.svg", size: "100% * 100%") %>
<div class="notifications-number" id="notifications-number"></div>
</a>
<div class="navbar-menu-wrapper" id="navbar-menu-wrapper">
<button class="navigation-butt" id="navigation-butt" aria-label="Navigation">
<% if user_signed_in? %>
<div class="nav-profile-image-wrapper"><img alt="" class="nav-profile-image" id="nav-profile-image" /></div>
<% else %>
<%= inline_svg("menu.svg", class: "bars", size: "20% * 20%") %>
<%= image_tag("menu.svg", class: "bars", size: "20% * 20%") %>
<% end %>
</button>
<div class="menubg" id="menubg"></div>
Expand Down
18 changes: 18 additions & 0 deletions case-study.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Case-study оптимизации

## сравнение `HAR`-файлов с `server-push` и без

Отправной точкой работы над проектом стало создание локального корневого сертификата и подписывание им сертификата для localhost. Был установлен nginx, и произведена настройка HTTP2 с включением опции `server-push`.
Для совместимости с локальной системой была обновлена версия Ruby до 2.7.7.

После этого в файле `app/views/layouts/_top_bar.html.erb` были согласно заданию заменены `inline_svg` команды для ряда изображений на стандартный `image_tag`.

В итоге было запущено тестирование главной страницы сайта как с включенной предзагрузкой изображений через команды в заголовке, так и без этой опции.

Результаты были сопоставлены на сайте `https://compare.sitespeed.io/`.
По их результатам можно сделать следующие выводы:
* Для первой загрузки:
* Без принудительной загрузки картинок время отображения страницы отставало: до первого появления элементов на странице прошло сравнительно одинаковое время 0.27-0.3 сек, однако эти же 0.3 сек позволили оптимизированной версии отрисовать страницу на 98%, когда без `server-push` на это потребовалось 0.43 сек.
* Для второй загрузки:
* 0,34 секунды потребовалось версии без оптимизации для отрисовывания первых элементов и 0,4 сек для полной загрузки. Для версии с `server-push` это 0,27 и 0,33 сек соответственно.
* 9-27 мс против 20-43 мс составило время загрузки изображений, которые мы добавили в первоначальный ответ сервера, это видно в разделе `Waterfall` отчета.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

126 changes: 126 additions & 0 deletions nginx.conf
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@

#user nobody;
worker_processes 1;

#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

#pid logs/nginx.pid;


events {
worker_connections 1024;
}


http {
include mime.types;
default_type application/octet-stream;

#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';

#access_log logs/access.log main;

sendfile on;
#tcp_nopush on;

#keepalive_timeout 0;
keepalive_timeout 65;

#gzip on;

server {
listen 8080;
server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {
root html;
index index.html index.htm;
}

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}

# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}

# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}


# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;

# location / {
# root html;
# index index.html index.htm;
# }
#}


# HTTPS server
#
server {
listen 443 http2 ssl;
server_name localhost;

ssl_certificate "/Users/igor.arkhipov/Library/Application Support/mkcert/localhost+2.pem";
ssl_certificate_key "/Users/igor.arkhipov/Library/Application Support/mkcert/localhost+2-key.pem";

#ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:DES-CBC3-SHA:!RC4:!aNULL:!eNULL:!MD5:!EXPORT:!EXP:!LOW:!SEED:!CAMELLIA:!IDEA:!PSK:!SRP:!SSLv:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA';
ssl_prefer_server_ciphers on;

location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
proxy_redirect off;
proxy_pass http://localhost:3000;
http2_push_preload on;
}

# location / {
# root html;
# index index.html index.htm;
# }
}
include servers/*;
}
1 change: 1 addition & 0 deletions sitespeed-result/report_with_preloading.har

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions sitespeed-result/report_without_preloading.har

Large diffs are not rendered by default.