Для веб -сайта очень важно загружать как можно быстрее; Пользователи хотят быстро просмотреть страницу, которую они хотят увидеть, и если вы не можете удовлетворить их, они будут искать ее в другом месте. В этой статье вы увидите обсуждение пяти простых и эффективных методов для ускорения ваших веб -страниц.
Знание времени загрузки веб -сайта является первым шагом, прежде чем решить, что идет не так. Это также дает вам знать, если вам нужно внести изменения для ускорения вашего сайта.
Прежде чем начать, если вы еще не установили YSLOW, установите его. Это расширение Mozilla Firefox, вы можете найти его по ссылке ниже:
Во -первых, давайте просматрим веб -сайт Six Revisions, мы все используем один и тот же пример, чтобы проверить его (необходимо открыть только в новой вкладке или в окне браузера).
В браузере есть столбец одометра (как показано на рисунке 1). Рядом с ним, когда веб -страница закончила загрузку, вы увидите YSLOW и номера. Число представляет время (в секундах), необходимому браузеру загрузить веб -сайт. Мы хотим, чтобы это число было максимально низким.
Рисунок 1: Значок YSLOW и одометр, показывающий время загрузки веб -страницы
В большинстве случаев одна или группа причин, которые вызывают длительное время загрузки веб -страниц, следующее:
Мы обсудим это позже.
Чтобы убедиться, что время загрузки вашего собственного веб -сайта отобразится, просмотрите некоторые веб -сайты. Проверьте Google, Facebook и некоторые блоги и веб -сайты, которые вам нравятся. Вы заметите, что чем больше изображений используется веб -сайт, тем дольше будет время отклика страницы JS.
В дополнение к измерению того, как быстро он загружается, YSLOW предоставляет вам некоторые углубленные идеи, такие как то, что вы можете сделать, чтобы повысить производительность вашего сайта, а также отсутствие производительности загрузки вашего сайта.
На рисунке ниже - вкладка «Производительность» (как показано на рисунке 2). Но если вы нажмете на него, он покажет детали каждой области, которая влияет на время загрузки и общую производительность.
Рисунок 2: Теги производительности
В этой области наиболее субъективным выбором является использование CDN (сеть распределения контента) .CDN очень эффективен для крупных сайтов. То, что они делают, распространяют контент веб -сайта по серверам в разных регионах. Чем ближе физический сервер к пользователю, загружающему веб -сайт, тем быстрее страница. Таким образом, использование CDN - это распределение контента с сервера к ближайшему пользователю страницы.
Рисунок 3: Теги производительности Используют буквы (A, B, C, D, F), чтобы представлять оценки и текущие оценки (1-100).
Помимо использования CDN (что может быть дорогостоящим) - все остальное выполнимо.
Давайте проведем через каждый коэффициент уровня, вот короткая секундная скорость для каждого поля уровня и как решить эти проблемы для достижения оптимальной производительности.
Уменьшите HTTP -запросы : когда веб -страница получает файлы с сервера, будет сгенерирован HTTP -запрос. Область включает в себя сценарии, файлы CSS, изображения и асинхронные запросы клиента/сервера (AJAX и другие изменяющиеся технологии). Это ключевой момент, когда говорите о производительности, но его можно легко решить с небольшим усилием. Например, часто полезно как можно больше слияний, CSS и изображений, файлов кэша на машине пользователя.
Добавить заголовок термина : 80% времени загрузки страницы связано с сценариями загрузки, изображений и CSS. В большинстве случаев эти элементы не будут меняться в машине пользователя. Вы можете кэшировать код в .htaccess в локальной машине пользователя (мы обсудим, как работать позже в статье).
Компонент GZIP : Gziping или сжатые файлы JS, изображения, HTML -документы, документы CSS и т. Д. Пользователи могут загружать меньшие версии файлов для увеличения скорости загрузки веб -страниц. Это может снизить потребление сервера, но компоненты декомпрессии также могут привести к тому, что ответ страницы на более медленный, в зависимости от браузера пользователя.
Поместите CSS вверх : поместите файл CSS в верхнюю часть веб -сайта, который может одновременно загружать другие части, такие как изображения и текст.
Поместите JS внизу : поместите CSS во главе документа, вам нужно только вставить JS до закрытия <boby>. В то время как эти сценарии загружены в фоновом режиме, пользователь сначала получает, казалось бы, полную страницу.
Избегайте выражений CSS : я никогда не использовал выражения CSS (называемые динамическими функциями), которые являются лишь функцией CSS, которая добавляет концепции программирования (например, управление/условные структуры), начиная с IE8, двигатель макета Trident (используемый в IE) больше не поддерживается. В любом случае, у них нет хорошей идеи для использования. В некоторой степени я бы использовал сценарии PHP для загрузки различных правил стиля CSS на основе различных условий, таких как случайное число, время суток или браузер.
Внешние вызовы JS и CSS : размещайте файлы JS и CSS во внешние файлы, а браузер кэширует их с более высокой скоростью загрузки страниц, чем каждый вызов.
Уменьшите поиск DNS : до тех пор, пока пользователь набирает доменное имя в адресной строке браузера, браузер всегда будет выполнять поиск IP -адресов DNS. Чем больше мест вступления на веб -сайт есть, тем более необходимым будет поиск DNS. Держите уровень как можно меньше, и выполните запрос DNS в среднем 60-100 миллисекунд.
Зум в JS : в отличие от общего сжатия GZIP, увеличение документов JS - это удаление ненужных пространств, вкладок и других символов выбора Zhonghe Yang, уменьшить общий размер файла, а меньшие страницы могут получить более быструю скорость загрузки. Вы можете использовать JSMIN для увеличения JavaScript.
Избегайте перенаправления : будь то перенаправление заголовка сервера, перенаправление JS или перенаправление HTML -элемента. Ваш сайт загрузит заголовок пустой страницы, а затем новую страницу. Пользователи тратят все больше и больше времени, чтобы получить нужную им страницу, поэтому они должны избегать этого любой ценой.
Удалить дубликаты сценариев : Загрузка браузера, загружающий один и тот же сценарий, увеличит время загрузки страницы, что является очень простой математической проблемой, больше файлов равно большему времени загрузки. Дважды проверьте свой веб-сайт, чтобы убедиться, что вы не звоните JQuery дважды или три раза или другие сценарии.Когда ... это было много, давайте перейдем к следующей вкладке Yslow как раз перед тем, как мы перейдем к некоторым другим методам, чтобы повысить производительность вашего сайта.
Рисунок 4: Запчатые этикетки.
Частые теги (как показано на рисунке 4) могут дать представление о влиянии увеличения скорости загрузки веб -сайта. Здесь вы можете увидеть, как долго должен загружать текущий документ, если эти файлы сжаты, время отклика, и если они кэшируются в машине пользователя и когда кэш истекает. Это хорошая оценка веб -сайта, измеряя его производительность и оптимизацию скорости. Наконец, тег статистики (как показано на рисунке 4), в которой показаны все запросы HTTP, документы, загруженные одновременно, и файлы кэшировали. Пустой кэш отображает файл, который должен загрузить страницу рендеринга. Заправленный кэш, с другой стороны, отображает список файлов, которые уже существуют в кэше браузера пользователя, тем самым сохраняя запрос браузера, чтобы не загружать файл снова.
Рисунок 5: Вкладка «Статистика».