類別 | 學習心得

延遲載入JavaScript加快網頁開啟速度

為了豐富部落格的內容,許多部落客都會使用Google Adsense、部落格觀察、部落軌道、FunP、MyBlogLog … 等網路服務,以上舉的例子都有一個共通性,她們都是使用「JavaScript」,而這些JavaScript都會造成網頁開啟速度緩慢,讓瀏覽者看你的網頁內容可能會東缺一塊、西缺一塊的。

不要讓 JavaScript 拉長你網站的反應時間  如何不要讓 JavaScript 拉長你網站的反應時間?原木剛好看到「網頁開啟速度被一堆Javascript拖垮了?教你修改網頁的好撇步,讓網頁載入速度更快!」這篇文章,該作者就是介紹「延遲載入」的方法,不過步驟似乎比較複雜,而有網友留言貢獻了更簡單的方法,這也就是原木目前使用的方法:

  1. 將原內容改成下面的寫法:
    [code lang=”css”]<div id="yourdivid" style="visibility:hidden;">
    原內容
    </div>[/code]
  2. 在網頁最下方(通常是footer.php對應上面的 div id
    [code lang=”javascript”]<script type="text/javascript">
    document.getElementById("yourdivid").style.visibility="visible";
    </script>[/code]

  原木今天已將新、舊部落格延遲載入JavaScript,載入首頁時間真的是縮短了一些,讀取文章的速度也加快了不少,如果你也是部落客,不妨花點時間修改一下語法,造福你的讀者、粉斯哦!

[poll id=”7″] 

☆★相關文章★☆
使用Facebook Connect將WP與FB完整結合(中)
其實安裝Facebook Connect真的非常簡單,但是原木在安裝過程中卻遇到了問題,就是在登入過程中始終對應不到我Facebook的應用程式,昨天花了一整天的時間研究,終於讓原木找到了問題,解決之後心情快~樂~的~不~得~了~  ^^  原木的問題有二,第1個問題是Facebook韓德爾の原木粉絲專頁,第2個則是Wordpress的 1 Blog Cacher 插件。  關於第1個問題,在我們部落格側邊欄位的「Communities」是利用Highslide JS效果呈現的,其中第7個是顯示我們部落格在Facebook的粉絲,因為有使用 <script type="text/javascript">FB.init("e320a5c35f3157b68b1e5e3f0f6563a9");</script> 語法,而在Facebook Connect中也有設定API金鑰,結果造成同一個頁面出現兩個API金鑰,導致在登入FB時一直指向粉絲的專頁,這個超讓原木抓狂的,想說明明API金鑰跟秘密都設定對了,為何都無法指向我在FB的應用程式,後來原木就利用Java Script另開新視窗,就解決囉!  第2個問題很簡單,換掉 1 Blog Cacher,改用 WP Super Cache,在裝好該插件後,找到部落格根目錄 .htaccess 檔案下面的敘述:[code]RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_).*$[/code]  將她改成:[code]RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_|YOURAPIKEY_user).*$[/code]  其中「YOURAPIKEY」就是輸入你Facebook應用程式的API金鑰,記得後面要加「_user」,這樣在使用Facebook Connect登入時就不會被快取。  原木特將遇到的問題筆記下來,希望能對安裝Facebook Connect的人有所幫助。^^
繼續閱讀
如何在 WordPress 做一個歡迎頁
今天開始來到我們家有一個新的大門了,由於我們有兩個部落格系統,舊的部落格是用 F2cont 架的,新的則是現在使用的 Wordpress,為了讓大家選擇要去我們的哪一個家,所以好友小潘幫我們家設計了一個歡迎頁。  Wordpress 的首頁是抓自己的 index.php,所以大家輸入網址後一定是讀取 index.php,這樣歡迎頁的 index.html 就無法當作第一個頁面來讀取,而 Wordpress 又會一直循環調用 index.php,如果更改 .htaccess 將首頁設定使用 index.html,那麼落格的文章就叫不出來了,怎麼辦呢?很簡單 ... 以下 Step by step: 將下面的代碼增加到根目錄的 .htaccess:[code lang="php"]<IfModule dir_module>DirectoryIndex index.html index.php</IfModule>[/code] 修改 wp-includes/rewrite.php 檔案,找到下面的敘述:[code lang="php"]var $index = ...
繼續閱讀
自動為上傳的圖片加上浮水印
這是原木找了好久終於找到這個方便又實用的Plugin,可以使用圖片或文字當作浮水印,廢言不多說了,來介紹如何安裝使用嚕!  請先下載檔案,解壓縮後放到 wp-content/plugins 並到後台啟用她,之後編輯 wp-admin/includes/media.php 這個檔案,在 // Save the data 前加入下面的 code:[code lang="php"]// For WP WaterMarkMM_Execute_WM( $file, '' );[/code][download id="4"]  爾後每次升級完 Wordpress,記得要再到該檔案加入上面的 Code 喔,不然圖片的浮水印功能會沒有作用喔,這也是原木寫這篇文章的用意之一,提醒自己更新 Wordpress 後要將 Code 加入該檔案。下面放上文字及圖片浮水印的效果:  文字浮水印    圖片浮水印    設定的方法很簡單,原木就不再特別介紹了,有問題的話可以留言給我喔。另外經原木測試1「文字浮水印」只能支援英文,中文會變成亂碼,而2使用「圖片浮水印」,請將 wp-content/plugins/watermark/ 下的 stempel.png 換成您想要加的 ...
繼續閱讀
原木最喜歡的超口愛威秀動畫
我們的電影日都是在京站威秀影城,因為座位坐起來真的很舒服,而且兩邊的座位跟螢幕有個角度,所以即使坐在牆邊也不會有斜眼的問題,在這裡看電影真的是一大享受。  威秀影城在電影播前都會放一段動畫,威秀寶寶真的是超口愛的,動畫劇情的設計也非常有趣,上面這部「起床篇」就是目前最新的動畫,原木超喜歡這一部,每次看到都會讓人的心情一瞬間愉快。  底下再放其他威秀寶寶的動畫,每一部都非常的口愛哦!◎請關手機篇◎撞玻璃篇◎聰明不撞玻璃篇◎過獨木橋篇
繼續閱讀
避免WordPress自動加上nofollow標示
如果你也是部落客,通常在留下評論時,也都會順手將你部落格的網址留下,但偏偏Wordpress都會將你留下的網址,加上nofollow這段敘述,讓搜尋引擎完全不會理會,到底nofollow是什麼東東啊?  nofollow屬性最初是用在網頁層級的中繼標記裡,告訴搜尋引擎不要遵從(即檢索)網頁上的任何對外連結。為了鼓勵大家多多留言,原木怎麼可以讓最毒婦人心的「不要發肉蜜」,讓大家留下的網址白留呢?!況且,大家都喜歡「發肉蜜」啊,呵呵喝 ...  將nofollow敘述拿掉,除了可以利用 「NoFollow Free」外掛,也可以自行修改 wp-includes/comment-template.php 檔案,找到在第 140 行「function get_comment_author_link()」這一段,在第 148 行有個「$return = "<a rel="external nofollow" href="$url">$author</a>";」敘述,將nofollow拿掉就可以嚕,真的是快、狠、準 ~ That's all ~  我們已經拿掉nofollow了,相信對大家網站的 SEO 會有不少幫助,也希望大家多多留言啦! ^^後記  每次 Wordpress 更新都要手動改一次,還真的有點麻煩,所以建議使用外掛,有興趣的朋友可以到 http://wordpress.org/extend/plugins/nofollow-free/ 下載此外掛,若要中文化,可下載 http://images.steachs.com/Files/lang.zip 繁中語系。
繼續閱讀
將WordPress評論Ajax化
這是在《Willin Kan 的博客》這一篇「WordPress 內置嵌套評論專用 Ajax comments」文章挖到的寶,之前我們部落格使用F2cont也有將評論Ajax化,主要是發表評論後不需要再刷新頁面,就可以看到剛剛發表的評論,這樣可以降低系統的Loading,這對部落客真的是國寶級的好物。  有關安裝的步驟很簡單,請先點→這裡←下載程式,解壓縮後將這2個檔案放到你使用佈景的所在目錄,並修改使用佈景的 header.php: 找到[code lang="php"]<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>[/code] 用下面幾行取代:[code lang="php"]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script><?php if ( is_singular() ){ ?><script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/comments-ajax.js"></script><?php } ?>[/code]  以上就完成嚕,如果你佈景的評論樣式夠標準,其它的都不用修改,由於我們部落格佈景的評論樣式不是很標準,所以直接使用安裝方法還是會出問題,而willin大大針對使用 ...
繼續閱讀
利用CSS讓有超連結圖案出現透明效果
今天在「WordPress 研究者日記」看到這篇「CSS透明特效:opacity」的文章,就是利用CSS的opacity語法,讓滑鼠移到有超連結的圖案上時,該圖案會出現透明的效果。  將以下代碼加入到 wp-content/themes/當前使用的佈景主題/style.css 檔案:[code lang="css"]a:hover img{ opacity: 0.55; filter:alpha(opacity=55); /* IE only */}[/code]  說明上面的數值,數值為「1」代表不透明,所以數值越小就越透明,而filter:alpha那段是給IE瀏覽器用的,數值為「100」代表不透明。  ~ That’s all ~
繼續閱讀
快速下載YouTube HD高畫質影片
這是一個超方便又快速下載YouTube HD高畫質影片的方法,是原木在「快速下載YouTube HD 高畫質影片 - YouTubeSnips」這篇文章挖到的寶,到底有多方便有多快呢? 先下載底下的檔案,將「下載 YouTube 影片」的書籤存到瀏覽器「我的最愛」。[download id="19"]  在瀏覽 YouTube 影片時再點「下載 YouTube 影片」書籤。  接著,就可以快速下載YouTube HD 高畫質影片囉!~ That’s all ~
繼續閱讀
使用FFFTP上、下載旅遊照片
FTP 全名為 File Transfer Protocol(檔案傳輸協定),主要是傳輸檔案所使用的協定,明白來說 FTP 就是用來規範電腦之間傳輸檔案的共同協定(規則),透過 FTP 協定就可以很容易讓兩部電腦檔案傳送順利進行。  FTP Client 有很多軟體,比較著名的就屬 CuteFTP 及 Filezilla,前者是付費軟體,後者則是免費的,但今天原木要介紹的是另一套 FFFTP,這是一套免安裝中文版輕巧的FTP軟體,程式不到 500KB,卻包含了 FTP 的基本功能,並且還有檔案續傳的功能,何謂檔案續傳?當你上、下載檔案到一半的時候,突然連線中斷而造成檔案中止傳輸,檔案續傳可以讓你從中斷的地方繼續上、下載,而不需要再重頭開始,非常方便又節省時間。在介紹 FFFTP 使用方法前,請先下載該軟體:[download id="22"]  副檔名7z 是一個壓縮檔,請用免費軟體 7-Zip 來解壓縮,如果沒有這套軟體,請到 http://www.7-zip.org/ 下載 32-bit 或 x64 位元的版本(一般都是下載 ...
繼續閱讀
使用Facebook Connect將WP與FB完整結合(中)
如何在 WordPress 做一個歡迎頁
自動為上傳的圖片加上浮水印
原木最喜歡的超口愛威秀動畫
避免WordPress自動加上nofollow標示
將WordPress評論Ajax化
利用CSS讓有超連結圖案出現透明效果
BLOGROLLS
快速下載YouTube HD高畫質影片
使用FFFTP上、下載旅遊照片