Category Archives: Web Optimisation

Google Page Speed Prefer asynchronous resources (Facebook)- loads http://connect.facebook.net/en_GB/all.js synchronously.

最近為自己的網頁http://sharechiwai.com 加上了 Facebook social plugin
希望大家給我多一些 Like 多一些我
誰不知 當我使用Google Page Speed我測試 sharechiwai.com的性能時
卻出現了以下的建議

Prefer asynchronous resources – Fetching resources asynchronously prevents those resources from blocking the page load.
Suggestions for this page

The following resources are loaded synchronously. Load them asynchronously to reduce blocking of page rendering.
http://localhost:8080/sharechiwai/lookforhk loads http://connect.facebook.net/en_GB/all.js synchronously.

load http://localhost:8080/sharechiwai/lookforhk loads http://connect.facebook.net/en_GB/all.js synchronously.
是存取facebookJavascript Plugin 的方法所導致的


   <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=277649966574";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        

做了一會兒research 之後找到了解決方法了

解決方法:
原來這個facebook Javascript Object 上有一個async的屬性 property
我們只要把他設定為 true便可以解決
e.g.

js.async=true;

loads http://connect.facebook.net/en_GB/all.js synchronously.“的問題了


   <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.async=true; //<--ASYNC = TRUE
            js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=277649966574";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

Hope you find it useful

How to enable GZip via .htaccess – 在.htaccess 檔案上Enable GZip

在之前的一篇網誌上介紹了如何在Apache / XAMPP上啟用 GZip Compression.

Enable GZip Compression on Apache XAMPP – 在Apache XAMPP 上 啟用 GZip 壓縮

原來在Apache上 Enable了 GZip Compression Module 之後
也需要在Website中的”.htaccess

以下是說給Server看這個網頁會使用GZip 來壓縮內容的script


#檢查 如果 mod_deflate存在的話執行以下script
<IfModule mod_deflate.c>

  # 啟動GZIP
  <IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
      SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
      RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
    </IfModule>
  </IfModule>

  # 以下是上一個網誌中提到的Filter 功能
  #下列的設定是把以下MIME type 的檔案用GZIP處厘
  <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE application/atom+xml \
                                  application/javascript \
                                  application/json \
                                  application/rss+xml \
                                  application/vnd.ms-fontobject \
                                  application/x-font-ttf \
                                  application/xhtml+xml \
                                  application/xml \
                                  font/opentype \
                                  image/svg+xml \
                                  image/x-icon \
                                  text/css \
                                  text/html \
                                  text/plain \
                                  text/x-component \
                                  text/xml
  </IfModule>

</IfModule>

Hope you find it useful

Enable GZip Compression on Apache XAMPP – 在Apache XAMPP 上 啟用 GZip 壓縮

最近都常常留意如何令到網頁載入得更快
看了一些文章說如果先把網頁內容GZip 壓縮了便可以減小Bandwidth的使用了
令到網頁載入得更快

如果大家是使用ApacheXAMPP的話可以嘗試以下的方法

解法方法
開啟你的Apache / XAMPPApache 資料夾
E.g. “D:\xampp\apache\”
之後開啟 “Conf” 資料夾..這個資料夾內儲有和Apache Web Server相關的配置資料的檔案
E.G. “D:\xampp\apache\conf\
打開”httpd.conf” 檔案
之後 嘗試找出這一個module
LoadModule deflate_module modules/mod_deflate.so
mod_deflate

LoadModule filter_module modules/mod_filter.so
mod_filter
mod_filter是一個令Apache可以啟動過濾檔案功能的元件…
啟用了他之後便可以specific那些檔案會Apply 那些功能等等…

刪除前面的 “#” 字串..把他uncomment
之後重新啟動Apache Web Server便可以了

Hope you find it useful