Рекомендации и советы по улучшению скорости загрузки веб-сайта

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

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

Рекомендации по скорости загрузки веб-сайта

Вы можете не осознавать, насколько медленным является ваш сайт, если не протестируете его на себе. К счастью, вы можете сделать это бесплатно на Google PageSpeed. Это веб-инструмент для определения времени загрузки и поиска проблемных областей. Как складывается время загрузки вашего сайта? Если вам нужна работа, не волнуйтесь. Улучшить время загрузки сайта всего за несколько кликов проще, чем вы думаете. Вот несколько дополнительных советов, которые помогут вам начать работу.

Используйте сжатие Gzip для повышения скорости загрузки веб-сайтов

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

Вы можете запустить тест, чтобы проверить, является ли ваш сайт GZIPPED, и запустить тест сжатия Zip. Gzipping работает за счет уменьшения размера HTTP-ответа. В конечном итоге это меняет вес страницы.

Кэшируйте ваши файлы

Кеширование - это когда версия вашего веб-сайта сохраняется в браузерах ваших пользователей. Таким образом, когда они снова посетят ваш сайт, будет загружена более ранняя версия, пока не обновится новая версия. Кэширование может сократить время загрузки с более чем 2 секунд до менее 1 секунды. Это большой скачок, о котором вам стоит позаботиться. К счастью, настроить кеширование на вашем сайте несложно. Если вы используете WordPress, вы можете использовать бесплатный плагин W3 Total Cache. Кеширование является обязательным условием для повышения производительности загрузки вашего веб-сайта.

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

Обновите хост своего веб-сайта

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

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

Купить хостинг

Проверьте тему своего веб-сайта

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

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

Уменьшите количество файлов Java и CSS

Большинство веб-сайтов сегодня используют много файлов Javascript и CSS, и эти файлы могут обрабатываться индивидуально в браузерах ваших пользователей. Слишком много запросов одновременно снизят скорость загрузки вашего сайта. Если у вас есть возможность минимизировать все эти файлы, вы не добавите столько веса ко времени загрузки вашего сайта.

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

Переносите свою нагрузку по сети

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

Попробуйте внешние хостинговые платформы

Подобно CDN, вы можете размещать свои файлы на внешних хостинговых платформах, чтобы не замедлять время загрузки. Чаще всего это касается видеофайлов. Видео довольно большие, и загрузка их прямо на ваш сайт займет много места. Они могут легко превышать 100 МБ, поэтому размещение видео или других больших файлов на вашем собственном сервере - не лучший вариант.

Лучше разместить эти файлы на внешнем сервере. YouTube и Vimeo - отличные варианты для видео файлов. Оттуда вы можете встроить видео на свой веб-сайт. Это экономит место и не замедляет время загрузки. Это также намного проще!

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

Проверьте свои HTTP-запросы

Yahoo утверждает, что 80% времени загрузки веб-сайта приходится на загрузку всех различных частей страницы. Хотя мы уже обсуждали передовой опыт работы с файлами Java и CSS, как насчет всего остального? Чем больше элементов на странице необходимо загрузить, тем больше времени потребуется, чтобы страница отобразилась полностью.

Вы можете проверить, сколько из этих запросов происходит, зайдя в свой браузер. Google Chrome оснащен инструментами разработчика, которые ориентированы на HTTP-запросы. Чтобы получить доступ к этим инструментам, щелкните правой кнопкой мыши свою страницу в Google Chrome, нажмите «Проверить», затем перейдите на вкладку «Сеть».

Теперь вы можете увидеть, сколько времени требуется для загрузки каждого файла, в разделе «Время». В углу вы также увидите общее количество запросов. Уменьшение количества запросов, занимающих больше всего времени, - простой способ ускорить загрузку вашего сайта. Продолжайте читать, чтобы узнать, как лучше всего объединить файлы в следующем совете.

Объединяйте и уменьшайте файлы HTML

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

Проверьте свой веб-сайт, чтобы увидеть, есть ли какие-либо ненужные страницы, которые вы больше не используете. Есть ли места, где можно удалить пробелы или ненужный код? Наконец, объедините файлы HTML, чтобы убедиться, что вы не замедляете загрузку своего веб-сайта.

