[我在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>
@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”是什么意思?我以为这些来自CDN?
2)有效地加载此CSS和JS代码的最佳方法是什么。
3)应该下载所有这些文件,而不是从我的服务器引用URL吗?
1)对所有静态资产均值使用CDN基本上可以加载您的照片以及引导文件或Google字体。...您可以使用CDN或内容分发网络
例如,您可以使用Amazon s3存储桶以这种方式保存您网站上的照片,当访问者请求您的网站时,它的加载速度更快,因为有2个不同的服务器提供该网站。一个提供html,而CDN负责沉重的图像视频或大的CSS / JS文件。
2)加载CSS和JS文件的最有效方式是异步
3)不确定您的意思吗?但是正确的方法是在rails6及更高版本上使用webpacker