Ответ
Как улучшить время загрузки сайта за 10 минут Опции темы
Старый 19.05.2014, 16:25
  #1
Investor
 
Аватар для Investor
Регистрация: 20.12.2013
Сообщений: 81

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





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





Так как я был убежден, что страница создавалась практически с использованием только наилучших практик, принял решение испытать ее с помощью удивительного инструмента Page Speed Insights Google.

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





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

Вот тогда я и вспомнил о маленьком проекте, запущенном Google, под названием mod_pagespeed. Он был разработан для того, чтобы обрабатывать все необходимые требования по оптимизации страницы автоматически, а значит я мог бы просто установить его один раз и затем никогда не думать о этих проблемах снова.

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

Итак - mod_pagespeed работает напрямую с программным обеспечение вашего сервера (в настоящее время он поддерживает как Apache или Nginx). Если вы один из тех несчастных душ, которые застряли с IIS, то вы можете попробовать его клон по имени IISpeed, что работает более или менее таким же образом.

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

Так что имейте виду, что эти инструкции предназначены для работы с Apache 2.2 и Ubuntu 12.04 (64-битной). Однако если у вас другой набор установок, надеюсь, эти инструкции потребуют минимальных изменений для работы.

Давайте начнем с загрузки модуля mod_pagespeed для Apache.

cd /tmp
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb
Затем нам нужно установить его с помощью следующих команд.

sudo dpkg -i mod-pagespeed-*.deb
apt-get -f install
Итак, выполнили всего 4 команды и уже так близки к завершению, потому что этот модуль автоматически включается после установки. Тем не менее, нам нужно будет перед этим еще перезапустить Apache. Это легко сделать с помощью следующей команды.

service apache2 restart
Теперь все должно работать. Было ведь не слишком больно, правда? Единственная проблема состоит в том, что в сборке mod_pagespeed «из коробки» - по умолчанию - позволяет использовать только небольшое количество фильтров (оптимизации). Для того, чтобы действительно начала работать та максимальная оптимизация, которую я хочу, мне нужно будет помастерить чуть-чуть больше.

К счастью, что это вовсе не трудно и это просто вопрос редактирования конфигурационного файла который мы можем открыть командой:

sudo nano /etc/apache2/mods-available/pagespeed.conf
Теперь все, что нужно сделать, это взглянуть снова результаты, которые я получил раньше в Page Speed Insights для того, чтобы выяснить, какие фильтры следует включить.

Я решил сделать так:





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

rewrite_javascript & rewrite_css
Этот фильтр будет применяться ко всем Javascript или CSS кодам вашего сайта (неважно во внешних они файлах или встроены в страницу) и уменьшать их, чтобы ускорить загрузку таким же способом, как и в следующем фильтре для HTML кода.

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

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

recompress_png & recompress_jpg
Одна из выданных рекомендаций, которую надо было выполнить по отношению к каждому изображению сайта - сжимать их так, чтобы качество осталось прежним а размер файла был уменьшен. Каждый раз, когда мне нужно будет добавить новую картинку на сайт, я должен буду проходить этот процесс снова и снова. По моему опыту это именно тот вид рекомендации, на которые люди отмахиваются со словами: "это не стоит делать", и перемещаются на следующий пункт списка. Однако с этими двумя фильтрами mod_pagespeed будет автоматически делать оптимизацию для меня, независимо какие изображения я поместил и еще помещу на странице. И все это добавив всего одну строчку в конфигурационный файл. Поистине - большой успех!

combine_css & combine_javascript
Одна из лучших практик в современной веб-разработке внешнего интерфейса заключается в объединении всех ваших CSS и всевозможных JavaScript файлов в один файл. Причина этого в том, что каждый раз, когда вы ссылаетесь в вашей странице на внешний файл, это приводит к созданию нового HTTP запроса, который ваш браузер должен задать серверу, чтобы получить файл. Не вдаваясь в то как работает протокол HTTP, вы просто должны знать, что он включает лишние переходы, занимая дополнительное время необходимое для загрузки страницы. Этот фильтр будет принимать все мои CSS файлы и объединять их в один супер файл. А это означает, что вместо того, чтобы слать целый букет HTTP запросов для каждого CSS файла, у нас теперь будет лишь один запрос.

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

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

Теперь по сути - нструмент Page Speed Insights сообщил мне, что я должен использовать эту особенность для всех моих изображений, CSS и JS файлов. То есть именно то, что делает этот фильтр. Он будет рассказывать браузерам, что они могут держать копию этих файлов на пользовательских жестких дисках сроком до одного года, прежде чем должны будут потрудился проверить их снова для обновления.

insert_dns_prefetch
Если вы не компьютерщик, то вероятно вы не в курсе что каждый раз, когда браузер посылает URL-строку, он должен получить сопоставление доменного имени и IP-адреса его сервера. Это делается с помощью так называемого DNS.

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

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

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

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

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

Теперь, без дальнейших церемоний, перезапускаем Apache еще раз и проверяем результаты своей работы.





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





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

В целом, я думаю, что вы согласитесь, что это были довольно производительные 10 минут времени, и теперь у меня все настроено так, что я никогда не буду трогать сайт снова, все работает как надо
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Уникальный шаблон для сайта за 5 минут в Artisteer StrannikK Файлообмен 31 19.03.2016 12:12
Умный пластырь определит время приема лекарств Mercury Аналитика 0 31.03.2014 12:13
Развенчиваем мифы Google о скорости загрузки сайта Alsu Аналитика 0 30.08.2013 19:01
Создаем лендинг за 10 минут с Lpgenerator Ashable Магазины 3 31.05.2013 11:41
6 способов улучшить социальные показатели в SEO Ashable Магазины 0 28.02.2013 22:55

Метки
pages speed, оптимизация, скорость сайта


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 15:36. Часовой пояс GMT +3.