Рубрики
Без рубрики

Ускорение up tesla.com – Часть 1. Изображения и JS Minification

Мне нравится Тесла. Я думаю, что они отличная компания, работающая над лучшим будущим. Вот почему я был на … Теги с WebPerf, JavaScript, CSS.

Мне нравится Тесла. Я думаю, что они отличная компания, работающая над лучшим будущим. Вот почему я был на своем веб-сайте недавно, в довольно среднем соединении, и я заметил, что она загружается очень медленно. Так, конечно, я буду я, я открыл инструменты DEV Firefox и начал копать.

TLDR : В конце дня мне удалось ускорить время домашнего страницы, чтобы интерактивные свыше 17 секунд до 4 секунд, удалив ненужные вещи и оптимизируя доставку активов.

Эта двухсторонняя серия статьи предназначена для демонстрации реального использования случая использования того, как вы можете:

  1. Уведомление о проблем – запустить webpagetest/маяк на вашем сайте
  2. Определите комнаты для улучшения – ищите тяжелые ресурсы, количество запросов и уделять особое внимание CSS, потому что он блокирует
  3. Исправить
    1. Удалить то, что не нужно
    2. Разделить на меньшие куски что нужно
    3. Ленивая нагрузка, что не критично
    4. Нагрузка по требованию того, что не используется по меньшей мере половины пользователей

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

Проблемы

После запуска WebPagetest и Mighouse на сайте я определил следующие проблемы:

  1. Главное фото в формате PNG (7,7 МБ)
  2. Non Minified Boomerang.js ( http://www.boomerangjs.org/ )
  3. Некоторые шрифты включены внутри CSS, но никогда не используются
  4. Некоторые шрифты включены, но действительно не должны быть
  5. Большинство интеллектуальных активов дублированы (огромные сбережения могут быть достигнуты там)
  6. Некоторые активы для всех 44 языков включены в основной файл CSS, даже если пользователь может использовать только один за раз
  7. Многие медиа-запросы, которые при таком размере должны быть разделены на несколько файлов CSS
  8. Главный файл JS тяжелый, и похоже, он может быть разделен на меньшие части и ленивые

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

Растворы

Я сделал следующее, чтобы ускорить сайт:

  1. Compress Image и использование формата JPEG – сохранена 6,7 МБ + улучшенная воспринимаемая производительность, используя Progressive JPEG
  2. Удалить неиспользуемый шрифт – сделали страницу легче на 150 кБ, и потому, что она была внутри CSS, это больше не блокирует рендеринг
  3. Минифицируйте библиотеку Boomerang.js – 120 кБ → 40 Kb.

Производительность раньше

Я сделал несколько базовых измерений, используя webpagetest.org ( Посмотреть отчет ) и маяк:

В WebPagetest наиболее значимым является крупнейшая сложная краска. Это означает, что это изображение Hero Hero Mb было загружено через 16 секунд.

В тесте маяка я хотел бы обратить особое внимание на время интерактивного, и первый простаистый процессор – это указывает, когда пользователь может начать использовать вашу страницу (значение, JavaScript больше не блокирует основной нить).

Решение головы изображения

Давайте сначала обратимся к первому вопросу, потому что это самый низкий подвесных плодов куча и не требует любой технические знания. Как я писал в своей статье Оптимизация изображений для сети Вы можете в основном сказать, какой формат должен использоваться для изображения его содержимого. В этом случае он должен быть JPEG, и я собираюсь использовать предварительный просмотр MacOS, чтобы сохранить его как JPEG, а затем сжать его с помощью ImageOPTIM.

Чтобы убедиться, что я не собираюсь ухудшить качество изображения (это страница продукта, поэтому она должна выглядеть хорошо) Я использовал качество> 90, что производит минимальные артефакты. Результаты довольно хорошие, экономя более 7 МБ на этом одном изображении. Кроме того, JPEG прогрессивен, поэтому он будет загружен гораздо более приятным способом, чем PNG.

NUMINIFIED BOOMERANG.JS Библиотека

Это также простая задача для выполнения, просто возьмите содержимое файла и вставьте его в мини-файл JavaScript. Если вы используете поисковую систему Duckduckgo, просто введите: «Minifier js Online», и он пойдет прямо вверх. Минификация сделала файл меньше на 80 кб, 120 кБ → 40 КБ. Неплохо в течение 20 секунд работы.

Неиспользованный шрифт

Я заметил, что Переопределить книгу .font.css Файл включил несколько шрифтов Gotham, но никогда не использовал их. Я удалил ссылку на них из файла HTML в целом.

Результат

В результате этих операций сайт появился более 7 МБ без каких-либо передовых методов.

Давайте посмотрим, какой маяк говорит об этом (после того, как он был загружен в платформы Как хостинг):

Немного лучше. Будем надеяться, что следующие шаги улучшат его дальше.

В разделе «Два из этих серий» мы посмотрим на файл CSS Огромные (2,5 МБ!) И сократите его до 365 КБ.

Обновлять

Так как я начал писать эту статью, Tesla.com Сделал именно то, что я здесь описал в отношении изображений, и даже использовал более агрессивное сжатие, поэтому их изображение 370 КБ, что означает, что не было необходимости иметь его в таком хорошем качестве в конце концов.:)

Исходный код

Вы можете увидеть результаты и исходный код здесь:

Часть 1: https://github.com/pavelloz/tesla.comhttps://tesla.prod01.oregon.platform-os.com/part-1.

Часть 2: https://github.com/pavelloz/tesla.com/tree/part-2https://tesla.prod01.oregon.platform-os.com/part-2/ и https://tesla.prod01.oregon.platform-os.com/part—de/

Подробнее

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

Используя WebP в вашей существующей веб-странице

Paweł Kowalski · 17 ноября · 4 мин читать

Оптимизация изображений для сети

Paweł Kowalski · 24 · 7 мин читать

3 совета по консервирующей скорости сайта

Paweł Kowalski · 24 июня · 6 мин читать

Оригинал: “https://dev.to/platformos/speeding-up-tesla-com-part-1-images-and-js-minification-1b22”