2017-02-26 105 views
5

我看過一噸的教程和「修復」暫緩或異步加載CSS ... 3小時後和一個巨大的頭痛我要睡覺....封鎖CSS資源

谷歌網頁速度測試:您的頁面有3個阻止CSS資源。這會導致渲染頁面延遲。

香港專業教育學院讀的JavaScript方法,jQuery方法和一噸的答案各地的網...感覺升技愚蠢有人可以請lamens解釋到底如何讓這些負載,而無需使用內聯CSS ...

<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="css/custom.min.css" rel="stylesheet" type="text/css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
+0

您是否嘗試過在頁面加載或頁面速度測試後應用樣式? – guest271314

+0

請問你能更具體嗎?對不起,我做了我的網站www.zachnewberry.com,但我不是一個網站管理員以任何方式我是一個低市場營銷預算的屋頂:P –

+0

如果你關心的是* oogle頁面速​​度測試,你可以在頁面後加載'css'資源被加載;那是在DOMContentLoaded和window負載事件的派發之後。爲什麼* oogle網頁速度測試對你很重要? – guest271314

回答

0

我有一些渲染阻塞文件的經驗。所以我分享它希望有所幫助,但你應該知道解決這個問題有點棘手,並不像你想的那樣直截了當。首先問自己這三個問題:

第一:您的內容是否優先?
第二:你用WordPress嗎?
如果你這樣做
三:你確定你還沒有安裝一些干擾插件嗎?

首先:內容優先級的HTML5語義是必不可少的,但有可能使用它們錯誤。例如,像側欄這樣的元素可能在摺疊內容的上方可見,但它不被視爲摺疊的上方。你知道渲染阻塞意味着:加載頁面需要的東西在正確的時間不存在,它應該等待。不需要的元素可能會導致這種情況。

第二:如果您使用WordPress並且已經爲它購買了一些主題,那麼可能您的主題不是標準。問題可以解決,但不值得,需要時間,你應該考慮下一個主題更新。改變你的主題是我認爲最簡單的,但是糾正它是可能的。但是如果你使用一些靜態頁面,儘可能快地調用CSS文件。

三:最近我對所有的CSS和JavaScript文件都有這樣的問題。這是由於使用插件來延遲加載圖像。它搞砸了一切,我停用了它並解決了問題。它推遲圖像加載和獲得一些優勢,但推遲總頁面加載下載所有文件,更多缺點比優點!通過你的插件尋找可能有影響力的事物。


我仍然有一個呈現屏蔽CSS,但我正在處理它。我使用插件來合併CSS文件,並且渲染阻塞是由此造成的。我儘可能地消除插件,並在兒童主題中構建他們的能力以減少CSS文件請求,然後我可以停用此合併插件。

+0

我不使用wordpress,內容不是針對着陸頁「priotized」的。我相信這是因爲文本/代碼比例 –

+0

@zachnewberry如果你不介意的話,我可以查看你的頁面。那麼儘快調用CSS文件呢?你有可能嗎? – ata

+0

當然,https://www.zachnewberry.com是該網站。如果你想看看一些消息來源,請給我發一封電子郵件zach(at)zachnewberry.com –