[破] 前端工作實務經驗分享(二)

第 11 屆 iThome 鐵人賽

DAY 28

Software Development

30天全端手把手學徒計畫-前後端整合之旅系列第 28 篇

11th鐵人賽 performace chrome developer tool tracking code seo

Ivan

團隊膠原錠與葉黃素

2019-10-13 00:37:12

2470 瀏覽

繼續上篇的經驗分享，再分享三個主題。

這也是之前在前端技能突破上，沒有詳細說明的。

performance調教
利用GTMetrix網站分析出幾個可以改進的地方，任何網站都可以透過這個線上tool分析前端performance，以及它建議那些地方可以調整優化。

(1)Minimize redirects

最小化導轉次數，也就是盡量避免一個點擊後導轉到另外一頁，中間有過多的轉址。
但從GTMetrix分析敝公司網站，大部分都是外廣的埋code，很難去改變3rd party廠商程式碼轉址的code，所以針對這一點沒有改進優化的plan。

(2)Defer parsing of JavaScript
延遲載入Javascript的時間，比如對src js的檔案，加上async或者defer。

async會下載js後先執行，且執行js同時也繼續載入頁面其他內容及執行其他js。
defer是要等整個頁面內容都下載及分析完成後才會執行該js，類似於把js放在頁尾的情況。
通常這兩個都是針對不重要的外廣程式碼，以不影響原本站台主要內容為主。

(3)Leverage browser caching

快取控制，前幾篇講前端的內容有提到，我們可以透過nginx server針對特定檔案設定快取時間，用以決定該類型檔案多久向server更新一次。

比如針對圖片檔案cache一天

location ~*  \.(jpg|jpeg|gif|png|svg)$ {
    expires 1d;
}

敝網站分析出來很多都是外廣的js檔案，該檔案是在外廣公司自己架設的server，因此我們無法控制它cache時間；或者可以先把外廣的js先不定時自動載到敝公司站台的server，client端再改成去load敝公司網站上的外廣js，這樣我們就可以自己做cache控制。

(4)Serve scaled images
圖片應該盡量避免縮放，而是在server上就是放置剛好符合client端要使用大小的圖片。
比如我們之前針對mobile版本的首頁-影音區塊的商品圖片改抓S size大小的圖片。

tracking code追蹤碼
外廣的追蹤碼各家有各家的作法，這邊提及最普遍使用的google analytics。

這部份也是之前有介紹過使用Promise確保GA有在指定時間範圍內被送出，不然超過時間就要放棄傳送追蹤碼，畢竟網站本身內容的順利呈現，才是對客戶最重要的。

//ga傳送參數主要為category/action/label
(function() {
    sendGaTracking = function(tracking, link) {
        const sendingOptions = {
            eventCategory: String.format('Web_{0}', tracking.category),
            eventAction: String.format('Web_{0}', tracking.action),
            eventLabel: String.format('Web_{0}', tracking.label)
        }

        const PromiseGA = new Promise((resolve, reject) => {
            if (typeof ga == 'undefined') {
                resolve()
            } else {
                ga('send', 'event', {
                    ...sendingOptions,
                    hitCallback: () => {
                        resolve()
                    }
                })
            }
        })
    }
})()

然後透過設定class name的方式，確認它是否要在點擊的當下傳送ga資料(有sendGA的代表要送ga)，當點擊該連結時程式會自動抓取該html節點下的category/action/label，並跑上面的程式將ga資料送出。

<li>
    <a href="/" class="sendGA" data-category="All_TopLeft" data-action="All_TopLeft_首頁" data-label="All_TopLeft_首頁">首頁</a>
</li>

// 綁定class name sendGA
$(document).ready(function () {
    $(document).on('click', '.sendGA', function () {
        utilityJS.cancelBubble(event);
        sendGA(this);
    })
});

//送出ga
function sendGA(that) {
    var target = $(that),
        link = target.attr('href') || '',
        trackingInfo = {
            category: target.data('category'),
            action: target.data('action'),
            label: target.data('label'),
        };
    sendGaTracking(trackingInfo, link);
}

seo(搜尋引擎最佳化)設定

(1) meta data / canonical 和 alternate:

<meta name="location" content="Taiwan" />
<meta name="author" content="ETMall東森購物" />
<meta name="subject" content="ETMall東森購物" />
<meta name="language" content="Tradition Chinese" />
<meta name="abstract" content="ETMall東森購物" />
<meta name="copyright" content="本網頁著作權屬ETMall東森購物網, All Rights Reserved" />
<meta name="designer" content="ETMall東森購物" />
<meta name="publisher" content="ETMall東森購物" />
<meta name="distribution" content="Global" />
<meta name="company" content="ETMall東森購物" />

    <link rel="canonical" href="https://www.etmall.com.tw" />
    <link rel="alternate" href="https://m.etmall.com.tw" media="only screen and (max-width:640px)" />

canonical標記用於在針對網站中所有重複的網頁，seo計算都指向同一個標準網頁，加強該標準網頁的seo。同時製作AMP(Accelerated Mobile Pages)頁加強seo時，在AMP頁就會冠上canonical指向非AMP頁。

alternate標記用於桌機版/行動版/APP版互相指向對方(各為獨立網站，非RWD)，以方便瀏覽器知道什麼狀況下應該導到相對應的網址。比如在max-width:640px設定下，640px寬度的螢幕就會指向行動版的網站。

(2)<h1><h2>tag/<img>中的alt
const showH1Tag = <h1 className="n-is--hide">{keyword}</h1>

(3)URL SEO
使用中文網址對應到英文網址，增加網站SEO