Поиск по сайту:
Для дилетанта лучшим пособием по программированию служит "алиса в стране чудес" - только потому, что для него это лучшее пособие по любому предмету. (Алан.Дж.Перлис)

Как сделать так, чтобы ваш сайт загружался быстрее?

17.08.2020

Сегодня мы поговорим немного подробнее о конкретных процессах, связанных с повышением скорости вашего сайта по множеству показателей.

Мы рассмотрим следующие показатели:

  • Использование 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 уменьшает стиль изображения за счет сжатия без потерь, то есть сохраняет качество при значительном уменьшении размера изображения.

Читать  Как создать небольшую фирму веб-дизайна. Часть 2

Во-вторых, вы можете использовать масштабирование 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.

Читать  Почему услуги "под ключ" упрощают электронную коммерцию к лучшему

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Поделиться в соц. сетях:


0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии

Это может быть вам интересно


Рекомендуемое
Фотографии на вашем сайте загружаются бесконечно? Что еще хуже, они вообще…

Спасибо!

Теперь редакторы в курсе.