Повышение производительности при добавлении атрибутов ширины и высоты в теги изображений в html

Question

Я поддерживаю форум Django, на котором пользователи могут оставлять сообщения и фотографии друг для друга (или всю публикуемую информацию). Подумайте об этом, как аналог 9gag.

Я оценил производительность своего сайта через GTmetrix. Одна из вещей, с которой он меня оценил, - это специфика размеров изображения. В частности, он советует мне добавлять ширину и высоту изображения во всех тегах <img>, чтобы браузеру было легче отображать страницу, сводя к минимуму перекраску.

Все загруженные изображения динамически изменяются и сохраняются в БД, сохраняя их соотношение сторон. Единственный способ включить их высоты и ширину в теги <img> на шаблоне - это если я сохранил их ширину или высоту в БД. ИЛИ, если я прочитаю их ширину и высоту при обслуживании их для просмотра.

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

Новое изображение загружается в общественном месте моего сайта каждые несколько секунд. Вы можете сказать, что это в значительной степени основной продукт веб-сайта. У кого-нибудь есть большой опыт повышения производительности, включая ширину и высоту изображения в их шаблоне? Мне бы хотелось услышать некоторые советы по этому поводу, поэтому я могу продолжить его (или свалить идею).

Заранее спасибо.

Answer 1

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

Если ваш сайт является отзывчивым, а масштаб изображений соответствует размерам устройства, то я не стал бы слишком беспокоиться об этом предложениях по оптимизации. Twitter оценивает F (0) для этого на GTmetrix и имеет класс D и B соответственно, но все же имеет более быстрое время загрузки, чем большинство сайтов.

второстепенным, как было предложено Hassan:

Мое предложение состоит в том, что вы сосредоточены на внутренностях Джанго (шаблоны кэширования, например, с помощью кэша памяти и т.д..), А затем оптимизировать доставку статического контента (например. сжатие в Nginx, скажем) и настроить политики кэширования вашего веб-сервера. Здесь вы заметите большой прирост производительности. Наконец, если у вас много просмотров страниц, вы можете рассмотреть возможность развертывания Varnish или Squid перед вашим веб-сервером.