Скорость загрузки сайта. 4 главных фактора.

скорость загрузки сайта

Скорость загрузки сайта. Как увеличить скорость загрузки? Основные проблемы.

Рекомендованная скорость загрузки сайта гуглом – 2 секунды. (а теперь посмотрите на вашу скорость)

(Как проверить скорость загрузки сайта? Самый простой и быстрый способ это открыть инструменты разработчика CTRL+SHIFT+I Далее выбрать вкладку “Network”, потом обновить страничку, чтобы увидеть скорость загрузки нужно обновить страницу, Обновить без кэша: нужно нажать CTRL+F5 / CTRL+R. И внизу будет скорость загрузки.)

Проверить скорость загрузки сайта
с помощью сервиса от Google: PageSpeed Insights

Инфографика: Скорость загрузки сайта.(инфографика взята с сайта seoprofy ©2014)

Основные моменты которые влияют больше всего:

  1. Кэш
  2. CSS (стили)
  3. JS (скрипты)
  4. Картинки (их вес, размер – да именно размер HxW, Мета данные – да и такое есть, это их информация такая как: Дата, название, тема и пр.)

Дабы не расписывать много ненужной информации о мелких моментах, которые особо не влияют либо мизерно влияют – о них писать не буду.

Читайте также: Как продвинуть сайт в топ?

#1 КЭШ

Кэширование (или кэш) – это буфер (место), где хранятся какие-либо данные. В нашем случае это Картинки, код, стили и прочее.

Самое простое что можно сделать самому – это включить кэширование на хостинге.
(Если у вас хостинг Ukraine.com.ua тогда вам нужно зайти в “настройки сайта” -> “основные настройки” и там будет пункт “Кеширование” и там выбираете необходимое кол-во времени на которое будет выполняться кэширование вашего сайта. От себя порекомендую ставить 2 недели – при этом периоде кэширования google page speed insights добавляет немало так пунктов.)

другие способы связанные с htaccess, тегами для браузера и пр. можно найти в интернете уже довольно много статей и расписывать заново не вижу смысла. Про виды кэширования можете прочитать в статье на хабре.

#2 CSS (стили)

CSS – (Cascading Style Sheets — каскадные таблицы стилей).
Что можно сделать со стилями?
Ну во-первых сжать их.
Во-вторых сократить число файлов, т.е. объединить по максимуму, чтобы сократить число обращений к серверу.
В-третьих основные стили которые влияют на отображение видимой части первого экрана встроить непосредственно в <HEAD>, а остальные оставить в файлике.

также оставляю пару полезных ссылочек:

#3 JS (скрипты)

Здесь также у нас несколько способов по оптимизации скриптов.

  1. Отложить загрузку скрипта. Запхать его как можно ниже, вынести аж за </body> или еще ниже иногда это помогает, иногда это не вариант. Но на помощь приходит пункт под номером 2.
  2. ASYNC – асинхронная подгрузка скрипта. Делается по средством параметра “async”
    <script src="1.js" async></script>

    Здесь более подробно об async.
    Ещё немного инфы о JS и его влияния.

  3. Мало значимый пункт.
    JS также можно сжать. Также объединить в 1 файл.

#4 Картинки

Вечно можно делать три вещи: Смотреть на огонь, смотреть на воду и оптимизировать картинки.

Тема достаточно обширная, поэтому постараюсь только важную инфу вам дать.

Оптимизировать вес.

Как? С помощью программы или сервиса.

  • Программа для массовой работы с картинками FastStone Image с помощью неё можно
    массово поменять размер изображений. Как и что уже гуглите там не сложно.
    Скачать Faststone Image.
  • Сервис для уменьшения размера картинок – Panda. А точнее TinyPNG & TinyJPG.
    Главное преимущество ОНЛАЙН. Просто закидываете файлы и получаете обратно в сжатом варианте – Качество абсолютно не страдает (it’s Magic).
    Ссылки: tinypng.com & tinyjpg.com

Оптимизировать Размер.

Размер как я писал выше можно изменить с помощью программы FastStone Image.
Размер это Height x Weight (Высота на Ширину).

Пример:

РазмерПикселиРазмер файла
100 x 10010 00039 КБ
200 x 20040 000156 КБ
300 x 30090 000351 КБ
500 x 500250 000977 КБ
800 x 800640 0002500 КБ

(если вам хочется узнать более подробно об этом можете прочитать справку гугла по этой теме. СТАТЬЯ от Google, но предупреждаю она задротская в каком-то степени)

Например у нас есть 2 изображения:
1) Вес 100кб, Размер 500х500
2) Вес 100кб, Размер 2500х2500
Казалось бы какая разница весят то они одинаково, следственно и загрузка их должна быть одинакова сложная или простая, но не тут то было если проверять по google page speed insgiht то он всё равно будет ругаться на изображение с большим разрешением.

Резюмируя: Размер имеет значение. Вес тоже. (остальное не так важно, но по доводам некоторых специалистов также имеет влияние, сейчас я говорю о Мета данных изображений)

Про мета данные ничего толком не написал, ну тут писать то и нечего…
Просто очистить полностью все мета данные у всех картинок, по легенде можно уменьшить размер в 2 раза. Узнал сам недавно (о влиянии размер файла, думал это совсем незначительно).

Также вот полезное видео о скорости загрузки сайта.

Кратко о выпуске:

  • самые частые проблемы с загрузкой сайта
  • варианты их решить
  • на что стоит обратить внимание, чтобы все было хорошо

Переходим к просмотру видео:

P.S.
Если у вас остались вопросы или с чем-то не согласны пишите об этом в комментариях.

Tags: