Optimizaciya vremeni zagruzki_azat_razetdinov

Я.Субботник, Москва, 3 июля 2010 года

Руководитель группы разработкипользовательских интерфейсов

Азат Разетдинов

Оптимизация времени загрузки на примере Яндекс.Карт

2

Оптимизация времени загрузки

3

Зачем?

4

Влияние времени загрузки

Источник: http://stevesouders.com/docs/fronteers-20091105.pptx

— Bing: +2 сек — доходы ▼ 4,3%

— Google: +0,4 сек — поиск ▼ 0,6%

— Yahoo: +0,4 сек — трафик ▼ 5-9%

5

Методы оптимизации

— уменьшение количества запросов;

— кэширование ресурсов;

— gzip-сжатие ресурсов;

— оптимизация изображений;

— минификация стилей и скриптов;

— много других методов.

6

Инструменты

Firebug YSlow

Page Speed

7

Книги по оптимизации

8

Оптимизация Яндекс.Карт

9

10

Скрипты в конец body

11

Было

<head>

...

<script href="_api.js"/>

<script href="_jquery.js"/>

<script href="_common.js"/>

<script href="_maps.js"/>

</head>

<body>

...

<script>Maps.init()</script>

</body>

12

• Здесь может быть ваш текст

Обычный текстTemplate

13

Стало

<head>

...

<script href="_api.js"/>

</head>

<body>

...

<script>initMap()</script>

<script href="_jquery.js"/>

<script href="_common.js"/>

<script href="_maps.js"/>

<script>Maps.init()</script>

</body>

14

• Здесь может быть ваш текст

Обычный текстTemplate

15

Результат

Время до загрузки последнего тайла карты:

— Internet Explorer 6: ▼ 41%



16

Асинхронная загрузка скриптов

17

Асинхронная загрузка скриптов

18

Было начало рендеринга ↓

19

Стало ↓ начало рендеринга

20

Наглядное сравнение

Было:

Стало:

21


Было:

Стало:

22


Было:

Стало:

23


Было:

Стало:

24


Было:

Стало:

25


Было:

Стало:

26


Было:

Стало:

27

Определение загрузки скрипта

// в Опере 9.6 глючная поддержка readyState

if (script.onreadystatechange === null) { // IE

script.onreadystatechange = function () {

var rs = this.readyState;

if (rs === 'loaded' || rs === 'complete') {

script.onreadystatechange = null;

callback();

}

};

} else {

// readyState не гарантирует успешность загрузки

script.onload = script.onerror = callback;

}

28

Уменьшение количества запросов

29

Бинокль в Яндекс.Панорамах

30

Было

31

Стало

Safari, Chrome, Firefox, Opera:

+ transform: rotate =

32

Проверка доступности transform

typeof style.WebkitTransform === 'string'

typeof style.MozTransform === 'string'

typeof style.OTransform === 'object' // LOL WUT?

typeof style.WebkitTransform !== 'undefined'

typeof style.MozTransform !== 'undefined'

typeof style.OTransform !== 'undefined'

typeof style.transform !== 'undefined'

Правильно:

33

Скорость загрузки — ещё одно конкурентное преимущество.

Руководитель группы

119021, Россия, Москва,

ул. Льва Толстого, 16

+7 495 739-00-00

+7 495 739-70-70 — факс

[email protected]

Азат Разетдинов

mailto:[email protected]



Technology

Optimizaciya vremeni zagruzki_azat_razetdinov