Как проверить файлы сайта на работоспособность


7 бесплатных сервисов для проверки сайтов (о которых вы могли и не знать) / Хабр


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

LoadImpact: http://loadimpact.com, сервис нагрузочного тестирования сайтов (за деньги — до 5к одновременных подключений) у которого есть бесплатный тест на 50 одновременных соединений. Если вы хоститесь у безжалостного и беспощадного отечественного хостера за $0,01/месяц и у вас всего тысяча сайтов на сервере — попробуйте проверить свой, с высокой вероятностью он даже 50 одновременных подключений не выдержит.

BrowserMob: http://browsermob.com, дополнительный простой, но симпатичный сервис, позволяющий проверить скорость загрузки целевого сайта из 4 разных мест и показывающий много подробных метрик загрузки для каждого из них. А основная задача BrowserMob — автоматическое кросс-браузерное тестирование сайтов.

Alertra: http://alertra.com, сервис мониторинга аптайма, на сайте которого можно бесплатно проверить доступность (и время ответа) сайта из 11 разных мест. Работает быстро и надежно, никаких капч и прочей дребедени.

site24x7: http://site24x7.com, похожий на Alertra сервис, который использует уже 23 географически распределеные точки проверки.

You get signal: http://www.yougetsignal.com, отличный сервис позволяющий проверить открытые порты на любом хосте/IP. Частенько помогает для проверки проброса портов через NAT-ы.

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

CSE HTML Validator: http://www.onlinewebcheck.com альтернатива известнейшему validator.w3.org, построенная [судя по всему] на своем отдельном ядре анализа. Выгодно отличается очень подробными и понятными рекомендациями по исправлению ошибок и потенциальных проблем.

Built with: http://builtwith.com/ анализирует заданный сайт и выдает целое досье о нем: веб-сервер, CMS, какая служба статистики используется и так далее. Показателей очень много, для беглого анализа конкурентов вполне подходит. Также, интересно покопаться в trends.builtwith.com где владельцы сервиса выдают статистику по всем отслеживаемым параметрам. Например подавляющее большинство сайтов до сих пор использует старый блокирующий JS-код для Google Analytics.

А какие сервисы есть у вас в закладках?

Проверка веб-сайтов | Бесплатный онлайн-анализ производительности веб-сайтов

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

Итак, вот несколько бесплатных онлайн-средств проверки посещаемости веб-сайтов:

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

semrush.com также предлагает бесплатную версию статистики посещаемости веб-страниц. Он дает вам обзор органического поискового трафика, платного поискового трафика, а также доли брендированных и небрендовых поисковых запросов.

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

.

12 методов оптимизации скорости веб-сайта: методы тестирования и улучшения производительности

Время чтения: 9 минут

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

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

Важность оптимизации скорости сайта

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

Давайте посмотрим, как оптимизация скорости веб-сайта влияет на ключевые факторы успеха веб-сайта:

  • преобразование
  • видимость
  • удобство использования

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

Чем быстрее загружается страница, тем выше коэффициент конверсии. Согласно исследованию Hubspot, задержка в 1 секунду означает снижение конверсии на 7 процентов. Например, замедление загрузки страницы на 1 секунду может стоить Amazon 1,6 миллиарда долларов продаж ежегодно.

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

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

Способы оценки скорости вашего сайта

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

Индекс средней скорости мобильной связи в США

Итак, если вы оптимизируете скорость своего сайта до приемлемого уровня, вы получите значительное преимущество в рейтинге перед конкурентами.

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

Есть несколько инструментов оценки производительности, которые стоит попробовать:

  • Google Pagespeed Insights - это бесплатный инструмент от Google, который выполняет тест производительности вашего сайта и дает рекомендации по увеличению производительности. Работает как для настольной, так и для мобильной версии.
  • Pingdom - также отличный инструмент для тестирования скорости веб-сайтов с рядом полезных функций. Он отслеживает историю производительности вашего веб-сайта, дает рекомендации на основе данных о том, как повысить скорость веб-сайта, и создает простые для понимания отчеты.Pingdom также предоставляет приложения для тестирования скорости веб-сайтов для Android и iOS. У него есть как бесплатные, так и профессиональные платные планы мониторинга.
  • YSlow также предоставляет рекомендации по повышению производительности страницы, рисует статистику и суммирует все компоненты.
  • Калькулятор бюджета производительности - это бесплатный инструмент, который помогает выяснить, какой тип контента вы можете использовать для обеспечения оптимальной работы вашего сайта.

Калькулятор бюджета производительности

Рекомендации по ускорению вашего сайта

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

1. Используйте сеть доставки контента (CDN)

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

2. Переместите свой веб-сайт на более удобный хост

Есть три возможных типа хостинга:

  • Общий хостинг
  • Хостинг виртуальных частных серверов (VPS)
  • Выделенный сервер

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

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

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

