7 советов, как улучшить скорость загрузки сайта

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

В этой статья мы расскаже, чем вы с помощью программиста сможете улучшить скорость загрузки вашего сайта.

Совет №1. Загрузите CSS, как можно быстрее.

Один из способов это сделать — вставить весь ваш css код инлайново в код сайта. Это можно сделать вручную, а можете с помощью npm пакета gulp-inline-source.

Второй способ более красивый. Вы просто к строке, которая подгружает ваш css добавляете rel=»preload». Таким образом вы говорите браузеру загрузить этот файл, как можно быстрее и хранить его в кеше до того момента, пока он не понадобится.

Пример:

<link rel="preload" href="/style.css" as="style" />

Совет №2. Используйте подходящие размеры фотографий.

Это очевидно, незачем загружать огромную фотографию на 2 мегабайта, если пользователь просматривает сайт с мобильного устройства.

С помощью html разметки вы можете указать, какую фотографию показывать на том или ином разрешении.

Пример:

<img srcset="photo-name-320w.jpg 320w,
             photo-name-480w.jpg 480w,
             photo-name-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="photo-name-800w.jpg" alt="Photo alt">

Совет №3. Используйте loading=»lazy»

Здесь все очень просто — добавьте к тегу img или iframe следующий атрибут со значением:

loading="lazy"

С помощью этого атрибута мы может делать отложенную загрузку с помощью самого браузера. Это не гарантирует, что «ленивая» загрузка будет работать на всех устройствах. Поэтому вы можете использовать сторонние плагины и дополнения, чтобы реализовать отложенную загрузку.

К примеру, если ваш сайт работает на CMS WordPress, то рекомендуем установить плагин W3 Total Cache — он сразу решит несколько ваших задач. «Ленивая» загрузка здесь тоже есть.

Совет №4. Если загружаете шрифты — используйте font-display: swap;

Этим вы, как бы, говорите браузеру — можешь не ждать, пока загрузится шрифт, показывай контент в том шрифте, которым можешь. И только когда шрифт загрузится, то текст переключится на загруженный шрифт.

Пример:

@font-face {
  font-family: FontName;
  src: url(/path/to/fonts/fontname.woff) format('woff'),
       url(/path/to/fonts/fontname.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Совет №5. Используйте CDN.

CDN — это сеть серверов, которая раскидана по всему земному шару. И когда пользователь запрашивает у сервера какую-то страницу, ему нужно дождаться, пока его запрос дойдет до физического сервера, который, к примеру, расположен где-то в Аргентине, и затем уже запрос вернется обратно, уже с нужной страницей.

CDN позволяет сократить путь, отправляя запрос до ближайшего сервера. Для этого вам нужно подключить такую услугу у своего хостинг-провайдера. Либо вы можете воспользоваться бесплатным вариантом от Cloudflare.

Совет №6. Загружайте файл капчи (reCAPTCHA), только там, где он нужен.

Если вы добавили на сайт reCAPTCHA, то скорость загрузки сайта сразу упадет. Дело в том, что она тянет большое количество «левого» js-кода из «третьих» источников. Таким образом, подключив капчу, будьте готовы к целой армии непрошенных гостей в виде js файлов.

Поэтому подключайте капчу там, где у вас есть какая-либо форма. Если на странице нет формы, то лучше не добавлять на нее код капчи.

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

Совет №7. Кешируйте.

Кеширование всегда полезно. Если, конечно, вы не публикуете «горячие» новости или другую оперативную информацию.

Если используете WordPress — установите W3 Total Cache. Он будет кешировать ваши файлы.

Другие советы одной строкой:

• Минифицируйте все — html, css, js.
• Удаляйте в коде комментарии. Это можно сделать на этапе сборки проекта.
• Google Maps, reCAPTCHA, Facebook Pixel, Google Analytics — все они жутко замедляют загрузку сайта. В отдельной статье мы расскажем, как уменьшить их влияние на скорость сайта.
• Если ваш сайт работает на WordPress, то старайтесь контролировать свое желание установить еще один плагин. Возможно, лучше проконсультироваться с вашим программистом и реализовать нужный вам функционал без активации сторонних плагинов.

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