Как измерить производительность сайта?

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

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

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

HTTP-запросы

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

После отправки запроса ваш браузер проанализирует каждый элемент страницы. В зависимости от механизма синтаксического анализа каждый веб-сайт будет загружаться по-разному, и элементы будут отображаться в различном порядке в зависимости от скорости передачи. Например, Internet Explorer отображает веб-страницы не так, как Chrome или Safari, и все они запускают несколько другие механизмы анализа, чем Firefox или Opera..

Что нужно учитывать, так это то, сколько времени занимает запрос для каждого файла и сохраняется ли эта тенденция последовательно. Рассмотрите возможность получения свыше 100 тыс. Или 1 млн. Посетителей в месяц. Задача браузера - собрать воедино каждый элемент страницы и загрузить внешние файлы в память..

Часто факторы, сдерживающие оптимизированную скорость веб-сайта, включают неуклюжий JavaScript или большие файлы изображений. С популяризацией Verizon FiOS скорость Интернета достигает 600 Кбит / с и продолжает расти! К сожалению, это не является нормой, и даже при использовании высокоскоростных соединений возможны ошибки при оптимизации..

Средства правовой защиты для производительности сайта

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

Google выпустил проект под названием Page Speed, который был создан, чтобы помочь разработчикам оптимизировать свои веб-сайты и проверить лучшие уровни производительности. Первоначально проект начинался как надстройка Firebug с открытым исходным кодом и теперь принимается как сторонний справочник для тестирования веб-сайтов..

Другой вариант для пользователей Firebug - это дополнение Yahoo! к YSlow. Сценарий анализирует каждый запрос веб-страницы и предлагает наиболее распространенные способы повышения производительности. Эти предложения основаны на Yahoo! Ресурс разработчиков для лучших практик оптимизации в веб-дизайне.

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

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

Скорость Техники

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

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

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

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

Динамический контент не может быть загружен, пока не будет завершен весь DOM, но иногда это будет возвращать ошибки. Проверьте CSS / JS, чтобы узнать, сможете ли вы вернуть какие-либо преимущества в оптимизации.

Сжатие размера файла

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

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

Вы можете также рассмотреть возможность сжатия самых больших изображений на ваших веб-страницах. Это можно сделать с помощью любого программного обеспечения для редактирования фотографий, такого как Adobe Photoshop или GIMP, просто передискретизировав изображение с меньшим разрешением. Изображения PNG будут экспортироваться в среднем намного меньше, чем форматы jpg или TIFF. Есть также много онлайн-инструментов, таких как Image Optimizer, чтобы помочь в процессе сжатия.

Проверка источника и метрики

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

Самый популярный инструмент Mozilla Firebug - это плагин для браузера Firefox. Это приложение устанавливает небольшую панель инструментов в нижней части браузера, чтобы проверить время отклика, информацию заголовка, элементы страницы и сценарии для каждого веб-сайта. Скрипт также был перенесен в Firebug Lite как расширение для Google Chrome..

Apache с mod_pagespeed

Не все настройки будут работать на веб-сервере Apache, поэтому эта опция не всегда доступна. Этот модуль напрямую связан с Монитор Google Page Speed упомянутый ранее. На самом деле код для mod_pagespeed изначально был основан на множестве библиотек из баз данных Google Code..

Apache позволяет администраторам серверов устанавливать небольшие пакеты, называемые модулями, для повышения производительности своих серверов. mod_pagespeed является одним из этих модулей, который выполняет методы оптимизации автоматически во время выполнения. Перечислено слишком много процессов, хотя некоторые из основных приложений включают сжатие HTML / CSS / JS на лету и кэширование изображений.

В настоящее время проект размещен в Google и открыт для разработчиков. Google работает с GoDaddy для внедрения mod_pagespeed во все учетные записи хостинга, на которых работает HTTP-сервер Apache.

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

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