Всем привет. Сначала я хотел сделать рубрику про оптимизацию, но решил пойти дальше и выпустить серию уроков, которые помогут вам достичь наилучшего результата в оптимизации своего проекта.
В данной серии уроков, я научу вас как оптимизировать скорость загрузку страницы, как проверять свой проект на наличие ошибок, как оптимизировать изображения и многое другое.
Что влияет на время загрузки страницы?!
Количество HTTP-запросов
Большую нагрузку на сайт создают файлы которые подгружаются в момент загрузки страницы. Это могут быть файлы стилей, скрипты, изображения и так далее.
Для улучшения загрузки, вы можете объединить однотипные файлы. А файлы изображений можно сконвертировать и сжать.
Помещайте CSS файлы в начале страницы
Помещая подключение к css файлам в хедере страницы мы получаем постепенный рендеринг страницы, т.е. страница будет загружаться постепенно — сначала заголовок, потом лого наверху, навигация и т.д. – а это в свою очередь служит отличным индикатором загрузки страницы для пользователя и улучшает общее впечатление от сайта.
Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.
Помещайте javascript в конец страницы
Помещая javascript-файлы вниз страницы мы позволяем браузеру загрузить страницу с контентом в первую очередь, а уже потом начать загрузку javascript-файлов. Если же Ваш сайт идет в ногу со временем и содержит все возможные интерактивные «примочки», то этих javascript-файлов может быть несколько и весить они могут несколько сотен килобайт, поэтому перед загрузкой страницы заставлять пользователя ждать пока загрузятся все Ваши javascipt-файлы губительно.
Кроме того, внешние .js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.
Минимизируйте css и javascript
Минимизация файла — это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку.
Это только часть методов, которые помогут вам увеличить скорость загрузки страницы. Далее мы будем разбирать методы подробнее в следующих записях.
Большое количество дополнительных плагинов и библиотек
Не нагружайте сайт большими библиотеками и плагинами. Ищите наиболее выгодные решения для реализации вашей задумки.
К примеру, во многих фреймворках для использования сетки, вы можете добавить файл который хранит только сетку, без других стилей.
Сайты на которых можно проверить свой сайт
Существует огромное количество сайта на которых вы можете проверить свой сайт на адаптивность, скорость загрузки страниц, ошибки.
Я уже выпускал запись на эту тему — http://prog-time.ru/sajty-bez-kotoryh-nevozmozhno-sozdanie-kachestvennogo-web-proekta/
Для проверки скорости загрузки я использую сервис от Google — PageSpeed — https://developers.google.com/speed/pagespeed/insights/
Для проверки адаптивности я использую сайт Adaptivator — http://adaptivator.ru
Для проверки сайта на наличие CSS ошибок можно использовать этот сайт — http://jigsaw.w3.org/css-validator/
Проверка на наличие HTML ошибок — https://validator.w3.org
Проверка орфографии на веб странице — https://tech.yandex.ru/speller/
На этом можно закончить. В дальнейшем мы разберем как можно оптимизировать загрузку карты на сайт, как оптимизировать загрузку видео плеера, как сделать постепенную загрузку изображений и много другое.
