Как ускорить загрузку сайта любой сложности и на любом движке всего за два дня. На сегодня это самый полный и систематизированный курс по оптимизации загрузки сайтов. В нём я делюсь своим методом работы, который я отточил за несколько лет практики.
Если вы возьмёте и примените всё, что я вам дал – вы сможете полностью оптимизировать ваш сайт (или сайт вашего клиента, если вы веб-мастер) за два дня плотной работы.
Часть 1. Инструменты для оптимизации сайтаВ первом разделе курса разберем инструменты, которыми можно измерить скорость загрузки сайта, подробно
рассмотрим все показатели и параметры, влияющие на его скорость загрузки, и разберемся, что каждый из них означает.
Из первой части курса вы узнаете:
- Из каких этапов состоит скорость загрузки сайта
- Что происходит на каждом из этапов
- Какими инструментами мы сможем измерить скорость загрузки
- Какие основные параметры влияют на скорость больше всего
- Детально разберетесь со всеми параметрами, влияющими на скорость
- Что такое CDN и для чего ее использую
Содержание первого раздела:
- Введение
- Обзор сервиса webpagetest
- Параметры сервиса webpagetest. Часть 1
- Параметры сервиса webpagetest. Часть 2
- Параметры сервиса webpagetest. Часть 3
- Обзор сервиса PageSpeed от google
- Установка расширения PageSpeed в браузер Chrome
- Дополнительные материалы
Часть 2. Ускорение загрузки сайта
Во втором разделе курса мы займемся непосредственно ускорением загрузки сайта. Используя инструменты
измерения скорости, мы постепенно, шаг за шагом улучшим показатели загрузки страницы. Вместе с этим мы изучим сервисы и инструменты, которые, которые могут нам помочь в оптимизации страницы.
Из второй части курса вы узнаете:
- Как включить кеширование контента в браузере посетителя и почему это необходимо делать
- Как включить сжатие файлов на сервере и на что это влияет
- Как максимально быстро (за два клика) оптимизировать изображения
- Как уменьшить объем css файлов, и что для этого нужно
- Как уменьшить объем js файлов, и что для этого нужно
- Как оптимизировать css для мобильных устройств
- Что такое "критический" css, почему он важен и как его определить
- Как оптимизировать js файлы для мобильных устройств
Содержание второго раздела:
- Введение
- Включение кеша на сервере
- Включение сжатия файлов на сервере
- Оптимизация изображений
- Оптимизация CSS файлов
- Оптимизация JS файлов
- Оптимизация CSS для мобильных устройств
- Определение критического CSS
- Оптимизация jаvascript для мобильных устройств
- Заключение
- Дополнительные материалы
Часть 3. Турбо ускорение сайта
В третьем разделе мы продолжим ускорять загрузку страницы. Еще больше углубимся в оптимизацию. Рассмотрим
нестандартные подходы к оптимизации некоторых типов контента.
Из третьей части курса вы узнаете:
- Картинки какого формата предпочтительней использовать в том или ином случае
- Сервисы, с помощью которых можно оптимизировать изображения, их достоинства и недостатки
- Как сохранять изображения с максимальной эффективностью и без потерь качества
- Узнаете нестандартный метод оптимизации изображений
- Как использовать на практике CDN, чем руководствоваться при выборе CDN
- Как могут влиять фоновые изображения на загрузку страницы
- Особенности влияния загрузки фоновых изображений для мобильных устройств
- Как учесть особенности влияния мобильных устройств для максимальной оптимизации css
- Что такое css спрайты и как их создавать
- Как представить изображения в виде набора символов, и в каких случаях можно применять данный метод, а в каких нет
- Как можно оптимизировать графику на сайте используя css3
- Как отобразить видео на странице, не загружая его
- Как определить контент нужный только для данной страницы и загрузить именно его
- Как отложить загрузку верхних элементов страницы на самый последний момент загрузки
- Как мы можем использовать данные аналитики для еще большей оптимизации страницы
Содержание третьего раздела:
- Введение
- Оптимизация изображений на сайте.
- Использование CDN для статического контента
- Оптимизация фоновых изображений в CSS
- CSS спрайты для изображений
- Встраивание изображений - dаta:URL
- Оптимизация кнопки на сайте
- Оптимизация загрузки видео YouTube, Vimeo
- Загрузка только необходимого для сайта контента
- Перенос загрузки верхних элементов в конец кода
- Использование инструментов аналитики для оптимизации
- Заключение
- Дополнительные материалы