2018年SEO八招在這(2)你的網頁夠快嗎?

-
2018年SEO八招在這(2)你的網頁夠快嗎?


 

SEO中,速度速度肯定也會改變一切,不管你做得再精美,超過三秒使用者就走啦!

 

儘管依據 Ahrefs 在 2016 年的 Google 搜尋結果發現，網頁 loading 時間不一定跟 Google 排名成正比。但是根據 Google 的官方統計資料顯示，當一個網站的 loading 速度超過三秒時，有 53% 的使用者會跳出這個網頁。所以 SEO 應該盡量讓網頁 loading 的速度在 2 秒之內。

想想看，當你在 Google 搜尋結果頁面點進一個網頁，結果過了 3 秒還顯示不出內容。你是否會跳出並回到搜尋頁面，看另一個頁面呢?

其實不論你網頁做得如何美輪美奐、介面設計的多麼人性化、網頁內容多麼吸引人，只要網頁開啟的速度太慢，一切都歸零！過去曾經炫翻天的 Flash 網頁特效，因為會拖累網站的 loading 速度，所以現在可說是接近被淘汰的狀態。甚至 行動版裝置如 iPhone 與 Android 手機等都不支援 Flash。

身為網頁設計師或是 SEO 優化師的你，請快使用 Google 推出的網頁速度檢測工具 (連結) 來檢視自己的網站速度吧！

 

提升網頁載入速度的作法有很多，例如減少 request 數量、最佳化圖片大小、整合多個 CSS 檔案等，技術難易度不一。而比較簡單的作法，歸納如以下兩項：

 

批次減少圖片大小

上傳圖片至網站之前，請減少圖片的大小。例如：當你的網站是使用 Wordpress 來架站時，可使用外掛 (如Shortpixel) 來壓縮圖片大小

 

精簡 HTML 文本

除了壓縮圖片大小之外，也請精簡 HTML 的編碼。很多時候精簡的編碼跟一長串的編碼，呈現的效果樣式是一樣的。所以請盡可能精簡 HTML 編碼。

以上介紹最簡單的加快網站 loading 速度的方法。站內 SEO 除了加快網站的速度之外，最基本、最直接會顯現在 GOOGLE 搜尋結果頁的正標副標更要優化。方法請見這篇：2018 後的 SEO 八部曲 3 - 老套的META TAG還是要做

 

 

延伸閱讀：

達內教育的Python課程優於別人的點是什麼?讓他告訴你~

為你介紹--全球首台人工智慧貓砂盆!(背後的故事)

Java和Python,哪個更適合程式設計課程初心者?(上)

第一次上程式設計課程該選 Python 還是 Java？有什麼差別？

人工智慧守護浪浪安全！貓奴工程師開發AI浪貓庇護所

前端工程師也該會的後端：MySQL 的 DDL DML DQL DCL

Python 教學 - 控制結構篇 - while 迴圈

 

這個網誌中的熱門文章

Python控制結構一點就通!(5)while迴圈

-
圖片
關於Python的while迴圈,它可以製造出那些效果?一步步跟著這篇走,剩下的你不用怕啦! 關於Python-while 迴圈 Python 的 if 條件判斷式【請參考上篇的 Python教學 ： Python控制結構2.if else條件判斷(1) 】，若評估為 True【請參考： Python控制結構1.布林值Boolean-True or False? 】 的話，就會執行一次；反之則不執行。 Python 的 while 迴圈跟 if 條件判斷式相似，但是不同的是，它不只執行一次。只要條件成立，它就會不斷地重複執行。就算是有其中一段代碼被評估為 False，下一段代碼仍會被執行。 while 迴圈構成，包含了 。 以下範例的 while 迴圈中有一個變數「i」， 初始值 為「1」； 更新值（又稱為調整值） 為「i+1」； 讓迴圈結束的條件 為「i <=5」。 這次 Python教學 給你以下範例，讓 i 的從初始值開始，程式每執行一次，i 就等於上一回合的數值再「+1」一次，直到 i 等於 5 為止停止，寫法如下： i = 1 #初始值 while i <=5: #讓迴圈結束的條件 print(i) i = i + 1 #更新值 (調整) 則結果為： 1 2 3 4 5 >>> while迴圈的「infinite loop(無限循環)」 Python 的 while 迴圈中，有一種被稱作「infinite loop(無限循環)」，當條件（為True）成立時，該程式就會永不停止地重複執行。 「infinite loop(無限循環)」的範例如下： while 7==7: print("這是無限循環迴圈") 結果，「這是無限循環迴圈」這行字就會不斷的重複顯示。 若你真的受不了，你可以 按鍵盤快速鍵「Ctrl-C」以阻止它繼續重複顯示。 以下也是無限循環迴圈的另一個例子，來看看它的結果如何吧！ x=1 >>> while x>0: print(x) x+2 結果馬上會跳出一堆數字，且不斷的在跳出中。後出來的數字，都是
閱讀完整內容

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!

-
圖片
想成為前端工程師?那CSS中最基本的逗號.空格再搞錯,豈不是太不專業了! 有時在 HTML 中， 前端工程師 們會對同一個標籤給予兩個以上的 Class 名稱，如以下所示: < div class = " first second " > </ div > 對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你，分辨得出這些 CSS 有什麼不同嗎? /*1. 兩個 class 中有空格*/ .first .second /*2. 兩個 class 中沒有空格*/ .first.second /*3. 兩個 class 中出現逗號*/ .first,.second 對於 CSS 及前端工程師的初學者來說，上述三種 CSS 因為長得很像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 別擔心，立刻講解給你聽：   1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊，才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有空格的例子 by Tedutw ( @Tedutw ) on CodePen . 2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間無空格的例子 by Tedutw ( @Tedutw ) on CodePen . 3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有逗號的例子 by Tedutw ( @Tedutw ) on CodePen . 註 : 以上三個範例的 HTML 碼都一樣 延伸閱讀： 前端工程師入門款小常識-CSS碼特性一下就上手! 
閱讀完整內容

網頁前端CSS必學兩屬性:display與visible

-
圖片
今天要介紹網頁前端中的兩個CSS屬性:display與visible屬性! 本篇介紹 網頁前端 排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。 CSS ：display 屬性 display:block 對於 CSS 語法來說， 網頁前端 的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。 又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。 以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。 在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！ See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 網頁前端 CSS 語法設定如下： span.block{ display:block; } display:inline inline 元素只佔用可用寬度的最大值，並不強制換行。 將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。 See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 CSS 語法設定如下： span{ display:inline; } display:none 「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在 網頁前端 頁面顯示時也不會被展現出來，就好像該元素不存在一樣。 在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。 See the Pen display: none by Tedutw ( @Tedutw ) on CodePen . 上述介紹的「block」、「inline」、「none」都是最常碰到的的 d
閱讀完整內容