加載引導CSS頁面加載後

谷歌PageSpeed Insights的是建議刪除渲染封鎖CSS：加載引導CSS頁面加載後

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

實現這一目標意味着從引導樣式規則挑選出足夠的片呈現屏內容，然後鏈接在頁面加載完成後引導css文件。

這是很多工作，但可行（我想）。

但是，在頁面加載後鏈接引導程序css時，所有內聯覆蓋程序都將丟失引導程序規則。

任何想法，將不勝感激。

大衛

來源

2016-03-05 Cymro

您可能需要自定義下載：http：//getbootstrap.com/customize/。您可以選擇您需要的功能並禁用其他功能。 – AMACB

在已建立的cdn上使用完整的css文件是一個更好的解決方案，因爲用戶很可能已經在他們的機器上有這個文件（緩存）。自定義版本的bootstrap意味着用戶將不得不下載（不需要）。同樣，即使自定義引導程序也會產生一個文件，這個文件太大而不能包含內聯css，因此，不能解決問題（渲染阻塞） – Cymro

-1

儘量避免使用的CDN的自舉和JS，如果您需要的性能。在你的情況下獲得引導getbootstrap.com/getting-started/的副本，並將其集成到您的css目錄中。

來源

2016-03-05 22:30:23 snowowl78

http://www.w3schools.com/bootstrap/bootstrap_get_started.asp「Many用戶在訪問另一個站點時已經從MaxCDN下載了Bootstrap，因此，當它們訪問您的站點時，它將從緩存中加載，從而加快加載速度。同時，大多數CDN將確保一旦用戶請求文件它將從離他們最近的服務器提供服務，這也會導致更快的加載時間。「 – Cymro

@ Cymro的正確。除了已經說過的之外，使用CDN也意味着您的服務器將節省一些帶寬。 Bootstrap增加了大量的加載 - 它自己的CSS，字體，js和jQuery作爲依賴。所有這些加起來超過200kB（〜60kB gzipped）。感謝CDN，您可以節省每次訪問的轉移次數 – zhirzh

我發現最終的解決方案，我想分享，如果別人需要它。

首先我下載了一個自定義版本的引導CSS作爲AmacB建議上面。我將css複製到excel中，每條規則都有1行。在接下來的文章中，我把一個X每條規則旁邊，在第3列，我寫了一個公式來顯示規則，如果有一個X，並沒有表現出規則如果沒有X。然後，我複製第三列並將其作爲css文件上傳到我的網站。

它的工作當然，但是Css是32kbytes。太多內聯。

所以我開始研究每個規則來決定是否需要它在摺疊內容之上。我覺得沒有必要的規則，我刪除了x，保存了第3列，上傳並檢查了它的工作原理。這個過程花了幾個小時，但最終我把CSS放到了我需要的那些規則上面。生成的文件有大約80條規則。

然後，在我的PHP文件，在頁面頭部加我：

$TheCSS=file_get_contents('/css/bootstrap-reduced.css'); 
echo '<style>'.$TheCSS.'</style>';

我對PageSpeed Insights的比分是99/100。

該解決方案爲反生產的每個頁面添加4kb。所以...頁面加載後，在jquery中，我做了一個鏈接到引導CDN和下一頁加載，我使用該鏈接，而不是插入內聯CSS。

寫VBA代碼來簡化這一過程：

Sub SaveAsTextFile() 
TheFileName = "bootstrap-atf.css" 
ThePath = "C:\Users\MyFolder\" 
Sheets("Sheet1").Columns("C").Select 
Selection.Copy 
Sheets.Add.Name = "Temp" 
Sheets("Temp").Select 
Selection.PasteSpecial Paste:=xlPasteValues, Operation:=xlNone, SkipBlanks:=False, Transpose:=False 
Sheets("Temp").Columns("A").Select 
LastRow = ActiveSheet.UsedRange.SpecialCells(xlCellTypeLastCell).Row 

Set Rng = Selection 
Open ThePath & TheFileName For Output As #1 
For i = 1 To LastRow 
cellValue = Rng.Cells(i, 1).Value 
If cellValue <> "" Then Print #1, cellValue 
Next i 
Close #1 
ActiveWindow.SelectedSheets.Delete 
End Sub

把勾選一堆在Excel工作表的規則旁邊，點擊「保存CSS」按鈕（你可以添加一個按鈕到Excel中工作表），規則保存爲一個名爲bootstrap-atf的css文件。css（atf =高於倍數）

大大簡化了試錯過程。

來源

2016-03-14 18:26:25 Cymro

我會從CDN網頁內容後，使用JS加載引導，然後使用這個在線工具來提取關鍵路徑CSS： https://jonassebastianohlsson.com/criticalpathcssgenerator/ （或者你可以用節點或PhantomJS本地使用相同的工具：https://github.com/pocketjoso/penthouse）

提取的CSS將被最小化並放置在頁眉中。

來源

2017-07-20 20:29:50

加載引導CSS頁面加載後

回答

相關問題