Руководство для начинающих по оптимизации веб–сайта

Краткая памятка для новичков.
22 марта 2018225057Андрей Никифоров27671111

Здравствуйте!

Оптимизация сайтов — тема не новая, непростая и не имеющая единого решения. Сегодня вас ждет перевод статьи «A beginner’s guide to website optimization» от Марио Хойоса.


Изображение предоставлено Pexels.

Я новичок и я достиг 99/100 в рейтинге оптимизации Google. Если я смог это сделать, вы тоже сможете.

Если вы похожи на меня и любите доказательства, вот результаты Google Pagespeed Insights для hasslefreebeats, веб-сайт, который я поддерживаю; я недавно потратил некоторое время на его оптимизацию:


Снимок экрана моей оценки PageSpeed ​​Insights.

Я очень горжусь этими результатами, но хочу подчеркнуть, что пару недель назад я не имел понятия, как оптимизировать сайт. То, чем я хочу поделиться с вами сегодня — результат множества поисковых запросов и устранения неисправностей, от которых я хочу избавить вас.

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

Я ни в коем случае не эксперт, но я уверен: если вы попробуете эти методы, то увидите результат!

Изображения


Изображение предоставлено Pexels (и, безусловно, оптимизировано Medium).

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

Главное, что я сделал — сжал изображения для оптимизации. Сейчас мне кажется, что это должно было быть интуитивно понятным с самого начала, но оказалось, что это не так.

Сервис, который я использовал для сжатия изображений — Optimizilla, простой в использовании веб-сайт, на который вы загружаете фотографии, выбираете уровень сжатия, который хотите, а затем скачиваете сжатое изображение. Я видел, что размер уменьшается на 70% для некоторых ресурсов, что значительно ускоряет загрузку.

Optimizilla — не единственный вариант для ваших потребностей. Некоторые программы с открытым исходным кодом, которые можно использовать — ImageOptim для Mac или FileOptimizer для Windows. Если вы предпочитаете сжимать фото с помощью инструментов сборки, есть gulp и webpack-плагины, которые могут помочь. Не так важно, как вы это делаете, пока вы делаете. Полученный выигрыш в производительности стоит минимальных усилий.

В зависимости от варианта использования стоит посмотреть на формат ваших файлов. Вообще говоря, JPG будет меньше, чем PNG. Основное различие в прозрачности: если мне нужна прозрачность, я использую PNG, иначе я использую JPG. Вы можете больше узнать о плюсах и минусах обоих форматов здесь. Кроме того, Google вышел с форматом webp: он довольно классный, но так как он еще не поддерживается во всех браузерах, я не решаюсь использовать его. Следите за дальнейшей поддержкой в будущем!

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

Видео


Фото Терье Солли из Pexels.

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

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

Вы также можете разместить свои видео на Youtube, а затем использовать инструмент youtube-dl, чтобы загрузить их с Youtube при настройке видео для потребностей вашего сайта.

Для других возможных решений взгляните на Brightcove, Sprout или Wistia.

Gzip


Изображение предоставлено Pexels.

Я понятия не имел, что такое gzip, когда впервые разместил веб-сайт.

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

В зависимости от того, где вы размещаете ваше приложение, включение gzip может свестись к параметру в конфигурации. В моем случае сайт размещен на Heroku, который не предоставляет такой вариант.

Как оказалось, существуют пакеты для быстрого добавления сжатия на серверной стороне, позволяющие добавить gzip всего парой строк кода. Используя это промежуточное программное обеспечение сжатия, я смог уменьшить размер моих пакетов Javascript и CSS на 75%.

Стоит проверить, предоставляет ли ваш хостер параметр gzip. Если это не так, посмотрите, как добавить gzip к серверному коду.

Минификация


Миниатюрный ананас любезно предоставлен Pexels.

Минификация — процесс удаления ненужных символов из кода без ущерба для его функциональности (пробелы, символы новой строки). Это позволяет уменьшить размер файла, который передается пользователю. Это также полезно для запутывания кода, что усложняет обнаружение слабых точек безопасности.

В наши дни минификация обычно выполняется как часть процесса сборки с помощью Webpack, Gulp или альтернативных решений. Однако эти инструменты для сборки сложно начать использовать, так что если вы ищете более простые альтернативы, Google рекомендует использовать HTML-Minifier для HTML, CSSNano для CSS, и UglifyJS для JavaScript.

Кеширование


Не совсем так, как браузер хранит данные, но достаточно близко. Предоставлено Pexels.

Хранение статических файлов в кэше браузера — очень эффективный способ увеличить скорость веб-сайта, особенно при повторных посещениях одного и того же клиента. Я не знал, пока Google не сказал мне, что некоторые из моих ресурсов не кэшируются должным образом из-за отсутствия заголовков в ответе HTTP, который я отправлял с сервера.

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

Чтобы повысить производительность, я добавил следующий код в ответ моего сервера (сервер Express/Node.JS):

res.append("Cache-Control", "max-age = 604800000");
res.status(200).json(response);

Все, что я делаю здесь — добавляю заголовок cache-control, в котором говорится, что через неделю (в миллисекундах) ресурсы должны быть повторно загружены. Если вы обновляете эти файлы чаще, более короткий максимальный срок может быть хорошей идеей.

Сеть распространения контента


Реальный образ CDN, любезно предоставленный Pexels.

Сеть распространения контента, или CDN — сеть, которая позволяет пользователям со всего мира быть географически ближе к вашему контенту. Если пользователь хочет загрузить большое изображение из Японии, но ваш сервер находится в Соединенных Штатах, это займет больше времени, чем если бы у вас был сервер в Токио.

CDN дает возможность пользоваться преимуществами множества прокси-серверов, расположенных по всему миру, что позволяет загружать контент быстрее, независимо от того, где находится ваш конечный пользователь.

Я хочу отметить, что мне удалось достичь результатов, которые вы видели выше, без внедрения CDN — я просто хотел упомянуть их, поскольку ни одна статья об оптимизации сайта не будет полной без них. Наличие CDN на вашем сайте — обязательное условие, если вы желаете видеть посетителей со всего мира.

Популярные CDN — CloudFront и CloudFlare.

Разное

Вот еще несколько советов, чтобы выжать больше информации:

  • Оптимизируйте свой веб-сайт, сперва загружая контент «выше», чтобы увеличить воспринимаемую производительность вашего сайта. Один из распространенных способов сделать это — ленивые загрузки изображений, которые не отображаются на целевой странице.

  • Если ваше приложение не зависит от JavaScript для визуализации HTML, например от Angular или React, то, вероятно, безопасно загружать теги скриптов в нижней части HTML-файла. Однако это может повлиять на ваше time-to-interactive, поэтому это не тот метод, который я рекомендовал бы для каждой ситуации.

В заключение

Это только верхушка айсберга, когда дело доходит до оптимизации вашего сайта. В зависимости от объема трафика и предоставляемых сервисов могут возникнуть проблемы с производительностью во многих областях. Возможно, вам нужно больше серверов, или вам нужен сервер с большим объемом оперативной памяти, или вашему тройному вложенному циклу не помешает некоторый рефакторинг, кто знает?

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

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

Если вам понравилась эта статья, вам могут понравиться:

Инструменты, о которых я хотел бы узнать, когда я начал кодировать

Инструменты, о которых я хотел бы узнать, когда я начал кодировать: Revisited

Спасибо,
что читаете наш блог!
Posts popup