Скорость загрузки сайта. 4 главных фактора.
Скорость загрузки сайта. Как увеличить скорость загрузки? Основные проблемы.
Рекомендованная скорость загрузки сайта гуглом – 2 секунды. (а теперь посмотрите на вашу скорость)
(Как проверить скорость загрузки сайта? Самый простой и быстрый способ это открыть инструменты разработчика CTRL+SHIFT+I Далее выбрать вкладку “Network”, потом обновить страничку, чтобы увидеть скорость загрузки нужно обновить страницу, Обновить без кэша: нужно нажать CTRL+F5 / CTRL+R. И внизу будет скорость загрузки.)
Проверить скорость загрузки сайта
с помощью сервиса от Google: PageSpeed Insights
(инфографика взята с сайта seoprofy ©2014)
Основные моменты которые влияют больше всего:
- Кэш
- CSS (стили)
- JS (скрипты)
- Картинки (их вес, размер – да именно размер HxW, Мета данные – да и такое есть, это их информация такая как: Дата, название, тема и пр.)
Дабы не расписывать много ненужной информации о мелких моментах, которые особо не влияют либо мизерно влияют – о них писать не буду.
Читайте также: Как продвинуть сайт в топ?
#1 КЭШ
Кэширование (или кэш) – это буфер (место), где хранятся какие-либо данные. В нашем случае это Картинки, код, стили и прочее.
Самое простое что можно сделать самому – это включить кэширование на хостинге.
(Если у вас хостинг Ukraine.com.ua тогда вам нужно зайти в “настройки сайта” -> “основные настройки” и там будет пункт “Кеширование” и там выбираете необходимое кол-во времени на которое будет выполняться кэширование вашего сайта. От себя порекомендую ставить 2 недели – при этом периоде кэширования google page speed insights добавляет немало так пунктов.)
другие способы связанные с htaccess, тегами для браузера и пр. можно найти в интернете уже довольно много статей и расписывать заново не вижу смысла. Про виды кэширования можете прочитать в статье на хабре.
#2 CSS (стили)
CSS – (Cascading Style Sheets — каскадные таблицы стилей).
Что можно сделать со стилями?
Ну во-первых сжать их.
Во-вторых сократить число файлов, т.е. объединить по максимуму, чтобы сократить число обращений к серверу.
В-третьих основные стили которые влияют на отображение видимой части первого экрана встроить непосредственно в <HEAD>, а остальные оставить в файлике.
также оставляю пару полезных ссылочек:
#3 JS (скрипты)
Здесь также у нас несколько способов по оптимизации скриптов.
- Отложить загрузку скрипта. Запхать его как можно ниже, вынести аж за </body> или еще ниже иногда это помогает, иногда это не вариант. Но на помощь приходит пункт под номером 2.
- ASYNC – асинхронная подгрузка скрипта. Делается по средством параметра “async”
<script src="1.js" async></script>
Здесь более подробно об async.
Ещё немного инфы о JS и его влияния. - Мало значимый пункт.
JS также можно сжать. Также объединить в 1 файл.
#4 Картинки
Вечно можно делать три вещи: Смотреть на огонь, смотреть на воду и оптимизировать картинки.
Тема достаточно обширная, поэтому постараюсь только важную инфу вам дать.
Оптимизировать вес.
Как? С помощью программы или сервиса.
- Программа для массовой работы с картинками FastStone Image с помощью неё можно
массово поменять размер изображений. Как и что уже гуглите там не сложно.
Скачать Faststone Image.
- Сервис для уменьшения размера картинок – Panda. А точнее TinyPNG & TinyJPG.
Главное преимущество ОНЛАЙН. Просто закидываете файлы и получаете обратно в сжатом варианте – Качество абсолютно не страдает (it’s Magic).
Ссылки: tinypng.com & tinyjpg.com
Оптимизировать Размер.
Размер как я писал выше можно изменить с помощью программы FastStone Image.
Размер это Height x Weight (Высота на Ширину).
Пример:
Размер | Пиксели | Размер файла |
---|---|---|
100 x 100 | 10 000 | 39 КБ |
200 x 200 | 40 000 | 156 КБ |
300 x 300 | 90 000 | 351 КБ |
500 x 500 | 250 000 | 977 КБ |
800 x 800 | 640 000 | 2500 КБ |
(если вам хочется узнать более подробно об этом можете прочитать справку гугла по этой теме. СТАТЬЯ от Google, но предупреждаю она задротская в каком-то степени)
Например у нас есть 2 изображения:
1) Вес 100кб, Размер 500х500
2) Вес 100кб, Размер 2500х2500
Казалось бы какая разница весят то они одинаково, следственно и загрузка их должна быть одинакова сложная или простая, но не тут то было если проверять по google page speed insgiht то он всё равно будет ругаться на изображение с большим разрешением.
Резюмируя: Размер имеет значение. Вес тоже. (остальное не так важно, но по доводам некоторых специалистов также имеет влияние, сейчас я говорю о Мета данных изображений)
Про мета данные ничего толком не написал, ну тут писать то и нечего…
Просто очистить полностью все мета данные у всех картинок, по легенде можно уменьшить размер в 2 раза. Узнал сам недавно (о влиянии размер файла, думал это совсем незначительно).
Также вот полезное видео о скорости загрузки сайта.
Кратко о выпуске:
- самые частые проблемы с загрузкой сайта
- варианты их решить
- на что стоит обратить внимание, чтобы все было хорошо
Переходим к просмотру видео:
P.S.
Если у вас остались вопросы или с чем-то не согласны пишите об этом в комментариях.