iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
1

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

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


  1. performance調教
    利用GTMetrix網站分析出幾個可以改進的地方,任何網站都可以透過這個線上tool分析前端performance,以及它建議那些地方可以調整優化。
    https://ithelp.ithome.com.tw/upload/images/20191012/20005722aqWTihN0KW.png

(1)Minimize redirects
https://ithelp.ithome.com.tw/upload/images/20191012/20005722UTsKNhX4SN.png
最小化導轉次數,也就是盡量避免一個點擊後導轉到另外一頁,中間有過多的轉址。
但從GTMetrix分析敝公司網站,大部分都是外廣的埋code,很難去改變3rd party廠商程式碼轉址的code,所以針對這一點沒有改進優化的plan。

(2)Defer parsing of JavaScript
延遲載入Javascript的時間,比如對src js的檔案,加上async或者defer。
https://ithelp.ithome.com.tw/upload/images/20191012/200057229v36TBGdqI.png
https://ithelp.ithome.com.tw/upload/images/20191012/20005722pee6Xp2LVi.png
async會下載js後先執行,且執行js同時也繼續載入頁面其他內容及執行其他js。
defer是要等整個頁面內容都下載及分析完成後才會執行該js,類似於把js放在頁尾的情況。
通常這兩個都是針對不重要的外廣程式碼,以不影響原本站台主要內容為主。

(3)Leverage browser caching
https://ithelp.ithome.com.tw/upload/images/20191013/20005722WjDTOOr5RX.png

快取控制,前幾篇講前端的內容有提到,我們可以透過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大小的圖片。
https://ithelp.ithome.com.tw/upload/images/20191013/20005722j8F7aUH8ez.png


  1. 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);
}

  1. 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

https://www.etmall.com.tw/DeMon-全效黃金蜂王面膜X12盒-加贈-任天堂-Nintendo-Switch-Lite-主機-台灣公司貨-1部/i/2430894
https://www.etmall.com.tw/i/2430894

各種growth hacker技巧,黑帽seo等增進網站的排名與搜尋能見度,都是前端可以涉獵的。
growth hacker


前端有點比後端更重要的,就是細心度要夠,畢竟隨意的改動都會影響到用戶直接看到的畫面,不得不仔細。

就是因為這麼直接,所以前端很容易被高下立判。

我曾經跟團隊成員說,程式碼不要亂寫,每一行code每一個字都有意義,不是因為改了會動所以這樣就好,而是要搞清楚為什麼這樣改會解決這個問題!

永遠都要問為什麼。

千萬別烙下了別人對你的評價是: 學藝不精


上一篇
[破] 前端工作實務經驗分享(一)
下一篇
[破] 未見離時是何時,此時無招勝有招
系列文
30天全端手把手學徒計畫-前後端整合之旅33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言