Мне нравится Тесла. Я думаю, что они отличная компания, работающая над лучшим будущим. Вот почему я был на своем веб-сайте недавно, в довольно среднем соединении, и я заметил, что она загружается очень медленно. Так, конечно, я буду я, я открыл инструменты DEV Firefox и начал копать.
TLDR : В конце дня мне удалось ускорить время домашнего страницы, чтобы интерактивные свыше 17 секунд до 4 секунд, удалив ненужные вещи и оптимизируя доставку активов.
Эта двухсторонняя серия статьи предназначена для демонстрации реального использования случая использования того, как вы можете:
- Уведомление о проблем – запустить webpagetest/маяк на вашем сайте
- Определите комнаты для улучшения – ищите тяжелые ресурсы, количество запросов и уделять особое внимание CSS, потому что он блокирует
- Исправить
- Удалить то, что не нужно
- Разделить на меньшие куски что нужно
- Ленивая нагрузка, что не критично
- Нагрузка по требованию того, что не используется по меньшей мере половины пользователей
Это самые простые методы, которые не связаны с переписыванием кода или изменение любых функций страницы, которая является то, что должна продемонстрировать этот аудит/статью.
Проблемы
После запуска WebPagetest и Mighouse на сайте я определил следующие проблемы:
- Главное фото в формате PNG (7,7 МБ)
- Non Minified Boomerang.js ( http://www.boomerangjs.org/ )
- Некоторые шрифты включены внутри CSS, но никогда не используются
- Некоторые шрифты включены, но действительно не должны быть
- Большинство интеллектуальных активов дублированы (огромные сбережения могут быть достигнуты там)
- Некоторые активы для всех 44 языков включены в основной файл CSS, даже если пользователь может использовать только один за раз
- Многие медиа-запросы, которые при таком размере должны быть разделены на несколько файлов CSS
- Главный файл JS тяжелый, и похоже, он может быть разделен на меньшие части и ленивые
Мы не будем решать некоторые из этих проблем, потому что природа JavaScript слишком сложна, и я не знаю этого сайта достаточно хорошо, чтобы решить, какой скрипт может или не может быть загружен на спрос. Это задача для разработчиков Tesla, я могу только помочь своим решениям с моим советом.
Растворы
Я сделал следующее, чтобы ускорить сайт:
- Compress Image и использование формата JPEG – сохранена 6,7 МБ + улучшенная воспринимаемая производительность, используя Progressive JPEG
- Удалить неиспользуемый шрифт – сделали страницу легче на 150 кБ, и потому, что она была внутри CSS, это больше не блокирует рендеринг
- Минифицируйте библиотеку 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.com – https://tesla.prod01.oregon.platform-os.com/part-1.
Часть 2: https://github.com/pavelloz/tesla.com/tree/part-2 – https://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”