Использовать внешний CSS

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

Вместо этого вы должны использовать внешний CSS, который загружается в заголовок вашего HTML. Не добавляйте CSS в свой HTML, если можете этого избежать. В особенности это относится к разделам или заголовкам. Это намного чище и компактнее, если вы используете внешнюю таблицу стилей. Также его намного проще редактировать.

Если вы не уверены в статусе своего CSS, используйте инструменты доставки CSS, чтобы увидеть, как складываются ваши файлы CSS. Это позволит вам узнать, где находится ваш внешний файл и есть ли в вашем HTML какие-либо встроенные элементы. По возможности используйте только один внешний файл CSS. Скорее всего, вы сможете объединить файлы, если у вас их несколько.

Отложите загрузку Javascript

Когда вы откладываете файл, например JavaScript, вы убедитесь, что остальная часть вашего веб-сайта загружается правильно, прежде чем загружать дополнительные элементы Java. Иногда отложить java так же просто, как использовать плагин. В других случаях вам нужно вручную добавить HTML-скрипт, чтобы сообщить веб-сайту, что вы хотите загрузить Java в последнюю очередь.

Этот сценарий требует внешнего файла JavaScript. Здесь есть полное руководство по отложению вашей Java. Хотя это не большая разница, это может заставить ваш документ загружаться быстрее.

Проверьте свое время до первого байта

Время до первого байта (TTFB) - это то, как долго браузер ждет, прежде чем он начнет загружать свой первый байт данных. Согласно Google, ваш TTFB должен быть менее 200 мс. Однако это проблема на стороне сервера, поэтому веб-разработчикам ее легко не заметить.

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

Еще раз, ваши инструменты разработчика Chrome покажут, сколько времени занимает этот процесс на вашей веб-странице. Это также будет во многом зависеть от мощности интернет-соединения. Медленное соединение имеет более медленный TTFB. Проверьте свой TTFB, чтобы убедиться, что он меньше 200 мс. Если это не так, пора поговорить с хозяином о правильном решении. Возможно, вам не хватает места или у вас слишком много трафика.

Контент в верхней части страницы в первую очередь

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

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

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

Проверьте размер изображения

Загружать изображения легко, не проверяя размер файла. Время от времени это может быть хорошо, но это может легко замедлить работу вашего сайта, если вы не будете осторожны. Когда вы сохраняете изображения, попробуйте сохранить их с помощью опции «Сохранить для Интернета». Это доступно с такими инструментами, как Photoshop или Fireworks. С помощью функции «Сохранить для Интернета» размер изображения можно уменьшить без потери четкости изображения.

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

Удалите ненужные дополнения для повышения скорости загрузки веб-сайта

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

• Картинки;
• Плагины;
• Элементы навигации;
• Элементы дизайна;
• Страницы;
• Архивные сообщения в блоге.

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

Ограничьте количество кнопок социального обмена

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

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

Асинхронная доставка

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

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

Установить Google PageSpeed

Google PageSpeed ​​- это серверный модуль с открытым исходным кодом, который оптимизирует скорость загрузки вашего сайта. Он разработан Google, чтобы сделать ваш сайт быстрее, и им легко пользоваться. По сути, он вносит различные изменения как в ваш сервер, так и в файлы вашего сайта. Вам не нужно ничего делать вручную, и ваш сайт будет работать лучше.

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

Объединить фоновые изображения

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

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

Остановить хотлинкинг изображений

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

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

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

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

Увеличьте скорость загрузки вашего сайта сегодня

Вы готовы вывести свой сайт на новый уровень? Пришло время повысить скорость загрузки вашего сайта. Если у вас низкая скорость загрузки веб-сайта, легко потерять посетителей непреднамеренно. Подумайте, как вас расстраивает, когда веб-сайт загружается слишком долго. Задержка загрузки сайта в одну секунду приведет к снижению конверсий на 7% и просмотров страниц на 11%. Не делайте этого со своими пользователями, серьезно относясь к приведенным выше советам.

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

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

Вектор скорости загрузки сайта, созданный ibrandify