wordpress大概從3.8版本開始會自動加載Google上面的Open Sans字體,并引用CSS樣式。這些字體主要用于顯示W(wǎng)P站點管理員登陸后頂部功能條的字體樣式,而對于國內(nèi)用戶來說,Google會出現(xiàn)經(jīng)常打不開或者訪問速度過慢的情況,加載Google的字體無疑是自尋死路,直接影響站點后臺的打開速度。如果你的模板也加載了Google字體,那么恭喜你:站點訪問者都直接洗洗睡了!
通過觀察代碼可以看到,WP是這樣加載字體的,在script-loader.php(wp-3.9)的580行代碼進行加載。
1<link rel="stylesheet" id="open-sans-css" href="//fonts.googleapis.com/css?2family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&3subset=latin%2Clatin-ext&ver=3.9.1" type="text/css" media="all">
那該怎么去掉呢?方法主要有2個:functions.php過濾
在主題中的functions.php文件末尾加上一下代碼之一即可。此方法僅在前臺有效,在后臺界面無效,因為僅修改主題代碼。
1.代碼一 1// Remove Open Sans that WP adds from frontendif (!function_exists('remove_wp_open_sans')) : function remove_wp_open_sans() { wp_deregister_style( 'open-sans' ); wp_register_style( 'open-sans', false ); } add_action('wp_enqueue_scripts', 'remove_wp_open_sans'); // Uncomment below to remove from admin // add_action('admin_enqueue_scripts', 'remove_wp_open_sans');endif;
2.代碼二
1function remove_open_sans() { wp_deregister_style( 'open-sans' ); wp_register_style( 'open-sans', false ); wp_enqueue_style('open-sans',''); } add_action( 'init', 'remove_open_sans' );
插件過濾
為此還專門有人做了插件來去除字體加載。此方法在前臺和后臺均有效。
1. 插件一
名稱:Remove Open Sans font Link from WP core
地址:http://wordpress.org/plugins/remove-open-sans-font-from-wp-core/
簡介:Installs ‘Remove Open Sans font Link from WP core’ plugin on your wordpress blog, so it will doesn’t load Open Sans font from Google fonts. 移除WP核心的谷歌字體鏈接.
2. 插件二
名稱:Disable Google Fonts
地址:http://wordpress.org/plugins/disable-google-fonts/
簡介:另一個類似的插件
使用GoAgent
如果你在使用GoAgent系統(tǒng)代理,可以在SwitchySharp或者AutoProxy選項里添加切換規(guī)則:
規(guī)則名稱:google-fonts
URL 模式:*://*.googleusercontent.com/*
情景模式:GoAgent
字體
Open Sans字體挺好看的,如果是用國外的主題并且用上這個字體,或者是想保留,可以在本地安裝該字體。將壓縮包里面的文件拷貝到C盤fonts文件夾即可完成安裝。
下載地址:http://xuanfengge.com/demo/201406/Open-Sans.zip
效果預覽:http://www.google.com/fonts/specimen/Open+Sans
分析原因
由于最近谷歌被墻,很難打開,導致站點在引用谷歌上的資源,如字體、jquery等文件時,會出現(xiàn)嚴重超時的情況,最終導致站點打開速度極慢。這個可能是其中的一個原因,但具體是什么,又如何找出根源呢?下面來簡單分析下(Chrome瀏覽器下)
1. 查看網(wǎng)絡連接
站點在未完全打開的情況下,Chrome的左下角會顯示網(wǎng)絡請求的狀態(tài),如“正在解析主機”、“正在等待tieba.baidu.com響應”。如果此時發(fā)現(xiàn)在某個響應等待時間過長(一般是外站資源,如頭像、字體),那這個就是一個拖慢速度的原因。
2. 查看網(wǎng)絡請求
F12或右鍵“審查元素”進入開發(fā)者模式,選擇“Network”,F(xiàn)5刷新頁面,查看戰(zhàn)情的網(wǎng)絡請求。等待完全加載后,查看所有的請求,紅色部分為訪問出錯,未請求到資源,同時可以再該項的Time看到請求到出結果所花費的時間。如果時間過長,也是一個拖慢站點訪問速度的原因。
Chrome開發(fā)者工具
3. 定位根源
根據(jù)上面的介紹,找到訪問過慢的請求,點擊查看詳細內(nèi)容。如出現(xiàn)谷歌字體加載問題,如請求URL為http://fonts.googleapis.com/css?family=Open+Sans&ver=3.9.1。
此時開發(fā)者面板切換到Elements頁面,CTRL+F搜索“Google”或者其他關鍵字,可在代碼中定位這個請求的位置。
4. 文件定位
上面是找到了原因,但是可能代碼并不是在header.php或者index.php里面。那就需要使用編輯器搜索了,在主題中搜索。如使用sublime編輯器,將主題文件夾拖拽到編輯器中,在項目右鍵“Find in Folder”,輸入關鍵字,即可在多文件中定位代碼位置。找到代碼后,注釋相關代碼即可。如:
如找到并注釋代碼(functions.php),可解決出現(xiàn)http://fonts.googleapis.com/css?family=Open+Sans&ver=3.9.1請求的問題:
1//wp_enqueue_style( 'google-font', 'http://fonts.googleapis.com/css?family='.$all_font );
注釋以下代碼(html5lightbox.js)可解決出現(xiàn)http://fonts.googleapis.com/css?family=Armata請求的問題:
1// var fontRef = ("https:" == document.location.protocol ? "https" : "http") + "://fonts.googleapis.com/css?family=Armata";// var fontLink = document.createElement("link");// fontLink.setAttribute("rel", "stylesheet");// fontLink.setAttribute("type", "text/css");// fontLink.setAttribute("href", fontRef);// document.getElementsByTagName("head")[0].appendChild(fontLink);
如果感覺速度不夠快,那就進行更多的優(yōu)化比如CDN加速、緩存、服務器等等優(yōu)化吧
評論(0人參與,0條評論)
發(fā)布評論
最新評論