Поисковые системы
<<  Архитектура инфомационно-поисковой системы Google Прогнозирование тематического поискового трафика  >>
Разгони свой сайт
Разгони свой сайт
Содержание
Содержание
Цели и задачи клиентской оптимизации
Цели и задачи клиентской оптимизации
Структура веб-страницы
Структура веб-страницы
Фокус на стороне клиента
Фокус на стороне клиента
Процесс загрузки страницы
Процесс загрузки страницы
Основные задачи
Основные задачи
Основные методы
Основные методы
Параллельная загрузка
Параллельная загрузка
Психологические аспекты
Психологические аспекты
Быстрые сайты
Быстрые сайты
Эффекты быстрых сайтов
Эффекты быстрых сайтов
Прибыль быстрых сайтов
Прибыль быстрых сайтов
Связь с серверной оптимизацией
Связь с серверной оптимизацией
Основные правила
Основные правила
Спорные моменты
Спорные моменты
Плюсы для сервера
Плюсы для сервера
Применение в разработке приложений
Применение в разработке приложений
Доставка информации
Доставка информации
Настройка сервера
Настройка сервера
После основной загрузки
После основной загрузки
Пост-загрузка
Пост-загрузка
Сжатие файлов
Сжатие файлов

Презентация: «Особенности клиентской оптимизации». Автор: Nikolay. Файл: «Особенности клиентской оптимизации.ppt». Размер zip-архива: 49 КБ.

Особенности клиентской оптимизации

содержание презентации «Особенности клиентской оптимизации.ppt»
СлайдТекст
1 Разгони свой сайт

Разгони свой сайт

Лекция 1: Особенности клиентской оптимизации

Мациевский Николай

webo.in

1 / 23

2 Содержание

Содержание

Цели и задачи клиентской оптимизации Психологические аспекты Связь с серверной оптимизацией Применение в разработке веб-приложений

webo.in

2 / 23

3 Цели и задачи клиентской оптимизации

Цели и задачи клиентской оптимизации

webo.in

3 / 23

4 Структура веб-страницы

Структура веб-страницы

Один HTML-файл И много-много ресурсных файлов Таблицы стилей Клиентские скрипты Фоновые картинки Изображения на странице Мультимедийные файлы

webo.in

4 / 23

5 Фокус на стороне клиента

Фокус на стороне клиента

Загрузка HTML занимает 5% Остальное приходится на статические ресурсы Текстовые файлы Бинарное содержимое страницы

webo.in

5 / 23

6 Процесс загрузки страницы

Процесс загрузки страницы

Предзагрузка Белый экран в браузере пользователя Интерактивная загрузка JavaScript-файлы Полная загрузка Картинки и мультимедиа Пост-загрузка После window.onload

webo.in

6 / 23

7 Основные задачи

Основные задачи

Уменьшение времени предзагрузки Максимально быстро показать пользователю предварительную картинку Ускорение основной загрузки Распараллелить поток загрузки после прохождения «узкого места» Обеспечить комфортную работу Устранить задержки при взаимодействии с сайтом

webo.in

7 / 23

8 Основные методы

Основные методы

Основные методы (1)

Уменьшение размера объектов Сжатие текста и оптимизация изображений Кэширование статики Минимум запросов при повторном посещении Объединение объектов CSS Sprites, data:URI, объединение текстовых файлов

webo.in

8 / 23

9 Параллельная загрузка

Параллельная загрузка

Основные методы (2)

Параллельная загрузка объектов Уменьшение времени ожидания ответа Оптимизация CSS Оптимальная структура стилевых правил Оптимизация JavaScript Устранение «узких мест» в работе клиентских скриптов

webo.in

9 / 23

10 Психологические аспекты

Психологические аспекты

webo.in

10 / 23

11 Быстрые сайты

Быстрые сайты

Быстрые сайты – это хорошо

Меньше раздражают пользователей Ожидание больше 4 секунд нервирует Пользователи с быстрым доступом ждут меньше Вызывают больше доверия Побуждают к дальнейшим действиям Пользователи проводят больше времени

webo.in

11 / 23

12 Эффекты быстрых сайтов

Эффекты быстрых сайтов

Быстрый интернет-магазин Создает ощущение надежности Быстрый развлекательный портал Затягивает пользователей Быстрый новостной портал / блог Повышает достоверность информации

webo.in

12 / 23

13 Прибыль быстрых сайтов

Прибыль быстрых сайтов

Google (2006) 400ms = 20% рекламных доходов amazon (2007) 100ms = 1% продаж live.Com (2007) 1000ms = 1,5% рекламных доходов

webo.in

13 / 23

14 Связь с серверной оптимизацией

Связь с серверной оптимизацией

webo.in

14 / 23

15 Основные правила

Основные правила

Кэширование во главу угла Уменьшает число запросов и время на их передачу Меньше запросов – легче серверу Каждый сокет занимает серверные ресурсы Архивировать и кэшировать на сервере Можно создавать статические архивы для текстовых файлов

webo.in

15 / 23

16 Спорные моменты

Спорные моменты

Параллельные загрузки Создают большое число одновременные соединений Все-в-одном файле Сложное технологическое решение Уменьшение cookie в размере Может быть тяжело поддерживать

webo.in

16 / 23

17 Плюсы для сервера

Плюсы для сервера

Снижение нагрузки За счет уменьшения числа соединений и времени их использования Простое использование Несколько правил в конфигурационном файле Поможет не только серверу Ускорение загрузки сайта у всех конечных пользователей

webo.in

17 / 23

18 Применение в разработке приложений

Применение в разработке приложений

webo.in

18 / 23

19 Доставка информации

Доставка информации

Максимальное ускорение предзагрузки Сжатие для CSS/HTML Объединение CSS-файлов Убираем интерактивную загрузку Переносим JavaScript в основную загрузку В итоге: доставленный и оформленный HTML

webo.in

19 / 23

20 Настройка сервера

Настройка сервера

Кэширование Статические ресурсы должны браться из клиентского кэша Архивирование «На лету» или в виде статических архивов Зеркала для параллельных запросов Зависит от общего числа файлов на странице

webo.in

20 / 23

21 После основной загрузки

После основной загрузки

«Ненавязчивый» JavaScript JavaScript – это расширение, а не основной функционал Находит DOM-элементы и обеспечиваем их взаимодействие с пользователем Серверные интерфейсы для AJAX Модульная загрузка компонентов Или один JavaScript-файл

webo.in

21 / 23

22 Пост-загрузка

Пост-загрузка

Предупреждаем действия пользователя Ресурсы, которые используются на второстепенных страницах «Скрытый» функционал данной страницы Загрузка в процессе ознакомления 1-2 секунды уходит на знакомство с сайтом При чтении статей это может быть несколько минут «Линия сгиба» страницы

webo.in

22 / 23

23 Сжатие файлов

Сжатие файлов

В следующей лекции: Сжатие файлов

HTML-архивирование Все секреты сжатия для CSS Сжатие и кэширование для JavaScript favicon.ico PNG и GIF Сжатие изображений Два слова о cookie

webo.in

23 / 23

«Особенности клиентской оптимизации»
http://900igr.net/prezentacija/informatika/osobennosti-klientskoj-optimizatsii-63166.html
cсылка на страницу

Поисковые системы

24 презентации о поисковых системах
Урок

Информатика

130 тем
Слайды
900igr.net > Презентации по информатике > Поисковые системы > Особенности клиентской оптимизации