Bu sayfa, Cloud Translation API ile çevrilmiştir.

İlk İstemci Uygulamanızı Yazma

Giriş

Bu doküman, PageSpeed Insights API'si ile etkileşimde bulunabilecek uygulamalar yazmak isteyen geliştiricilere yöneliktir.

PageSpeed Insights, mobil ve masaüstü cihazlarda bir sayfanın gerçek dünyadaki performansını raporlayan ve geliştiricilerin web sayfalarını optimize etmelerine yardımcı olmak için söz konusu sayfanın nasıl iyileştirilebileceğine dair öneriler sağlayan bir araçtır. PageSpeed hız puanını, optimizasyon puanını ve önerileri programatik olarak oluşturmak için PageSpeed Insights API'sini kullanabilirsiniz.

Başlamadan önce

Bir Google Hesabı edinin

Uygulamanızı Google'a tanıtmak üzere bir API anahtarı almak için Google Hesabınızın olması gerekir. (Aşağıya bakın.)

PageSpeed'i yakından tanıyın

PageSpeed hakkında bilginiz yoksa PageSpeed Web Performansı En İyi Uygulamaları'na bakın.

Başvurunuzu Google'a nasıl tanıtacağınızı öğrenin

Uygulamanız, PageSpeed Insights API'sine her istek gönderdiğinde, her isteğe bir API anahtarı ekleyerek kendini tanımlamalıdır.

API anahtarı edinme ve kullanma

veya Kimlik Bilgileri sayfasında bir tane oluşturun.

Bir API anahtarınız olduktan sonra, uygulamanız key=yourAPIKey sorgu parametresini tüm istek URL'lerine ekleyebilir.

API anahtarı, URL'lere yerleştirmek için güvenlidir; herhangi bir kodlama yapmanız gerekmez.

PageSpeed Insights API'si arka planı

PageSpeed Insights API'si tarafından döndürülen sonuçlar aşağıdaki bilgi türlerini içerir:

Yükleme Deneyimi: Yükleme Deneyimi bölümünde genel hız kategorisi (HIZLI, ORTALAMA veya YAVAŞ) ve kategori dağılımları yer alır.
Sayfa İstatistikleri: Sayfa İstatistikleri bölümünde, gerekli gidiş dönüş sayısı ve kullanılan toplam bayt sayısı gibi bazı faydalı istatistiksel sonuçlar yer alır. Bu, görünümü ve işlevi değiştirerek sayfanın daha hızlı olup olamayacağını belirtir.
Optimizasyon Puanı: PageSpeed Optimizasyon Puanı (0-100) bir sayfanın ne kadar iyi optimize edildiğini gösterir. Yüksek puan iyileştirme yapılacak pek fazla şey olmadığını, düşük puan ise iyileştirme yapılması gereken çok nokta olduğunu gösterir.
Kural: PageSpeed, web sayfalarını kurallar kullanarak analiz eder. Her bir PageSpeed kuralı, web sayfası performansına ilişkin genel prensiplere dayanır (örneğin, kaynak önbelleğe alma, veri yükleme ve indirme boyutu, istemci-sunucu geri dönüş süreleri). PageSpeed kuralları, aşağıda açıklanan kural sonuçlarını ve kural etkilerini oluşturur.
Kural Sonucu: Kural sonucu, uygulandığında sayfayı hızlandıracak ve sayfanın Sayfa Hızı puanını yükseltecek bir kural tarafından oluşturulan öneridir. Örneğin, sıkıştırılabilir bir kaynak, sıkıştırılmamış olarak sunulursa PageSpeed Sıkıştırmayı Etkinleştir kuralı, geliştiricinin söz konusu kaynak için sıkıştırmayı etkinleştirmesini öneren bir sonuç oluşturur.
Kural Etkisi: Her PageSpeed kuralı, kural için kural-sonucu önerilerinin diğer kurallara göre uygulanmasının önemini veya önceliğini gösteren bir etki sayısı (sınırsız kayan nokta değeri) oluşturur. Örneğin, sıkıştırmayı etkinleştirdiğinizde 1 MB tasarruf ederken resimleri optimize etme 500 KB'lık tasarruf sağlayacaksa, Sıkıştırmayı Etkinleştir kuralının, Resimleri Optimize Et kuralının iki katı etki değeri olur. Etki sıfır ise söz konusu kural için iyileştirme önerisi bulunmadığı anlamına gelir.

