內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)

      CDN 可以幫你把網(wǎng)站的資源分發(fā)到世界各地，有助于提高網(wǎng)站的響應(yīng)速度，當(dāng)然，這對于那些特殊地區(qū)的用戶是收效甚微的。

CloudFlare

     CloudFlare 的強(qiáng)大之處在于它可以成為你的 DNS 服務(wù)器(CDN 只是它所有服務(wù)的一個組成部分)，這樣對你的網(wǎng)站發(fā)起的所有請求都會經(jīng)過它。CloudFlare 的 CDN 在過去十五年的設(shè)計和發(fā)展中，并沒有一味的守舊和固步自封。我們的專利技術(shù)中充分利用了最新的技術(shù)進(jìn)步，包括并不限于硬件、web 服務(wù)器和網(wǎng)絡(luò)路由。換言之，我們創(chuàng)新的建設(shè)了下一代的 CDN。新的 CDN 配置簡單、價格低廉，其性能也一定比你使用過的任何傳統(tǒng) CDN 都要優(yōu)秀。

MaxCDN

      CSS-Tricks 當(dāng)前就在使用 MaxCDN 托管所有的靜態(tài)資源。它可以無縫地融合 WordPres 和 W3 的所有緩存資源，所以我們無需做什么特別處理，即可將資源移入 CDN，并能保證鏈接的準(zhǔn)確性。

對于一個博客來說，考慮到其中的大文件主要是 JavaScript、CSS 和圖片，而不是視頻等類型，這貸款占用的可真多。我們的 CDN 服務(wù)同樣是一個網(wǎng)站加速器和實時控制中心。創(chuàng)建它，就是為了讓網(wǎng)站的用戶和運維都能從下一代 CDN 中獲得最大收益。

CloudFront

       亞馬遜網(wǎng)絡(luò)服務(wù)(AWS)版本的 CDN。亞馬遜 CloudFront 是一個內(nèi)容分發(fā)網(wǎng)絡(luò)服務(wù)。它可以無縫融合入其他的亞馬遜網(wǎng)絡(luò)服務(wù)產(chǎn)品，為開發(fā)者和企業(yè)分發(fā)內(nèi)容到最終用戶手中提供了一種簡單的方式，整個過程都具有低延遲、高轉(zhuǎn)換速度的特點，也沒有最小使用量的強(qiáng)制要求。

CDNperf

      上述的 CDNs 并不能托管你任意的資源，它們往往只是托管最頻繁用到的文件。雖然對于線上產(chǎn)品來說將資源和服務(wù)器托管到私有的 CDN 上并不是最好的方式，但這種方式對于分發(fā)資源來說仍然是快速和簡單的。CDNperf 可以幫你找出最快和最可信賴的 JavaScript CDNS，讓你的網(wǎng)站更快更有朝氣。

性能測試

     下面的這些性能測試工具，使用了量化的方式測試了網(wǎng)站中諸如首字節(jié)加載時間(time to first byte)或者渲染時間等表現(xiàn)。有些工具還會檢查特別檢查資源是否被緩存，多個 CSS 或 JS 文件是否值得合并。

WebPagetest

      WebPagetest 是性能測試的黃金標(biāo)準(zhǔn)，它提供了多方面的量化指標(biāo)用于性能測試，比如有一個基本的評分，用于評價當(dāng)前頁面優(yōu)化的水平;有一個截圖，顯示頁面加載后的視覺效 果;還有一個瀏覽器加載資源的瀑布流…根據(jù)用戶瀏覽器真實的連接速度，在全球范圍內(nèi)進(jìn)行網(wǎng)頁速度測試，并提供詳細(xì)的優(yōu)化建議。

     通過使用 API wrapper，也可以將 WebPagetest 的相關(guān)服務(wù)添加到 NPM 模塊和命令行工具中。webpagetest-mapper：將 WebPageTest 的測試數(shù)據(jù)轉(zhuǎn)換為可讀的文檔格式。

WPT Bulk Tester：使用 Google Docs 測試多個 URLs(如果你擁有 API key，也可以使用 webpagetest.org 來做這件事，或者其他公開可訪問的實例)。

Yslow

    Yslow 基于 Yahoo 的高性能網(wǎng)頁教條，分析網(wǎng)頁的性能并給出響應(yīng)緩慢的原因。

Google PageSpeed

    PageSpeed 根據(jù)網(wǎng)頁最佳實踐分析和優(yōu)化測試的網(wǎng)頁。PageSpeed 也有一個 CLI(Command Line Interface)工具：PSI(PageSpeed Insights with reporting)在構(gòu)建進(jìn)程中，可以使用 PSI 測試移動端和桌面端的性能，最終得到可讀性良好的測試結(jié)果。

網(wǎng)站都開銷到哪里去了?

  評估網(wǎng)站在世界各地為每個移動端用戶支出的維護(hù)成本。

Pingdom 網(wǎng)站速度測試

    輸入 URL 地址，即可測試頁面加載速度，分析并找出性能瓶頸。

SpeedCurve

     SpeedCurve 既可以讓你追蹤競爭對手的性能表現(xiàn)，也可以追蹤自己的性能表現(xiàn)。使用 SpeedCurve 時，你可以查看某個因素在不同站點的速度表現(xiàn)。對于移動用戶來說，他們希望網(wǎng)站在手機(jī)上加載起來要快于電腦，如果感到加載遲緩，往往會迅速關(guān)上網(wǎng)頁，所以，網(wǎng)站的響應(yīng)速度對他們很重要。

Calibre

     Calibre 可以幫你追蹤頁面的加載時間，以及頁面大小。問題頁面(Janky page)是的，Calibre 會直接告訴你哪些頁面有問題。

GT Metrix

    GT Metrix 結(jié)合了 Google PageSpeed 和 YSlow，幫助開發(fā)者創(chuàng)建快速、高效和全面優(yōu)化的網(wǎng)頁瀏覽體驗。

perf.js

    在開發(fā)過程中，將性能的時序情況顯示在頁面上。

perf bar

   一種簡單的方式，用于快速收集和查看網(wǎng)頁性能，提供預(yù)置的量化標(biāo)準(zhǔn)，也支持自定義的量化標(biāo)準(zhǔn)。

grunt-perfbudget

     用于評估性能的 Grunt task。 grunt-perfbudget 使用 WebPagetest 的公有或私有實例在特定的 URL 進(jìn)行測試。它會將測試結(jié)果和你預(yù)期的性能期望做比較，如果小于預(yù)期，那么這個 task 就順利完成了，如果超過了你預(yù)期的性能期望，那么就會報告失敗，并且會幫助你分析超出預(yù)期的原因。

Sitespeed

     Sitespeed.io 是一個基于最佳實踐以及一些加載時序等量化標(biāo)準(zhǔn)的開源工具，有助于開發(fā)者分析網(wǎng)頁的加載速度和渲染性能。它會從開發(fā)者的站點收集多個頁面的數(shù)據(jù)，根據(jù)最佳實踐等規(guī)則來分析這些網(wǎng)頁，并將結(jié)果以 HTML 的形式輸出，或者以數(shù)值的形式發(fā)送到 Graphite。

speedgun

     該網(wǎng)站允許你使用 Speedgun.js 收集任意公開站點的性能數(shù)據(jù)。它會運行五次，并顯示一個友好的示圖，幫助開發(fā)者了解當(dāng)前頁面的加載過程。

gulp size

   顯示項目大小。

瀏覽器工具盒插件

Chrome 開發(fā)者工具

    在 Chrome 的開發(fā)者工具中，對于評估性能有兩個非常有用的標(biāo)簽：Audits 和 Network。Audit 面板用于分析加載的頁面。它可以提供優(yōu)化建議，減少頁面加載時間，加快頁面的響應(yīng)速度。Network 面板以動態(tài)的方式實時地展示了資源的請求和下載。雖然辨析和定位這些請求會比純粹的加載頁面多花一些時間，但這些消耗對于指導(dǎo)頁面的性能優(yōu)化是非常重要的。

火狐開發(fā)者瀏覽器

     該瀏覽器是為開發(fā)者而創(chuàng)造的，專注于服務(wù)開發(fā)者的工作流。這是有史以來第一次，將構(gòu)建、測試和擴(kuò)展等服務(wù)集中于一體。更多信息請查看 MDN 上的 Network Monitor。

Page performance

      這個擴(kuò)展插件應(yīng)用于 Chrome 瀏覽器，可以開速分析當(dāng)前頁面的性能。如果瀏覽器打開了多個標(biāo)簽，那么該插件會自動分析當(dāng)前頁面的性能表現(xiàn)。

PerfAudit

     我們審查頁面的加載和渲染性能。對于令人反感的響應(yīng)緩慢和問題頁面，我們有義不容辭的使命提供快速、穩(wěn)定和準(zhǔn)確的頁面。

Perfmonkey

    PerfMonkey 讓追蹤頁面的渲染性能變得無比簡單。

ImageOptim

    ImageOptim 是一個免費的應(yīng)用，它在減少圖片體積、提高加載速度的同時，還不會犧牲圖片質(zhì)量。它優(yōu)化了壓縮參數(shù)、移除了無用的頭信息和非必要的顏色配置信息。它也可以被集成到 Grunt 和 Gulp 中。

SVGO

   SVG Optimizer 是一個基于 Nodejs 的 SVG 矢量圖形優(yōu)化工具。如果你需要的是交互界面的操作，而不是 CLI，那么可以下載這個 APP。

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的縮寫，旨在揭露 SVG 文件的主要問題，而不具有 SVGO 的完整可配置項。

手動優(yōu)化 SVGs

       類似于其他的圖形文件，SVG 也應(yīng)該在上線前被優(yōu)化。雖然有許多類似 Raymond 的工具可以幫你做這種優(yōu)化，但最好的方式還是深入理解其細(xì)節(jié)并做一些手動的優(yōu)化。

Triamge

      Triamge 是一個擴(kuò)平臺的 GUI 和 CLI 工具，用于優(yōu)化網(wǎng)站的圖片文件。它組合使用 optipng、pngcrush、advpng 和 jpegoptim，并根據(jù)文件類型做優(yōu)化(最新版本中，已經(jīng)支持 PNG 和 JPG)。

CSS

CSS Triggers

    該網(wǎng)站用于展示哪些 CSS 屬性可以影響瀏覽器的布局、渲染和其他組合操作。

CSS Stats

     該網(wǎng)頁應(yīng)用以可視化的形式展示了開發(fā)者項目中有關(guān) CSS 的統(tǒng)計信息。

CSS Shrink

     CSS 壓縮工具。由于 CSS 是頁面渲染的核心文件，所以必須保持輕巧，便于快速響應(yīng)和渲染。

uncss

     UnCSS 是一個用于移除腳本中無用 CSS 的工具。它可以審查多個文件，也可以審查由 JavaScript 注入的 CSS。它也可以被集成到 Grunt 和 Gulp 中。

Critical path

   提取和整合 HTML 中關(guān)鍵的 CSS。

HTMLMinifier

     HTMLMinifier 是一個高度可配置、經(jīng)過完善的測試、基于 JavaScript 的 HTML 壓縮工具，并且內(nèi)置了代碼審查類的工具。

gulp-htmlmin

    用于壓縮 HTML 的 gulp 插件。

grunt-contrib-htmlmin

    用于壓縮 HTML 的 grunt 插件。

JavaScript

    JavaScript 解析器、混淆、壓縮和美化工具集。它也可以被集成到 Grunt 和 Gulp 中。你也許并不需要某些 jQuery 插件

    jQuery 及其附屬工具都是非常優(yōu)秀的項目，使用它們往往使開發(fā)工作輕松而又快捷。另一方面，如果你正在開發(fā)一個庫，那么你需要思考一下是否真的需要依賴于 jQuery。也許你只需要引入幾行代碼，就可以放棄引入一個庫實現(xiàn)某些功能。如果你的庫只是針對于高級瀏覽器，那么可能直接調(diào)用瀏覽器的內(nèi)置函數(shù)就可以實現(xiàn)相關(guān)功能了。

   本文由建站平臺中億智企云網(wǎng)商學(xué)院為你提供，關(guān)于更多相關(guān)內(nèi)容，請關(guān)注我們的建站平臺

官網(wǎng)http://17wansf.top，或是撥打我們的全國服務(wù)熱線：400-698-5980