以上CSS是必要的邪惡？

我覺得Google Pagespeed Insight有時候很可笑。它說，優化CSS的交付....說延期腳本，移動到頁腳，內聯樣式等等等等......雖然有很多的建議說，不要內聯CSS。無論如何，我嘗試了他們的腳本以上CSS是必要的邪惡？

</noscript> 
<script> 
    var loadDeferredStyles = function() { 
    var addStylesNode = document.getElementById("deferred-styles"); 
    var replacement = document.createElement("div"); 
    replacement.innerHTML = addStylesNode.textContent; 
    document.body.appendChild(replacement) 
    addStylesNode.parentElement.removeChild(addStylesNode); 
    }; 
    var raf = requestAnimationFrame || mozRequestAnimationFrame || 
     webkitRequestAnimationFrame || msRequestAnimationFrame; 
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); 
    else window.addEventListener('load', loadDeferredStyles); 
</script>

我也嘗試把CSS鏈接放在代碼的腳下。但谷歌仍然大喊「摺疊內容之上」！而且，推遲CSS是搞亂了最初的渲染，頁面看起來像一個乞丐，直到整個事情加載！

我知道他們說...'在摺疊CSS之上的內聯關鍵字'並將所有其他內容推遲。仍然是一個令人沮喪的努力，以獲得正確的方法。

我的查詢是，是否會影響我的搜索引擎優化，如果我讓CSS在頭部分？並忽略'在摺疊之上'的問題？因爲即使加載需要時間，也是這樣，至少它會像一個體面的頁面加載！無論如何，我的CSS並不是很大。

第二個問題是js。我無法獲得像min.js這樣的CDN js，可以兌現或延期...嘗試我可能的任何...

總結基本問題 - 什麼是快速，簡單和最佳的優化CSS和JS對於搜索引擎優化...這將是跨平臺/瀏覽器友好，是否真的是這樣一個大問題？！

我的網站是www.landshoppe.com供您參考

來源

2016-07-31 user3526204

好吧，你已經幾件事情會在這裏。

首先，您需要採取諸如頁面速度洞察力之類的工具來告訴您建議。他們是自動工具，可以做一些基本的分析，建議潛在的改進。這並不是說他們100％準確或適合您的網站。

接下來你需要同樣冷靜下來對SEO的影響。速度對用戶來說很重要，所以搜索引擎會將速度作爲衆多因素之一。所以是的，改善它可以改善SEO。但也有成百上千的其他因素，所以不要太注意一個，不利於你希望你的視線如何工作。例如，如果重構代碼以利用網頁洞察力所提示的每一次速度改進，都會將您的網絡加載時間縮短0.1秒，但意味着發佈內容現在需要軟件開發人員1周的時間來完成，然後我會說您擁有平衡錯誤。速度往往是一種負面影響，而不是積極的影響：沒有人會去一個沒有有趣內容的快速網站，但無論內容有多有趣，人們都會被一個緩慢的網站推遲。

然後是瀏覽器如何處理內容。這是一個複雜的話題，有許多微妙之處和細微差別，但將其作爲一個快速，粗略的介紹：

基本上CSS在遇到時呈現阻塞。公約是把它放在<HEAD>標籤中，所以它是由於這個原因加載的第一件事情之一。如果頁面會導致一個無風格的內容（FOUC），儘管某些瀏覽器可能足夠聰明，以至於無論如何都會加載它，但將它放到頁腳中。所以基本上這沒有幫助。

將它從標準HTML鏈接移動到JavaScript負載而不是強制執行此操作。所以也沒有幫助。

Javascript類似地呈現阻塞（除非它被標記爲異步）並且更糟 - 瀏覽器等待運行該javascript以查看它在文檔繼續前對文檔做了什麼，因爲它可能完全改變頁面，所以沒有意義繼續直到我們知道它將要做什麼爲止。

什麼工具，如網頁的見解通常是指這是直接通過在<STYLE>標籤實際CSS內聯的關鍵CSS在<HEAD>標籤，然後異步加載完整的CSS文件（即非繪製阻擋時尚）通過JavaScript。你似乎只做了後面的部分，而不是兩部分 - 因此瀏覽器無法儘快繪製內容，如果是這樣，它最初顯示爲無風格。請注意，內聯CSS有一些缺點（請參見my blog post on this，如果這看起來不太像無恥的插件！）。

您的網站是相當快的加載（根據www.webpagetest.org 3.5秒）。它可以得到改進，理想情況下，你應該在兩秒鐘之內 - 儘管越快越好，如果你能得到它甚至可以得到它（注意上面的警告，它不是所有的一切，並結束所有的一切）。

看着your page load waterfall你正在加載你的HTML，然後你的圖像，然後你的渲染阻塞JS，然後頁面第一次繪製，然後加載CSS，最後加載頁面完全。這是錯誤的。首先加載對你的頁面至關重要的東西（也就是你的HTML，你的CSS，或者你的字體），然後假設它們對於頁面的第一個視圖不是至關重要的，然後把它們留給你（即你的圖像和你的javascript）。

我建議搬回到普通的CSS文件的鏈接 -前將<HEAD>標籤，您的JPG文件（所以他們優先），讓你的JS異步（除非它的關鍵你的頁面），看如何改善加載時間。然後考慮內聯CSS（如上所述，性能好，但有些不利，並增加了複雜性）。

爲了讓您的JS異步簡單地改變這樣的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" data-pagespeed-orig-type="text/javascript"></script>

要這樣：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" data-pagespeed-orig-type="text/javascript" async></script>

還要考慮HTTP/2，減少了瀑布的衝擊發佈典型的HTTP/1.1 - 但這是一種相當新的技術，只有最新版本的Web服務器才支持，並且還需要您的網站尚未使用的HTTPS，因此目前是相當高級的話題。

來源

2016-07-31 20:09:34

哇。這是一個很好的解釋，@Bazza！謝謝。它對我有意義！我正在考慮將CSS移回頭部。無論如何，Internet Explorer根本就不會呈現我的CSS！我絕對會遵循上述所有內容並更新你。再次感謝！ – user3526204

我已將CSS鏈接移至頭部。但是我不得不刪除

以上CSS是必要的邪惡？

回答