ЧАСТЬ 1. ИНСТРУМЕНТЫ ДЛЯ ОПТИМИЗАЦИИ САЙТА
Для того, чтобы каким-то образом повлиять на скорость загрузки страницы, ее необходимо измерить и понимать, что на нее влияет. В первом разделе курса разберем инструменты, которыми можно измерить скорость загрузки сайта, подробно рассмотрим все показатели и параметры, влияющие на его скорость загрузки, и разберемся, что каждый из них означает
ДЛЯ ТОГО, ЧТОБЫ УСКОРИТЬ ЗАГРУЗКУ САЙТА НЕОБХОДИМО:
- понимать из каких этапов состоит загрузка сайта;
- понимать, что происходит на каждом из этапов;
- измерить показатели каждого этапа.
- И чем лучше мы будем понимать, что означают измеренные показатели и как на них влиять, тем более качественно мы сможем произвести оптимизацию скорости загрузки сайта. Именно поэтому, необходимо детально рассмотреть инструменты измерения скорости и их показатели.
ИЗ ПЕРВОЙ ЧАСТИ КУРСА ВЫ УЗНАЕТЕ:
- Из каких этапов состоит скорость загрузки сайта
- Что происходит на каждом из этапов
- Какими инструментами мы сможем измерить скорость загрузки
- Какие основные параметры влияют на скорость больше всего
- Детально разберетесь со всеми параметрами, влияющими на скорость
- Что такое CDN и для чего ее использую
- В первой части курса мы детально разберем все возможности, которые нам предоставляет сервис webpagetest. Так же познакомимся с сервисами, которые предоставляет google. И рассмотрим еще ряд подобных сервисов.
ПОСЛЕ ИЗУЧЕНИЯ ПЕРВОЙ ЧАСТИ КУРСА ВЫ:
- Научитесь пользоваться инструментами для измерения скорости загрузки
- Разберетесь с параметрами, которые мы получаем при использовании различных сервисов
- Будете понимать, какие параметры влияют на скорость загрузки и как улучшить их значения
СОДЕРЖАНИЕ ПЕРВОГО РАЗДЕЛА:
- Урок 1. Введение
- Урок 2. Обзор сервиса webpagetest
- Урок 3. Параметры сервиса webpagetest. Часть 1
- Урок 4. Параметры сервиса webpagetest. Часть 2
- Урок 5. Параметры сервиса webpagetest. Часть 3
- Урок 6. Обзор сервиса PageSpeed от google
- Урок 7. Установка расширения PageSpeed в браузер Chrome
ЧАСТЬ 2. УСКОРЕНИЕ ЗАГРУЗКИ САЙТА
Во втором разделе курса мы займемся непосредственно ускорением загрузки сайта. Используя инструменты измерения скорости, мы постепенно, шаг за шагом улучшим показатели загрузки страницы. Вместе с этим мы изучим сервисы и инструменты, которые, которые могут нам помочь в оптимизации страницы. Также в этом разделе курса мы рассмотрим оптимизацию загрузки страницы для мобильных устройств. Узнаем о дополнительных методах оптимизации загрузки для мобильных устройств.
ИЗ ВТОРОЙ ЧАСТИ КУРСА ВЫ УЗНАЕТЕ:
- Как включить кеширование контента в браузере посетителя и почему это необходимо делать
- Как включить сжатие файлов на сервере и на что это влияет
- Как максимально быстро (за два клика) оптимизировать изображения
- Как уменьшить объем css файлов, и что для этого нужно
- Как уменьшить объем js файлов, и что для этого нужно
- Как оптимизировать css для мобильных устройств
- Что такое "критический" css, почему он важен и как его определить
- Как оптимизировать js файлы для мобильных устройств
- По итогам второй части курса мы уже существенно ускорим загрузку сайта и добьемся самых высоких оценок эффективности загрузки страницы от сервисов google.
ПОСЛЕ ИЗУЧЕНИЯ ВТОРОЙ ЧАСТИ КУРСА ВЫ:
- Научитесь включать кеширование на сервере
- Научитесь включить сжатие файлов на сервере
- Познакомитесь с очень интересным способом оптимизации картинок
- Научитесь уменьшать размер css файлов
- Научитесь уменьшать размер js файлов
- Научитесь определять и создавать "критический" css
СОДЕРЖАНИЕ ВТОРОГО РАЗДЕЛА:
- Урок 1. Введение
- Урок 2. Включение кеша на сервере
- Урок 3. Включение сжатия файлов на сервере
- Урок 4. Оптимизация изображений
- Урок 5. Оптимизация CSS файлов
- Урок 6. Оптимизация JS файлов
- Урок 7. Оптимизация CSS для мобильных устройств
- Урок 8. Определение критического CSS
- Урок 9. Оптимизация javascript для мобильных устройств
- Урок 10. Заключение
ЧАСТЬ 3. ТУРБО УСКОРЕНИЕ САЙТА
В третьем разделе мы продолжим ускорять загрузку страницы. Еще больше углубимся в оптимизацию. Рассмотрим нестандартные подходы к оптимизации некоторых типов контента. Также в этой части курса я расскажу и покажу некоторые свои нестандартные приемы, которые мне приходилось применять в своей практике. Уверен, они будут вам полезны!
ИЗ ТРЕТЬЕЙ ЧАСТИ КУРСА ВЫ УЗНАЕТЕ:
- Картинки какого формата предпочтительней использовать в том или ином случае
- Сервисы, с помощью которых можно оптимизировать изображения, их достоинства и недостатки
- Как сохранять изображения с максимальной эффективностью и без потерь качества
- Узнаете нестандартный метод оптимизации изображений
- Как использовать на практике CDN, чем руководствоваться при выборе CDN
- Как могут влиять фоновые изображения на загрузку страницы
- Особенности влияния загрузки фоновых изображений для мобильных устройств
- Как учесть особенности влияния мобильных устройств для максимальной оптимизации css
- Что такое css спрайты и как их создавать
- Как представить изображения в виде набора символов, и в каких случаях можно применять данный метод, а в каких нет
- Как можно оптимизировать графику на сайте используя css3
- Как отобразить видео на странице, не загружая его
- Как определить контент нужный только для данной страницы и загрузить именно его
- Как отложить загрузку верхних элементов страницы на самый последний момент загрузки
- Как мы можем использовать данные аналитики для еще большей оптимизации страницы
- По итогам третьей части курса еще более ускорим загрузку страницы.
ПОСЛЕ ИЗУЧЕНИЯ ТРЕТЬЕЙ ЧАСТИ КУРСА ВЫ:
- Будете четко понимать в каких случаях какой формат изображений использовать и почему
- Научитесь максимально оптимизировать изображения
- Научитесь на практике использовать cdn
- Избавитесь от влияния фоновых изображений на скорость загрузки страницы на мобильных устройствах
- Научитесь создавать и использовать спрайты
- Представите изображения в виде набора символов
- Сможете обходиться без лишних картинок, используя css3
- Сможете показать видео на странице, не загружая его
- Научитесь загружать только то, что нужно на данной странице
- Научитесь переносить загрузку верхних элементов на самый последний момент
- Научитесь использовать аналитику посещаемости для еще большего ускорения страницы
СОДЕРЖАНИЕ ТРЕТЬЕГО РАЗДЕЛА:
- Урок 1. Введение
- Урок 2. Оптимизация изображений на сайте. Часть 1
- Урок 3. Оптимизация изображений на сайте. Часть 2
- Урок 4. Оптимизация изображений на сайте. Часть 3
- Урок 5. Использование CDN для статического контента
- Урок 6. Оптимизация фоновых изображений в CSS
- Урок 7. CSS спрайты для изображений
- Урок 8. Встраивание изображений - data:URL
- Урок 9. Оптимизация кнопки на сайте
- Урок 10. Оптимизация загрузки видео YouTube, Vimeo
- Урок 11. Загрузка только необходимого для сайта контента
- Урок 12. Перенос загрузки верхних элементов в конец кода
- Урок 13. Использование инструментов аналитики для оптимизации
- Урок 14. Заключение
На сегодня это самый полный и систематизированный курс по оптимизации загрузки сайтов. В нём я делюсь своим методом работы, который я отточил за несколько лет практики. Если вы возьмёте и примените всё, что я вам дал – вы сможете полностью оптимизировать ваш сайт (или сайт вашего клиента, если вы веб-мастер) за два дня плотной работы. Как только вы это сделаете, вы получите все те выгоды, про которые я писал выше – вас полюбят поисковики… вас полюбят клиенты… и за счёт этого вырастут продажи.
