在使用Google PageSpeed Insights檢測網站速度是否需要改善！文章中向大家介紹了如何幫網站做健檢以了解網站是否需要改善及該朝哪個方向改善，進而加以優化網站。在本篇文章將介紹WebPagetest這款進階測試工具，讓您更能快速並清楚知道當訪客從不同國家/地區進行連線時，您網站是否需要做更進一步的優化，如：拖慢網頁載入的原因等。 現在一起跟著歐斯瑞來看看WebPagetest這個工具吧！ Step 1 : 進入WebPagetest 網站後，這裡有4個頁籤讓您可以依照需求選擇，如圖1： 圖1 ...
隨著HTML5與CSS3的推出後，前端技術推陳出新，隨之而來的就是瀏覽器的亂爭。 我們時不時的會發現一些新奇好用的技術，例如：動畫的Transform、排版新寵兒Flex(Box)，恨不得馬上套用到新的專案或是往後的設計中，但更多的時候是我們只能眼睜睜的放棄這些新東西，繼續使用較舊但也是相對穩定的方法。 沒錯，因為部分瀏覽器可能不支援！既使支援全瀏覽器也存在者版本的問題，我們不能去強制要求使用者升級或者是更換他們的瀏覽器，即便在我們的內心中還在疑惑著為何還在使用IE：連微軟自家都已經放棄的瀏覽器，亦或是為何不使用最新的版本，導致我們為了一個瀏覽器就可能需要調整一至三個版本，是個耗時又耗力(精神)的工程。在筆者還是個小菜新的時候就曾經開開心心地完成專案後，QA一切換瀏覽器的瞬間從天堂掉到地獄，那災情何止是一個慘字能形容的。 為了避免這樣的悲劇一再發生，我們在使用這些新屬性或是特殊屬性前，可以先到以下的網站做瀏覽器支援度的查詢： Can I Use ...
網路越來越發達，大家對網頁的要求也越來越高，不只要美觀、功能強大還要獨特性高。在這種要求下，測試網站就變成很重要的一件事。網路上可以找到許多強大的測試網站的軟體工具，但如果能以簡單快速的方式來測試網站，是否更加容易上手呢？ 今天歐斯瑞就為大家來介紹一個測試工具-”Selenium”。一起來看看吧！ Selenium是什麼？ Selenium 是一個圖形化介面的網頁自動化工具，可以幫助測試人員在知短時間內使用滑鼠就可以簡單完成錄製瀏覽器的操作動作，並快速完成部份的案例測試。這幾年Selenium持續發展，進階一點的能讓程式能直接對瀏覽器進行各種網站操作。但如果你第一次使用Selenium，可以從Selenium IDE開始上手，也是本次的教學重點。 Selenium安裝教學 1. ...
Elasticsearch產品使用心得分享 它的設置非常簡單，只要在各種伺服器上安裝Filebeat、Metricbeat、Auditbeat和Packetbeat，然後統整報告給Elasticsearch數據庫。 以下是我在Elasticsearch + Beats的使用心得&經驗分享給各位。 Filebeat和Metricbeat擁有自己的模組。這些是位於 /etc/{metric,file}beat/modules.d/中的特定服務的配置文件。雖然可以在主要配置文件中為Filebeat或Metricbeat執行特定服務的配置，但您也可以使用像是 filebeat modules enable ...
當網站建置完成後，緊接著就是檢測階段了，以避免上線後產生的問題;像是客戶進行線上購物的過程中發生無法購買的情況，或使用者體驗不佳而失去購買慾望。那麼在進行檢測時應該注意哪些細節呢？ 今天歐斯瑞就和大家簡單分享在進行檢測時應該注意的細節，一起來看看吧！ 1. 正確的最終版本設計 作為一個較具規劃的網站勢必都有網站初始設計，在這過程中多多少少都會經過幾次的校稿與確認，在開始檢測前請記得確認最終版本的設計，即使是部分調整或小細節調整都可能會影響到整體網站，才不會發生設計與最後測試端不同步的意外發生，好比說整體網站的字型樣式是否正確與統一？項目符號、效果等是否有按照期望的方式顯示？ 2. 圖片 ...
今天要來測試一個網頁的讀取速度，當中的圖片多寡會影響多少呢？ 首先將我們的Astralweb的官網轉出為Html檔，去除了PHP與部分JS的因素並與測試圖片放置在同一個伺服器上，圖片大小沒有固定，扣除外連結的圖片後，我們將分別測試加上額外的20、60與100張圖時，網站的讀取速度會差多少。 每個數量都將統一以清除快取的方式各刷新10次，來計算讀取的時間。 同時使用GTmetrix，選擇與我們較相近的香港伺服器來測試。 (目前網站中的圖片34張，空間佔了3.7MB) 經過簡易的測試後，可以發現隨者圖片量的增加，讀取速度也漸漸的往上遞增，且當圖片的Size變更大時，各區間的影響會更明顯，速度理所當然的會越慢！ ...
隨著時代的進步，對於視覺上的美化越來越重視，使得網站整體架構也隨之變得更為龐大和複雜，如果能使用工具來協助測試人員進行測試，也可使整個專案能如期完成。那麼，該如何選擇工具來測試如此龐大又複雜的網站呢？ 今天歐斯瑞就要為大家介紹一個測試網站的工具”JMeter”，一起來看看吧！ JMeter是什麼？ JMeter是一套開源的測試軟體，主要是用來測試網站功能及系統負載較重的情形下是否能正常運作，或是在給定的負載量下其效能的表現結果是否符合預期。JMeter原本只用在測試客戶端與服務端結構的軟體，而現在已能支援不同的模塊。它的操作介面簡單，相信你也可以快速上手。 JMeter安裝教學 在”命令提示字元”中輸入”java -version”，確認JAVA版本是否為JAVA ...
隨著網路的普及化，人們的食、衣、住、行、育、樂幾乎都離不開使用網路來下單購買，相對也衍生出網路資訊安全的問題。如果網站不夠安全，很可能導致資料外洩，特別是網站有會員登入、金流系統…等，或者是在購物網站進行線上交易時最容易發生信用卡資料被竊取等。那麼該如何檢測網站SSL憑證是否在安全等級呢？ 現在一起跟著歐斯瑞來看看Qualys SSL LABS這個工具吧！ SSL憑證是什麼？ SSL憑證在如何評估您的網站處於優勢或劣勢？文中的安全(SECURITY)裡有提及到，SSL是用在網頁伺服器與瀏覽器之間建立加密連接的標準安全技術，以確保在傳遞數據資料時保有加密性。 ...
隨著網頁開發技術不斷進步，相對地檢測網站的分析工具也得跟進，才足以因應不斷變化的開發技術。歐斯瑞要介紹這款屬於初階入門的檢測網站分析工具Website Grader，好讓您的網站不論是在開發或維護過程中，都能清楚地知道您網站的優勢與劣勢，以便進一步改善您網站的弱點。 Website Grader是款檢測網站的分析工具，它主要是根據效能、行動裝置、SEO、安全性等來評估您的網站在哪個部分需要做調整或是進一步改善(例如：網頁加載時間、SEO的核心元素)， 並針對需要做調整或改善的地方給予您適當的建議，而這些數據的高低可能會影響到轉化率的升降、現有客戶、潛在客戶、收入等等，所以是非常重要不可忽視的。 現在就跟著歐斯瑞一起來看看這個工具吧！ Website ...
相信許多前端工程師在開發響應試網頁時，常常會使用一些輔助工具來測試在不同尺寸的行動裝置上所顯示出來的網頁效果是否正常，像Chrome瀏覽器內建的開發人員工具裡就有兼具模擬各種裝置尺寸的功能，對大部分前端開發者而言也是較方便與使用的。 但如果你想要在同個頁面可以看到不同尺寸所呈現出來的網頁效果，以現在前端開發者所選擇使用的工具普遍都是一次只能顯示一種，無法同時預覽多種尺寸。 所以，今天歐斯瑞就和大家介紹Sizzy這款工具，好讓前端開發者能有更多選擇，一起來看看吧！ Sizzy是一款讓前端開發者在開發過程中，能在同個頁面裡同時看到在不同尺寸上所呈現出來的頁面也可以單獨顯示的測試工具。 ...
Postman是一款Web API測試工具，原本只是在Chrome上的plug-in的軟體而已，但現今已有在不同平台的版本可以下載使用，讓想使用此測試工具的使用者有更多不同的選擇！ 如何安裝 Postman官網提供了許多不同平台的App版本可下載。 https://www.getpostman.com/ 你也可以使用Chrome瀏覽器到線上應用程式商店去搜尋安裝Postman https://chrome.google.com/webstore?utm_source=chrome-ntp-icon 新增成功後你可以在 chrome://apps/ 頁面看到Postman ...
一個優質的網站，除了整體介面、功能與商品外，也應該注意網站的速度(不含額外因素，如：網站所在位置)，因為它除了會反應在使用者體驗外，也可能影響到網站SEO排名。畢竟現在已是人手一機，使用者隨時都能上網，倘若使用者因載入速度太慢放棄等待而離開網站(特別是購物網站)，起不錯失了成交的機會。 相關文章：SEO優化指南 那麼該如何幫自己的網站做健檢，以進一步了解網站需不需要改善或該朝哪個方向改善，進而加以優化？ 今天歐斯瑞介紹以Google所提供的檢測工具PageSpeed Insights來做介紹。Page Speed Insights是根據”註1載入不須捲動位置時間”及”註2載入完整網頁時間”來衡量網頁效能，它是透過代理程式來擷取網址兩次，分別是電腦使用者和行動裝置使用者，以此衡量網頁在電腦和行動裝置上的效能並給予修正建議。現在就一起來看看該如何使用Page Speed Insights來檢測自己的網站吧！ ...
