Сегодня мы поговорим немного подробнее о конкретных процессах, связанных с повышением скорости вашего сайта по множеству показателей.
Мы рассмотрим следующие показатели:
- Использование CDN
- Масштабирование изображений в CSS
- Меньше HTTP-запросов
Итак, без лишних слов, приступим.
Использование CDN
CDN – необходимость для любого высокопроизводительного веб-сайта. CDN – это сеть доставки контента, которая в основном представляет собой набор серверов, на которых размещаются файлы контента, такие как изображения, видео и т. Д. Причина, по которой веб-сайты с поддержкой CDN работают быстрее, чем те, которые не работают, просто связана с нагрузкой на сервер.
Идея распределения данных между несколькими серверами обеспечивает большую скорость. Это связано с тем, что серверы CDN распределены географически, и сервер, обслуживающий конкретного пользователя, выбирается на основе близости пользователя к серверу. Пользователь в Индии будет предпочитать доступ к контенту с сервера в Китае, а не в России.
Ведущими поставщиками CDN являются Akamai Technologies, Level3 и Amazon Web Services.
Масштабирование изображений в CSS
Думаете о масштабировании изображений в HTML? Если да, позвольте нам прояснить, это плохая идея! Не делай этого. Если ваше изображение должно быть 100 на 100 пикселей, но на самом деле его размер 5000 на 5000 пикселей и вы масштабируете изображение в HTML, вы делаете это неправильно.
Для уменьшения размера изображения лучше использовать Smush.it. Инструмент Smush.it Yahoo уменьшает стиль изображения за счет сжатия без потерь, то есть сохраняет качество при значительном уменьшении размера изображения.
Во-вторых, вы можете использовать масштабирование CSS, например <img style = “width: 100px; высота: 100px;” src =”image.jpg” />.
Меньше HTTP-запросов
Это одна из самых распространенных проблем, когда дело касается медленных веб-сайтов. Признаком медленного сайта является огромное количество HTTP-запросов, которые требуют времени и, как следствие, раздражают пользователя. HTTP-запросы могут варьироваться от загрузки файлов сценариев, файлов CSS и т. д.
Давайте посмотрим, что помогает уменьшить количество HTTP-запросов и сделать работу пользователя более быстрой и плавной. Веб-мастер или веб-разработчик могут уменьшить количество HTTP-запросов следующими способами:
- Минимизация файлов сценариев JavaScript и таблиц стилей CSS
- Избегайте встроенных стилей CSS
- Использовать спрайты изображений
- Поместите таблицы стилей вверху
- Скрипты кладем в футере
Минимизация JavaScript и CSS
Важно минимизировать ваши файлы JS и CSS во время производства. Для тестирования и разработки – да, вы можете использовать неминифицированные версии, но в остальном – нет. Возможно, вы видели, как ведущие CSS-фреймворки, такие как Twitter bootstrap, предоставляют уменьшенную версию своего CSS для производственного использования, и в этом причина: они быстрее загружают сайты.
Если вы используете jQuery, вам необходимо использовать уменьшенную версию. Даже у других первоклассных JS-библиотек есть уменьшенная версия для производственного использования. Теперь вам должно быть интересно, что такое минифицированная версия, будь то JS или CSS. Что ж, ответ довольно прост.
Минифицированная версия – это файл, который весит меньше, чем неминифицированный, потому что в коде нет пробелов, что позволяет сэкономить значительное количество килобайт. Вы можете использовать https://cssminifier.com/, чтобы минимизировать свой код CSS. Аналогичным образом, для JavaScript вы можете проверить http://jscompress.com/. Кстати, этот процесс минификации кода также известен как сжатие кода.
Избегайте встроенных стилей CSS
Использование встроенных стилей CSS работает, но не рекомендуется. Встроенный стиль – это стиль CSS, применяемый к разметке HTML напрямую, как <p style = “color: red;”> Текст </p>. Рекомендуется избегать использования встроенных стилей CSS и лучше объединить весь код CSS в отдельный файл CSS.
Использовать спрайты изображений
Мы используем Image Sprites, потому что они просто делают вещи в 2 раза быстрее. Как? Это связано с тем, что спрайт изображения включает в себя несколько разных изображений в одном файле. Например, большинство панелей навигации используют спрайты изображений вместо отдельных изображений. Это хорошая практика. Это позволяет странице загружаться быстрее, так как клиентская сторона должна загружать одно изображение вместо множества разных, что значительно ускоряет работу!
И главное
Когда страница загружается, она загружает HTML, CSS и JavaScript. Рекомендуется размещать таблицы стилей CSS вверху, а скрипты JS – внизу. Это связано с тем, что таблицы стилей CSS обычно легче, и это помогает быстро отображать страницу. JavaScript может появиться позже, так как он не требуется для визуализации страницы (т. е. Того, как она выглядит).
Также рекомендуется использовать внешние файлы CSS и JavaScript, то есть избегать наличия кода CSS или JS в разметке HTML. Это загружает страницы быстрее и становится еще лучше, если вы используете CDN.