Другой подход - аренда выделенного облачного ресурса у AWS, Microsoft Azure, Google или другого поставщика общедоступного облака. Оба подхода также можно объединить в гибридное облако, которое мы недавно обсуждали.С выделенными серверами все ресурсы принадлежат только вам, и вы получаете полный контроль над ними. Облачные инфраструктуры также могут добавлять неограниченную масштабируемость и масштабируемость по запросу в рамках ряда пакетов.

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

3. Оптимизируйте размер изображений на своем сайте

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

Лучший способ уменьшить размер изображения без ущерба для его качества - это сжать изображения с помощью таких инструментов, как ImageOptim, JPEGmini или Kraken. Процедура может занять немного времени, но оно того стоит. Другой способ уменьшить размер изображения - использовать атрибуты HTML-чувствительных изображений и , которые регулируют размер изображения в зависимости от свойств отображения пользователя.

4. Уменьшить количество плагинов

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

5. Минимизируйте количество файлов JavaScript и CSS

Если ваш веб-сайт содержит много файлов JavaScript и CSS, это приводит к большому количеству HTTP-запросов, когда посетители вашего веб-сайта хотят получить доступ к определенным файлам.Эти запросы обрабатываются браузером посетителя индивидуально и замедляют работу сайта. Если вы уменьшите количество файлов JavaScript и CSS, это, несомненно, ускорит ваш сайт. Попробуйте сгруппировать весь JavaScript в один, а также сделайте это со всеми файлами CSS. Это уменьшит общее количество HTTP-запросов. Существует множество инструментов для быстрой минимизации файлов HTML, CSS и JavaScript. Например, вы можете использовать инструменты WillPeavy, Script Minifier или Grunt.

6. Используйте кеширование веб-сайтов

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

Подходы к кешированию веб-сайтов зависят от платформы, на которой разработан ваш веб-сайт. Например, для WordPress вы можете использовать следующие плагины: W3 Total Cache или W3 Super Cache. Если вы используете VPS или выделенный сервер, вы также можете настроить кеширование в общих настройках.В случае с общим сервером кеширование веб-сайта обычно недоступно.

7. Реализация сжатия Gzip

Gzip Compression - эффективный способ уменьшить размер файлов. Это сводит к минимуму HTTP-запросы и сокращает время ответа сервера. Gzip сжимает файлы перед отправкой в ​​браузер. Со стороны пользователя браузер распаковывает файлы и представляет их содержимое. Этот метод может работать со всеми файлами на вашем сайте. Вы можете включить Gzip на своем веб-сайте, добавив несколько строк кода или используя утилиту gzip.

8. Оптимизация базы данных в CMS

Оптимизация базы данных - эффективный способ повысить производительность. Если вы используете систему управления контентом (CMS), упакованную сложными плагинами, размер базы данных увеличивается, и ваш сайт работает медленнее. Например, WordPress CMS хранит комментарии, сообщения в блогах и другую информацию, которая занимает много места для хранения данных. Каждая CMS требует собственных мер по оптимизации, а также имеет ряд специальных плагинов. Для WordPress, например, вы можете рассмотреть WP-Optimize .

9. Ограничьте использование веб-шрифтов

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

  • Используйте современные форматы WOFF2 для современных браузеров;
  • Включите только те наборы символов, которые используются на сайте;
  • Выбирайте только нужные стили

10.Обнаружить 404 ошибки

Ошибка 404 означает, что «Страница не найдена». Это сообщение предоставляется хостингом браузерам или поисковым системам, когда доступное содержимое страницы больше не существует. Чтобы обнаружить и исправить ошибку 404, вы можете использовать инструменты и плагины для обнаружения ошибок. Как мы уже упоминали, дополнительные плагины могут негативно повлиять на скорость вашего сайта, поэтому мы советуем запускать ресурс через внешние инструменты для обнаружения ошибок. Например, Xenu's Link Sleuth, Google Webmaster Tools (GWT) и 404 Redirected Plugin для WordPress .

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

11. Уменьшить количество перенаправлений

Перенаправления веб-сайтов создают дополнительные HTTP-запросы, которые негативно влияют на производительность.Мы советуем свести их к минимуму или полностью исключить. Во-первых, вы должны определить все перенаправления на своей странице, запустив сканирование сайта. Вы можете использовать Screaming Frog, чтобы быстро определять перенаправления. Затем вы должны проверить, служат ли они необходимой цели, и оставить только самые важные.

12. Используйте методы предварительной выборки

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

Существует три основных типа предварительной выборки:

DNS-prefetching. Практика предполагает предварительное преобразование доменов в IP-адреса.

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

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

Хотя предварительная выборка и эффективна, она требует глубокого анализа поведения пользователя, чтобы делать точные предположения.

Заключение

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

Итак, мы рекомендуем применить простой, но эффективный подход к оптимизации скорости веб-сайта:

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

10 способов повысить производительность вашей веб-страницы

Есть миллионов и один способ повысить производительность вашего сайта. Методы различаются, и некоторые из них более сложны, чем другие. Три основных области , над которыми вы можете работать: оборудование (ваш веб-сервер), оптимизация сценариев на стороне сервера (PHP, Python, Java) и производительность внешнего интерфейса (основа веб-страницы).

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

Зачем сосредотачиваться на производительности внешнего интерфейса?

Интерфейс (т.е. ваш HTML, CSS, JavaScript и изображения) - это самая доступная часть вашего веб-сайта. Если у вас общий план веб-хостинга, у вас может не быть доступа root (или root-like) к серверу, и поэтому вы не можете настраивать и настраивать параметры сервера. И даже если у вас есть нужные разрешения, проектирование веб-серверов и баз данных требует специальных знаний, чтобы получить немедленные преимущества.

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

Имея это в виду, вот несколько простых способов повысить скорость вашего веб-сайта.

1. Профилируйте свои веб-страницы, чтобы найти виновных.

Firebug screen shot.

Профилировать свою веб-страницу полезно, чтобы найти компоненты, которые вам не нужны, или компоненты, которые можно оптимизировать.Профилирование веб-страницы обычно включает в себя такой инструмент, как Firebug, чтобы определить , какие компоненты (например, изображения, файлы CSS, HTML-документы и файлы JavaScript) запрашиваются пользователем, сколько времени требуется компоненту для загрузки, и насколько это большой . Общее эмпирическое правило состоит в том, что вы должны делать компоненты страницы как можно меньше (менее 25 КБ - хорошая цель).

Вкладка

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

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

2. Сохраните изображения в правильном формате, чтобы уменьшить размер файла.

JPEG vs GIF screenshot.

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

GIF и PNG похожи, но PNG обычно дает меньший размер файла. Прочтите оценку Coding Horror с использованием PNG вместо GIF.

3. Сократите ваши документы CSS и JavaScript, чтобы сэкономить несколько байтов.

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

