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

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

CloudFlare

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

MaxCDN

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

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

CloudFront

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

CDNperf

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

性能測(cè)試

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

WebPagetest

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

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

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

Yslow

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

Google PageSpeed

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

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

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

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

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

SpeedCurve

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

Calibre

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

GT Metrix

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

perf.js

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

perf bar

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

grunt-perfbudget

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

Sitespeed

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

speedgun

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

gulp size

   顯示項(xiàng)目大小。

瀏覽器工具盒插件

Chrome 開發(fā)者工具

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

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

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

Page performance

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

PerfAudit

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

Perfmonkey

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

ImageOptim

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

SVGO

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

SVGOMG

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

手動(dòng)優(yōu)化 SVGs

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

Triamge

      Triamge 是一個(gè)擴(kuò)平臺(tái)的 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ā)者項(xiàng)目中有關(guān) CSS 的統(tǒng)計(jì)信息。

CSS Shrink

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

uncss

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

Critical path

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

HTMLMinifier

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

gulp-htmlmin

    用于壓縮 HTML 的 gulp 插件。

grunt-contrib-htmlmin

    用于壓縮 HTML 的 grunt 插件。

JavaScript

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

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

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

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