Эффективно загружайте CSS и JS в Rails («Используйте CDN для всех активов c») - PullRequest
Новая
       23

Эффективно загружайте CSS и JS в Rails («Используйте CDN для всех активов c»)

0 голосов
/ 20 февраля 2020

Я запустил анализ на www.webpagetest.org, и он сказал мне это .. 

> Use a CDN for all static assets: 89/100
> 
> FAILED - https://fonts.googleapis.com/css?family=Montserrat:400,700
> FAILED - https://fonts.googleapis.com/css?family=Kaushan+Script FAILED
> - https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic
> FAILED -
> https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700
> FAILED - https://maps.googleapis.com/maps/api/js?key=ABCDEFG=places

Я загружаю эти CSS и JS сценарии следующим образом:

частичный заголовок в мой файл макета 

<HEAD>
  ... code...
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'%>
  <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=ABCDEFG&libraries=places", :defer => "defer" %>
  ... code ...
</HEAD>

application.s css в папке assets / stylesheets 

@import "bootstrap";

/* Font-Awesome CDN */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css');

/* Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
@import url('https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700');

Я пытаюсь оптимизировать загрузку своей страницы,

1 ) Что означает «Использовать CDN для всех активов c»? Я думал, что они приходят из CDN?

2) Как лучше всего эффективно загрузить этот код CSS и JS.

3) Следует загружать все эти файлы вместо ссылка на URL с моего сервера?

1 Ответ

0 голосов
/ 20 февраля 2020

1) Использование CDN для всех активов c означает, в основном, для загрузки ваших фотографий, а также bootstrap файлов или шрифтов Google .... вы можете использовать CDN или сеть распространения контента

Например, вы можете использовать корзину Amazon s3 для сохранения своих фотографий, которые находятся на вашем сайте, таким образом, когда посетитель запрашивает ваш сайт, он загружается быстрее, потому что есть 2 разных сервера, предоставляющих сайт. один обеспечивает html, тогда как CDN отвечает за тяжелые изображения, видео или большие файлы css / JS.

2) наиболее эффективный способ загрузки файлов CSS и JS - асинхронный

3) не уверены, что вы имеете в виду? но правильный путь - использовать webpacker на rails6 и выше

...