Как правильно оптимизировать страницу?

Question

John Johnson @Rocknrolla99

Some text

Как правильно оптимизировать страницу?

Подскажите какие вы действия совершаете чтобы страница грузилась быстрее ?По стеку ничего кроме js html css.
Я сейчас не имею ввиду сложные циклы в JS которые тормозят страницу.
Если есть чем добавить список , напишите пожалуйста.

Ужать картинки
Минифицировать JS/CSS
Минифицировать ХТМЛ-код
Для изображений можно использовать лейзи лоад либу
Разбить CSS файлы на основные стили и включить в страницу тегом style, вторичные стили - вынести в файл(ы) соотв.
Настроить проверку на то, поддерживает ли браузер формат WEBP и если поддерживает - отдавать картинки в этом формате.
Настроить проверку на то, поддерживает ли браузер формат WEBP и если поддерживает - отдавать картинки в этом формате.Здесь возможно не имеет смысле если используется лейзи лоад
создать и настроить изображения разного размера для разных экранов

Вопрос задан более трёх лет назад
127 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

Александр Епихин @leshiple

Все верно.
4) Либа не нужна.
5) В страницу включить стили для первого экрана. А остальные подключить так:

6) На PHP это можно сделать так:

if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false || strpos( $_SERVER['HTTP_USER_AGENT'], ' Chrome/' ) !== false ) {
//
}

7) Всегда имеет смысл. Изображения стоит подгружать по требованию. Слушать событие скрол и перед тем как изображение появится во viewport только тогда стоит подгружать это изображение. Это так же относится и к фоновым изображениям.
Если мобильного трафика много, то как можно меньше js

Написано более трёх лет назад
Одиночка Айс @daemonhk

Александр Епихин, тостер забраковал ваш код

Написано более трёх лет назад
Александр Епихин @leshiple

А так? stackoverflow.com

Написано более трёх лет назад

Решения вопроса 1

2 комментария

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

PHP

+1 ещё

Средний
Интересует простой скрипт стены комментариев с возможностью добавить фото и мгновенным выводом на страницу?
- 1 подписчик
- 2 часа назад
- 20 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 5 часов назад
- 20 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Three.js объект сзади не виден при повороте к нему лицом?
- 2 подписчика
- 8 часов назад
- 126 просмотров
1

ответ
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 10 часов назад
- 34 просмотра
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 10 часов назад
- 42 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 11 часов назад
- 111 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 12 часов назад
- 43 просмотра
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- вчера
- 107 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- вчера
- 83 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 45 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Создание и публикация короткого (reels) UGC-видео на YouTube-канале

25 апр. 2024, в 01:46

500 руб./за проект

Настроить перехват https-трафика для android-приложения

25 апр. 2024, в 01:02

10000 руб./за проект

Программа (скрипт) для автоматизации торговли Solana

25 апр. 2024, в 00:45

100 руб./в час

Все верно.
4) Либа не нужна.
5) В страницу включить стили для первого экрана. А остальные подключить так:

6) На PHP это можно сделать так:

if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false || strpos( $_SERVER['HTTP_USER_AGENT'], ' Chrome/' ) !== false ) {
//
}

7) Всегда имеет смысл. Изображения стоит подгружать по требованию. Слушать событие скрол и перед тем как изображение появится во viewport только тогда стоит подгружать это изображение. Это так же относится и к фоновым изображениям.
Если мобильного трафика много, то как можно меньше js
Александр Епихин, тостер забраковал ваш код

Answer 1 · 2019-08-19 10:41:24

+ Cache-Control
+ prefetch/preload
+ Service Worker (доп. бонус – js хранится в скомпилированном виде)
+ сервер поближе к ЦА
+ font-display: swap

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

А вообще да, пользуйтесь аудитами в Chrome DevTools, очень удобно :)

Как правильно оптимизировать страницу?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт