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

1656664455 rukovodstvo dlya nachinayushhih po optimizaczii sajta

Марио Хойос

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

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

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

zezZUe60TuNoOV7BQOmSolQoXAmdjqYXyr8Q
Снимок экрана моего результата PageSpeed ​​Insights.

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

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

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

Изображение

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

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

Главное, что я сделал для оптимизации моих изображений, это сжал их.

Оглядываясь назад, это должно было быть достаточно интуитивно понятным с самого начала, но это было не для меня, поэтому, возможно, это не для вас.

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

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

В зависимости от вашего случая использования, возможно, также следует просмотреть формат ваших файлов. В общем, jpg будет меньше png. Основная разница в том, нужна ли мне прозрачность по изображению: если мне нужна прозрачность, я использую png, иначе я использую jpg. Вы можете глубже погрузиться в плюсы и минусы обоих здесь.

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

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

видео

pyCjB8NJV7cWOJ3rtxEKW0YsrrmW0icWFHvf
Автор фотографии Terje Sollie из Pexels.

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

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

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

Чтобы узнать о других возможных решениях, просмотрите Brightcove, Sprout или Wistia.

Gzip

IRfWI4Cv-mN4go0roOEw2pPR3VlCvCFmkONT
Понял? Zip? Изображение предоставлено Pexels.

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

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

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

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

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

Минимизация

HEgC7zdae1AigTekOi6h4gLJvL5jsikRl4mH
Уменьшенный ананас предоставлен Pexels.

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

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

Кэширование браузера

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

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

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

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

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

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

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

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

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

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

Хочу отметить, что мне удалось добиться результатов, которые вы видели выше раньше Внедрение CDN – я просто хотел упомянуть о них, поскольку ни одна статья об оптимизации сайта не будет полной без упоминания о них. Наличие одного из этих плохих парней на вашем веб-сайте обязательно, если вы планируете иметь аудиторию по всему миру.

Некоторые популярные CDN включают в себя CloudFront и CloudFlare.

Разное

Вот еще несколько советов, чтобы выжать еще больше сока:

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

В заключение

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

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

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

Если вам понравилась эта статья, пожалуйста, похлопайте ее и посмотрите:

Также подпишитесь на меня в Twitter.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *