Pull to refresh
0
1cloud.ru
IaaS, VPS, VDS, Частное и публичное облако, SSL

Чеклист: Как загружать страницы быстрее

Reading time 2 min
Views 30K
Original author: Nate Berkopec
Мы постоянно работаем над тем, чтобы IaaS был простым и понятным даже для тех, кто не сталкивался с ИТ-сферой. Для этого мы проводим оптимизацию всех систем и рассказываем о своем опыте в нашем блоге на Хабре.

Пара примеров:


Сегодня мы поговорим о том, как ускорить загрузку страниц, и взглянем на советы эксперта по Ruby Нейта Беркопеца (Nate Berkopec).


/ фото Epicantus

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

0. Постарайтесь задействовать ЦОД, которые будут более оптимально расположены.

1. Используйте кеширование на уровне приложений и HTTP.

2. Обратите внимание на качество ваших SQL-запросов.

3. Минимизируйте элементы JS и CSS (любые аналитические или маркетинговые инструменты будут замедлять скорость загрузки страницы).

4. Не перегружайте страницы Javascript-элементами вроде $(document).ready().

5. Используйте аналитические инструменты с помиллисекундной разбивкой (Chrome Timeline).

6. Отключите все расширения браузера при проведении профилирования.

7. Учитывайте путь до конечного пользователя — его можно проследить с помощью traceroute.

8. Используйте ping, чтобы узнать задержку на конкретных узлах.

9. Огромный объем времени может уходить именно на парсинг страниц (например, до 200мс для The Verge).

10. На загрузку скриптов по Javascript-тегам может уходить до нескольких секунд (необходимо использовать атрибутом async). Внешний СSS стоит размещать перед JS-кодом.

11. Конвертация и конструирование CSS находятся в событии Recalculate Styles (для Chrome Timeline). Здесь необходимо оптимизировать излишние зависимости и правила.

12. Следующее событие — Layout — преобразование в изображение на экране. На этом этапе идет работа с геометрией объектов и зачастую происходит пересчет всей страницы.

13. Далее следует обратить внимание на событие DomContentLoaded и Paint. К этому времени рендеринг уже произведен и начинается непосредственная отрисовка на экране.

P.S. Немного о работе нашего IaaS-провайдера:

Tags:
Hubs:
+32
Comments 22
Comments Comments 22

Articles

Information

Website
1cloud.ru
Registered
Founded
Employees
31–50 employees
Location
Россия