Этот патрон CSS:

 .some-class { цвет: #ffffff; высота строки: 20 пикселей; размер шрифта: 9 пикселей; } 

можно преобразовать в:

 .some-class {color: #fff; line-height: 20px; font-size: 9px;} 

… и все будет нормально.

И не беспокойтесь о , - вам не нужно переформатировать код вручную .В вашем распоряжении множество бесплатных инструментов для минимизации файлов CSS и JavaScript. Что касается CSS, вы можете найти множество простых в использовании инструментов из этого списка инструментов оптимизации CSS. Некоторые популярные варианты минификации для JavaScript - JSMIN, YUI Compressor и JavaScript Code Improver. Хорошее приложение для минификации дает вам возможность отменить минификацию на время разработки. Кроме того, вы можете использовать встроенный в браузер инструмент, например Firebug, чтобы увидеть отформатированную версию вашего кода.

4. Объедините файлы CSS и JavaScript, чтобы уменьшить количество HTTP-запросов.

Для каждого компонента, необходимого для отображения веб-страницы, на сервер создается HTTP-запрос. Итак, если у вас есть пять файлов CSS для веб-страницы, вам потребуется как минимум пять отдельных HTTP-запросов GET для этой конкретной веб-страницы. Комбинируя файлы, вы уменьшаете накладные расходы на HTTP-запросы, необходимые для создания веб-страницы.

Ознакомьтесь со статьей Нильса Линхира о том, как можно комбинировать файлы CSS и JS с помощью PHP (который можно адаптировать к другим языкам).SitePoint обсуждает аналогичный метод объединения ваших CSS и JavaScript; они смогли сократить время ответа на 1,6 секунды на , тем самым уменьшив время ответа на 76% от исходного времени .

В противном случае вы можете комбинировать файлы CSS и JavaScript, используя старый добрый copy-and-paste 'ing (работает как шарм).

5. Используйте спрайты CSS для уменьшения количества HTTP-запросов

CSS Sprites on Digg.

CSS Sprite - это комбинация меньших изображений в одно большое изображение.Чтобы отобразить правильное изображение, вы настраиваете атрибут background-position CSS. Такое объединение нескольких изображений снижает количество HTTP-запросов.

Например, на Digg (показанном выше) вы можете видеть отдельные значки для взаимодействия с пользователем. Чтобы уменьшить количество запросов к серверу, Digg объединил несколько значков в одно большое изображение, а затем использовал CSS, чтобы расположить их соответствующим образом.

Вы можете сделать это вручную, но есть веб-инструмент под названием CSS Sprite Generator, который дает вам возможность загружать изображения для объединения в один спрайт CSS, а затем выводит код CSS (атрибуты background-position ) в визуализировать изображения.

6. Используйте сжатие на стороне сервера, чтобы уменьшить размер файла

Это может быть сложно, если вы работаете на общем веб-хосте, который еще не выполняет сжатие на стороне сервера, но для полной оптимизации обслуживания компонентов страницы они должны быть сжаты. Сжатие объектов страницы аналогично архивированию большого файла, который вы отправляете по электронной почте: Вы (веб-сервер) архивируете изображение большой семьи (компонент страницы) и отправляете его своему другу (браузер) - они, в свою очередь, распаковывают ваш ZIP-файл, чтобы увидеть картинку.Популярные методы сжатия - это Deflate и gzip. Сжатие изображений значительно сокращает время загрузки страницы. Это может серьезно повредить бизнес-сайту, особенно если это сайт электронной коммерции с большим количеством изображений, например магазин автозапчастей.

Если у вас есть собственный выделенный сервер или у вас есть VPS - вам повезло - если у вас не включено сжатие, установка приложения для обработки сжатия будет легкой задачей. Ознакомьтесь с этим руководством о том, как установить mod_gzip на Apache.

7.Избегайте встроенного CSS и JavaScript

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

8. Выгрузить ресурсы и функции сайта

Amazon S3Fox for Six Revisions.

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

Вы можете использовать Feedburner для обработки ваших RSS-каналов, Flickr для обслуживания ваших изображений (однако помните о последствиях выгрузки изображений) и API библиотек Google AJAX для обслуживания популярных фреймворков / библиотек JavaScript, таких как MooTools, jQuery и Dojo.

Например, в Six Revisions я использую Amazon Simple Storage Service (сокращенно Amazon S3) для обработки изображений, которые вы видите на этой странице, а также Feedburner для обработки RSS-каналов.Это позволяет моему собственному серверу обрабатывать только фоновые изображения HTML, CSS и CSS. Эти решения не только рентабельны, но и значительно сокращают время отклика веб-страниц.

9. Используйте Cuzillion, чтобы спланировать оптимальную структуру веб-страницы

Cuzzillion screen shot. Cuzillion - это веб-приложение, созданное Стивом Содерсом (интерфейсным инженером Google после ухода из Yahoo! в качестве начальника отдела производительности), которое помогает вам экспериментировать с различными конфигурациями структуры веб-страницы, чтобы увидеть, какова оптимальная структура. .Если у вас уже есть дизайн веб-страницы, вы можете использовать Cuzillion для моделирования структуры вашей веб-страницы, а затем настроить ее, чтобы посмотреть, можно ли повысить производительность, перемещая объекты.

Посмотрите видеоинтервью InsideRIA, в котором Стив Саундерс обсуждает, как работает Cuzillion, и справочное руководство, которое поможет вам быстро начать работу.

10. Регулярно отслеживайте производительность веб-сервера и создавайте тесты производительности.

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

Очень важно, чтобы вы постоянно проверяли свой веб-сервер на предмет проблем с производительностью. Если у вас есть root-доступ и вы можете устанавливать что-то на сервер, попробуйте ab - инструмент тестирования веб-сервера Apache или Httperf от IBM.

Если у вас нет доступа к веб-серверу (или не понимает, о чем я говорю), вам нужно использовать удаленный инструмент, такой как Fiddler или HTTPWatch, для анализа и мониторинга HTTP-трафика.Они оба укажут на места, на которые вам неудобно смотреть.

Бенчмаркинг

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

Дополнительная литература

  • Прочтите исследование Аарона Хопкина «Оптимизация времени загрузки страницы».
  • Ознакомьтесь с проведенным Максом Кислером анализом окупаемости инвестиций за счет сокращения времени загрузки страницы.
  • Осознайте важность производительности внешнего интерфейса, прочитав Что правило 80/20 говорит нам об уменьшении количества HTTP-запросов на Yahoo! Блог пользовательского интерфейса.
  • Статья
  • Кэла Хендерсона «Быстрое обслуживание JavaScript» показывает способы оптимизации файлов JavaScript.
  • artweb design использует метод и плагин для объединения CSS и JS в Rails.

Есть еще?

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

Связанное содержание

.

davidsonfellipe / awesome-wpo: тщательно подобранный список оптимизации веб-производительности. Здесь каждый может внести свой вклад!

перейти к содержанию Зарегистрироваться
  • Почему именно GitHub? Особенности →
    • Обзор кода
    • Управление проектами
    • Интеграции
    • Действия
    • Пакеты
    • Безопасность
    • Управление командой
    • Хостинг
    • мобильный
    • Истории клиентов →
    • Безопасность →
  • Команда
  • Предприятие
  • Проводить исследования
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий