Быстрый сайт, доступный каждому!

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


В конце этой статьи мы ответим на следующие вопросы:

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

Часть 1. Статическая оптимизация

Под критерии статических ресурсов подпадают графические ресурсы с, например, большим количеством фотографий, огромным количеством каскадных таблиц стилей (*.css) и, учитывая современные тенденции к «красивым» сайтам, файлы JavaScript (*.js). Первым шагом в оптимизации статики станет технология минификации файлов *.css и *.js. Итогом этого процесса станет сборка единого файла и, как результат, уменьшение количества запросов на сервер при загрузке контента.

  1. <!--style block-->
  2.  <link rel="stylesheet" href="/static/main.css" type="text/css">
  3.  <!--//style block-->
  4.  
  5.  <!--js block-->
  6.  <script src="/static/main.js" type="text/javascript"></script>
  7.  <!--//js block-->

Для оптимизации JavaScript и CSS

1. Minify [ code.google.com/p/minify ]

Это PHP-скрипт, который сжимает и объединяет файлы *.js/*.css, а также HTML. Данное приложение работает как «модуль» между оригинальными и минифицированными файлами. Встроен механизм автоматической проверки изменений в исходных данных, а также автоматическая генерация путей.

2. YUI Компрессор [yui.github.io/yuicompressor]

Утилита для минификации статических файлов. Существует огромное количество online-версий, в которых вас просят загрузить файл или вставить исходный текст. После прогона, Вам будет предоставлена возможность скачать оптимизированную версию. Пример такого сервиса представлен тут [ganquan.info/yui]

Как пользоваться утилитой в консоли

  1. java -jar yuicompressor-*.jar non-compress.js -o compress.js --charset utf-8

Для оптимизации графических элементов

1. OptiPNG [optipng.sourceforge.net]

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

Как пользоваться утилитой в консоли

  1. #ищем изображения с нужным расширением и производим оптимизацию
  2. find . -iname "*.png" -exec optipng -strip all "{}"

2. Jpegoptim [freecode.com/projects/jpegoptim]

Аналогичный функционал, но для файлов с расширением *.jp?g

Как пользоваться утилитой в консоле

  1. #ищем изображения с нужным расширением и производим оптимизацию
  2.  find . -iname "*.jp*g" -exec mozjpeg -copy none -optimize -outfile "{}" "{}"

Если вы используете CMS для управления сайтом, то существует большая вероятность наличия дополнительных модулей/плагинов, осуществляющих минификацию, в обратном случае идеальным вариантом для сборки станет gulp [gulpjs.com] или grunt [gruntjs.com]

Часть 2. Backend оптимизация

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

  • Наличие 301 редиректа с www версии сайта на no-www или наоборот. Зависит от того, какое зеркало вы используете в качестве основного.
    1. server {
    2.  listen 80;
    3.  server_name flyart-studio.com www.flyart-studio.com;
    4.  return 301 https://flyart-studio.com$request_uri;
    5. }
  • Gzip сжатие статики. Многие веб-серверы могут перед отправкой сжимать файлы в формат GZIP, используя собственные процедуры или сторонние модули. Это позволяет ускорить загрузку ресурсов, необходимых для отображения веб-сайта.
    1.  gzip on;
    2.  gzip_comp_level 7
    3.  gzip_vary on;
    4.  gzip_types *;
    5.  gzip_min_length 1024;
    6.  gzip_disable "msie6";
    7.  gzip_proxied any;
  • Состояние модуля кеширования файлов. Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из интернета.
    1. location ~* ^.+.(html|jpg|jpeg|gif|css|png|js|ico|gz){
    2.  expires 60d;
    3. }
  • Оптимизация времени ответа сервера. Этот параметр определяется временем загрузка кода HTML для отображения страницы в браузере пользователя. Если время ответа сервера варьирует в широких пределах, это обычно связано с проблемами производительности машины и качеством предоставляемых услуг виртуального хостинга. В этом случае, необходимо понять причину медленной загрузки и устранить ее. Во многих случаях, использования сети доставки контента (CDN) значительно ускоряет скорость отдачи. Для ознакомления с услугой CDN можно воспользоваться сервисом с бесплатным тарифным планом от Cloudfare cloudflare.com.

Настоящая статья носит ознакомительный характер, поэтому большинство технических моментов не оговаривается. Главная цель - это формирование четкой позиции, которая позволит понять всю важность процесса оптимизации. Стоит отметить факт использования СУБД, например, MySQL или pgSQL, грамотная и адекватная настройка которых позволяет снижать количество обращений к собственной базе данных. Прямым следствием только одного этого является увеличение скорости генерации динамического контента.

Часть 3. Значение социальных сетей

Социальная составляющая играет одну из важных ролей в продвижении любого коммерческого ресурса от корпоративного сайта до крупного интернет-магазина. Вы можете представить себе всю мощь и потенциал инструментов социальной сети, используемой для этой цели? Павел Дуров (ВКонтакте) и Марк Цукерберг (Faсebook) уже позаботились о том, чтобы миллионы пользователей вводили информацию о своих любимых местах, интересах и предпочтениях. Если вы желаете найти свою нишу потребителя ваших продуктов (товаров, услуг), то крупные социальные сети помогут вам в этом

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

  1. <!--schema.org block-->
  2. <div itemscope itemtype="http://schema.org/Organization">
  3. <meta itemprop="name" content="ООО «Флайарт»">
  4. <meta itemprop="telephone" content="+7 (8452) 37-51-70">
  5. <meta itemprop="email" content="ask@flyart-studio.com">
  6. <meta itemprop="openingHours" datetime="Mo-Su">
  7.   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
  8.     <meta itemprop="streetAddress" content="ул. Орджоникидзе, 6А">
  9.     <meta itemprop="postalCode" content="410015"> 
  10.     <meta itemprop="addressLocality" content="Саратов">
  11.   </div>
  12. </div>
  13. <!--//schema.org block-->

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

Вывод

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