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, bir sayfanın mobil ve masaüstü cihazlardaki gerçek performansını raporlayan ve geliştiricilerin web sayfalarını optimize etmesine yardımcı olmak için sayfanın nasıl iyileştirilebileceğine dair öneriler sunan bir araçtır. Programatik olarak PageSpeed hız puanı, optimizasyon puanı ve öneriler oluşturmak için PageSpeed Insights API'sini kullanabilirsiniz.

Başlamadan önce

Bir Google Hesabı edinin

Uygulamanızı Google'a tanımlamak amacıyla API anahtarı alabilmek için Google Hesabınızın olması gerekir. (Aşağıya bakın.)

PageSpeed'i daha yakından tanıyın

PageSpeed hakkında bilginiz yoksa PageSpeed Web Performansı En İyi Uygulamaları başlıklı makaleyi inceleyin.

Uygulamanızı Google'a nasıl tanımlayacağınızı öğrenin

Uygulamanızın, PageSpeed Insights API'ye her istek gönderdiğinde her isteğe bir API anahtarı ekleyerek kendini tanımlaması gerekir.

API anahtarı edinme ve kullanma

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

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 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, ORTA veya YAVAŞ) ve kategori dağılımı bulunur.
Sayfa İstatistikleri: Sayfa İstatistikleri bölümünde, gereken gidiş dönüşler ve kullanılan toplam bayt sayısı gibi bazı yararlı istatistiksel sonuçlar bulunur. Bu, görünümü ve işlevi değiştirerek sayfanın daha hızlı olup olmayacağı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 için çok az yer olduğunu, düşük puan ise iyileştirme için daha fazla yer olduğunu gösterir.
Kural: PageSpeed, web sayfalarını kuralları kullanarak analiz eder. Her PageSpeed kuralı, kaynak önbelleğe alma, veri yükleme ve indirme boyutu ve istemci-sunucu gidiş dönüş süreleri gibi web sayfası performansıyla ilgili genel ilkeleri temel alır. Sayfa Hızı kuralları, aşağıda açıklanan kural sonuçlarını ve kural etkilerini oluşturur.
Kural sonucu: Kural sonucu, bir kural tarafından oluşturulan ve uygulandığında sayfayı hızlandıran ve söz konusu sayfanın PageSpeed puanını artıran bir ö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 bu 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 uygulanmasının diğer kurallara kıyasla önemini veya önceliğini belirten bir etki numarası (sınırsız kayan nokta değeri) oluşturur. Örneğin, sıkıştırmayı etkinleştirmek 1 MB tasarruf ederken resimleri optimize etmek 500 kB tasarruf sağlayacaksa Sıkıştırmayı Etkinleştir kuralının etki değeri, Resimleri Optimize Et kuralının iki katı olacaktır. Etki sıfır ise bu kural için iyileştirme önerisi olmadığını gösterir.

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ı belgelerine bakın.

Örnek API çağrıları

Komut satırından

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

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

Şekillendirilmiş sonuçlar, kural tanımlayıcılarına (AvoidBadRequests veya MinifyJavaScript gibi) göre anahtarlanır ve ilgili kuralın puanını ve etkisini, ayrıca kural tarafından oluşturulan ve uygulandığında sayfanın daha hızlı yüklenmesini sağlayacak ö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

callback sorgu parametresini ve bir geri çağırma işlevini kullanarak JSON-P sonuçları oluşturmak için tarayıcıdaki JavaScript'ten PageSpeed Insights API'yi çağırabilirsiniz. Bu sayede, sunucu tarafı kod yazmadan PageSpeed verilerini gösteren zengin uygulamalar yazabilirsiniz.

Aşağıdaki örnekte, https://developers.google.com/speed/pagespeed/insights/ URL'si için PageSpeed sonuçlarını ve diğer bilgileri görüntülemek üzere bu yaklaşım kullanılmaktadır. Bu örnekte, PageSpeed Insights API tarafından oluşturulan bilgileri görselleştirmek için Google Grafik Araçları da kullanılmaktadı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>

Sonra, PageSpeed Insights API'sinden PageSpeed 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 almak için yukarıdaki kodu kullandığımızda, artık aşağıdaki örnekleri kullanarak kullanıcının tarayıcısında ilgi çekici bilgiler görüntülemeye hazırız.

1. örnek: En iyi PageSpeed önerilerini gösterme

Bu örnekte, analiz edilmekte olan sayfa için en çok kullanılan PageSpeed önerilerinin adları, sırasız 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ün

Not: PageSpeed sonuçlarının tamamını görüntülemek için gereken veriler PageSpeed Insights API tarafından sağlanır ancak örneği basit tutmak amacıyla bu verilerin tümü burada kullanılmamıştır.

<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 grafiği gösterilmektedir. Ö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>

Demo Video

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