API'yi çağırma

API'yi çağırmak için sorgu dizesinde URL'yi, API anahtarını ve diğer parametreleri belirterek runPagespeed yöntemini çağırın. Daha fazla bilgi için API Referansı belgelerini inceleyin.

Örnek API çağrıları

Komut satırından

PageSpeed Insights API'sini Linux/UNIX komut satırından curl gibi bir program kullanarak çağırabilirsiniz.

Aşağıdaki örnekte, https://developers.google.com/speed/pagespeed/insights/ URL'si için mobil Sayfa Hızı sonuçlarını getirmek üzere bu yaklaşım kullanılmaktadır. PageSpeed puanı, sayfa istatistikleri ve Sayfa Hızı biçimindeki sonuçlar JSON veri biçiminde döndürülür.

Biçimlendirilmiş sonuçlar, kural tanımlayıcıları (AvoidBadRequests veya MinifyJavaScript gibi) tarafından belirtilir ve bu kuralın puanı ve etkisinin yanı sıra, uygulandığında sayfanın daha hızlı yüklenmesini sağlayacak kural tarafından oluşturulan önerileri içerir. JSON yanıtındaki alanlar hakkında daha fazla bilgi edinmek için PageSpeed Insights API Referansı belgesine bakın.

İstek:

$ curl 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?url=https://developers.google.com/speed/pagespeed/insights/&strategy=mobile&key=yourAPIKey'

Yanıt:

{
 "captchaResult": "CAPTCHA_NOT_NEEDED",
 "kind": "pagespeedonline#result",
 "id": "https://developers.google.com/speed/pagespeed/insights/",
 "responseCode": 200,
 "title": "PageSpeed Insights",
 "ruleGroups": {
  "SPEED": {
   "score": 99
  }
 },
 "loadingExperience": {
  "id": "https://developers.google.com/speed/pagespeed/insights/",
  "metrics": {
   "FIRST_CONTENTFUL_PAINT_MS": {
    "median": 678,
    "distributions": [
     {
      "min": 0,
      "max": 1567,
      "proportion": 0.8726942914078067
     },
     {
      "min": 1567,
      "max": 2963,
      "proportion": 0.07357226585394444
     },
     {
      "min": 2963,
      "proportion": 0.053733442738248746
     }
    ],
    "category": "FAST"
   },
   "DOM_CONTENT_LOADED_EVENT_FIRED_MS": {
    "median": 559,
    "distributions": [
     {
      "min": 0,
      "max": 2120,
      "proportion": 0.9287991742172268
     },
     {
      "min": 2120,
      "max": 4226,
      "proportion": 0.035877050120426655
     },
     {
      "min": 4226,
      "proportion": 0.0353237756623466
     }
    ],
    "category": "FAST"
   }
  },
  "overall_category": "FAST",
  "initial_url": "https://developers.google.com/speed/pagespeed/insights/"
 },
 "pageStats": {
  "numberResources": 11,
  "numberHosts": 6,
  "totalRequestBytes": "1874",
  "numberStaticResources": 6,
  "htmlResponseBytes": "72494",
  "overTheWireResponseBytes": "324002",
  "cssResponseBytes": "8467",
  "imageResponseBytes": "5363",
  "javascriptResponseBytes": "841488",
  "otherResponseBytes": "14548",
  "numberJsResources": 4,
  "numberCssResources": 1,
  "numTotalRoundTrips": 13,
  "numRenderBlockingRoundTrips": 0
 },
 "formattedResults": {
  "locale": "en_US",
  "ruleResults": {
   "AvoidLandingPageRedirects": {
    "localizedRuleName": "Avoid landing page redirects",
    "ruleImpact": 0.0,
    "groups": [
     "SPEED"
    ],
    "summary": {
     "format": "Your page has no redirects. Learn more about {{BEGIN_LINK}}avoiding landing page redirects{{END_LINK}}.",
     "args": [
      {
       "type": "HYPERLINK",
       "key": "LINK",
       "value": "https://developers.google.com/speed/docs/insights/AvoidRedirects"
      }
     ]
    }
   },
   "EnableGzipCompression": {
    "localizedRuleName": "Enable compression",
    "ruleImpact": 0.0,
    "groups": [
     "SPEED"
    ],
    "summary": {
     "format": "You have compression enabled. Learn more about {{BEGIN_LINK}}enabling compression{{END_LINK}}.",
     "args": [
      {
       "type": "HYPERLINK",
       "key": "LINK",
       "value": "https://developers.google.com/speed/docs/insights/EnableCompression"
      }
     ]
    }
   },
   ...
   "PrioritizeVisibleContent": {
    "localizedRuleName": "Prioritize visible content",
    "ruleImpact": 0.0,
    "groups": [
     "SPEED"
    ],
    "summary": {
     "format": "You have the above-the-fold content properly prioritized. Learn more about {{BEGIN_LINK}}prioritizing visible content{{END_LINK}}.",
     "args": [
      {
       "type": "HYPERLINK",
       "key": "LINK",
       "value": "https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent"
      }
     ]
    }
   }
  }
 },
 "version": {
  "major": 1,
  "minor": 15
 }
}

JavaScript'ten

PageSpeed Insights API'sini tarayıcıda JSON-P sonuçları oluşturmak için callback sorgu parametresi ve bir geri çağırma işlevi kullanarak JavaScript'ten çağırabilirsiniz. Bu, herhangi bir sunucu tarafı kodu yazmadan PageSpeed verilerini görüntüleyen zengin uygulamalar yazmanıza olanak tanır.

Aşağıdaki örnekte, https://developers.google.com/speed/pagespeed/insights/ URL'sine ilişkin Sayfa Hızı sonuçlarını ve diğer bilgileri görüntülemek için bu yaklaşım kullanılmaktadır. Bu örnekte, PageSpeed Insights API'si tarafından oluşturulan bilgileri görselleştirmek için Google Grafik Araçları da kullanılmıştır.

Öncelikle Google API anahtarınızı belirtin (API anahtarları hakkında daha fazla bilgi edinin):

<script>
// Specify your actual API key here:
var API_KEY = 'yourAPIKey';

// Specify the URL you want PageSpeed results for here:
var URL_TO_GET_RESULTS_FOR = 'https://developers.google.com/speed/pagespeed/insights/';
</script>

Ardından, PageSpeed Insights API'sinden Sayfa Hızı Sonuçlarını alın:

<script>
var API_URL = 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?';
var CHART_API_URL = 'http://chart.apis.google.com/chart?';

// Object that will hold the callbacks that process results from the
// PageSpeed Insights API.
var callbacks = {}

// Invokes the PageSpeed Insights API. The response will contain
// JavaScript that invokes our callback with the PageSpeed results.
function runPagespeed() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  var query = [
    'url=' + URL_TO_GET_RESULTS_FOR,
    'callback=runPagespeedCallbacks',
    'key=' + API_KEY,
  ].join('&');
  s.src = API_URL + query;
  document.head.insertBefore(s, null);
}

// Our JSONP callback. Checks for errors, then invokes our callback handlers.
function runPagespeedCallbacks(result) {
  if (result.error) {
    var errors = result.error.errors;
    for (var i = 0, len = errors.length; i < len; ++i) {
      if (errors[i].reason == 'badRequest' && API_KEY == 'yourAPIKey') {
        alert('Please specify your Google API key in the API_KEY variable.');
      } else {
        // NOTE: your real production app should use a better
        // mechanism than alert() to communicate the error to the user.
        alert(errors[i].message);
      }
    }
    return;
  }

  // Dispatch to each function on the callbacks object.
  for (var fn in callbacks) {
    var f = callbacks[fn];
    if (typeof f == 'function') {
      callbacks[fn](result);
    }
  }
}

// Invoke the callback that fetches results. Async here so we're sure
// to discover any callbacks registered below, but this can be
// synchronous in your code.
setTimeout(runPagespeed, 0);
</script>

PageSpeed Insights API'sinden sonuçları getirmek için yukarıdaki kodu kullanarak, artık aşağıdaki örnekleri kullanarak kullanıcının tarayıcısında ilgi çekici bilgileri görüntülemeye hazırız.

1. Örnek: En popüler Sayfa Hızı önerilerini görüntüleme

Bu örnekte, analiz edilmekte olan sayfa için en popüler Sayfa Hızı önerilerinin adları sıralanmamış bir liste olarak görüntülenir. Örneğin:

Tarayıcı önbellekleme özelliğinden yararlanın
JavaScript kodlarını ayrıştırmayı sonraya bırakın
HTML'yi küçültün
JavaScript'i küçült

Not: Sayfa Hızı sonuçlarının tamamını görüntülemek için gereken veriler PageSpeed Insights API'si tarafından sağlanır, ancak örneğin basit olması için burada verilerin tamamı kullanılmaz.

<script>
callbacks.displayTopPageSpeedSuggestions = function(result) {
  var results = [];
  var ruleResults = result.formattedResults.ruleResults;
  for (var i in ruleResults) {
    var ruleResult = ruleResults[i];
    // Don't display lower-impact suggestions.
    if (ruleResult.ruleImpact < 3.0) continue;
    results.push({name: ruleResult.localizedRuleName,
                  impact: ruleResult.ruleImpact});
  }
  results.sort(sortByImpact);
  var ul = document.createElement('ul');
  for (var i = 0, len = results.length; i < len; ++i) {
    var r = document.createElement('li');
    r.innerHTML = results[i].name;
    ul.insertBefore(r, null);
  }
  if (ul.hasChildNodes()) {
    document.body.insertBefore(ul, null);
  } else {
    var div = document.createElement('div');
    div.innerHTML = 'No high impact suggestions. Good job!';
    document.body.insertBefore(div, null);
  }
};

// Helper function that sorts results in order of impact.
function sortByImpact(a, b) { return b.impact - a.impact; }
</script>

2. Örnek: Kaynak boyutu dökümü pasta grafiği görüntüleme

Bu örnekte, analiz edilen sayfanın kaynak boyutu dökümünü gösteren bir pasta grafik görüntülenir. Örneğin:

<script>
var RESOURCE_TYPE_INFO = [
  {label: 'JavaScript', field: 'javascriptResponseBytes', color: 'e2192c'},
  {label: 'Images', field: 'imageResponseBytes', color: 'f3ed4a'},
  {label: 'CSS', field: 'cssResponseBytes', color: 'ff7008'},
  {label: 'HTML', field: 'htmlResponseBytes', color: '43c121'},
  {label: 'Flash', field: 'flashResponseBytes', color: 'f8ce44'},
  {label: 'Text', field: 'textResponseBytes', color: 'ad6bc5'},
  {label: 'Other', field: 'otherResponseBytes', color: '1051e8'},
];

callbacks.displayResourceSizeBreakdown = function(result) {
  var stats = result.pageStats;
  var labels = [];
  var data = [];
  var colors = [];
  var totalBytes = 0;
  var largestSingleCategory = 0;
  for (var i = 0, len = RESOURCE_TYPE_INFO.length; i < len; ++i) {
    var label = RESOURCE_TYPE_INFO[i].label;
    var field = RESOURCE_TYPE_INFO[i].field;
    var color = RESOURCE_TYPE_INFO[i].color;
    if (field in stats) {
      var val = Number(stats[field]);
      totalBytes += val;
      if (val > largestSingleCategory) largestSingleCategory = val;
      labels.push(label);
      data.push(val);
      colors.push(color);
    }
  }
  // Construct the query to send to the Google Chart Tools.
  var query = [
    'chs=300x140',
    'cht=p3',
    'chts=' + ['000000', 16].join(','),
    'chco=' + colors.join('|'),
    'chd=t:' + data.join(','),
    'chdl=' + labels.join('|'),
    'chdls=000000,14',
    'chp=1.6',
    'chds=0,' + largestSingleCategory,
  ].join('&');
  var i = document.createElement('img');
  i.src = 'http://chart.apis.google.com/chart?' + query;
  document.body.insertBefore(i, null);
};
</script>

Tanıtım Videosu

Google I/O BootCamp 2011'de PageSpeed Insights API demosu.