Лендинг для ███-█

Лендинг на тему многопустотных плит.

История об отправке email с хостинга, где нет адекватного доступа к PHP. (на любые скрипты сервак выдаёт 403 ошибку)

Я хз что у них там с хостингом (да мне теперь и пох*й уже как то), но сайт уже должен был работать и принимать заявки, что называется, «уже вчера».

 

К счастью, временный выход из ситуации был найден — я использовал свои наработки из старенькой статьи об аплоадинге файлов через iframe. Таким образом, вместо отправки AJAX запроса напрямую, в качестве транспорта используется скрытый iframe, через который запрос направляется к почтовому скрипту, расположенному на другом сервере.

 

Кроме того, поработал с вёрсткой, например, реализовал CSS3 анимацию для переключателя плит:

 

 

Еще поправил косяки по адаптивной части, реализовал динамические поля для формы (спустя некоторое время после релиза это выпилили, лол) расчёта стоимости и набросал небольшой клон Bootstrap Modal (верстальщик запилил разметку на vanilla css).

 

Добавил определитель города на основе SypexGeo, а также возможность выбора своего города. Для реализации этой возможности взял базу данных всех городов России, перевёл всё это в csv/txt формат, и провёл несколько фильтраций (спасибо sed и awk за это), чем сократил размер базы с 4.2 до 1.3 мегабайт, после чего разделил её на несколько файлов по первой букве (чтобы не грузить всю базу, т.е. сократил поиск по базе в 1.3mb до поиска по файлу размером от ~4 до ~100 кб). Клиент получает и выбранный пользователем город и определённый с помощью SypexGeo.

 

     

    Запилил скрипты для Яндекс.Метрики и Google Analytics, ну тут в общем–то всё как обычно на наших лендосах.

     

    Еще один момент — из–за переноса всех скриптов и стилей вниз страницы, появляется одна неприятность: при заходе на сайт, пользователь имеет возможность лицезреть нестилизованную страницу, до тех пор пока не подтянутся стили, так что это я тоже реализовал.

     

      Последним делом прокачивал оптимизацию сайта. Изначально выбил 84 попугая в Google Page Speed для мобилок и 90 для ПК. Тут дело было в использовании мной неоптимизированной GIF анимации в качестве прелоадера и еще пары упущенных верстальщиком моментов.

      Оптимизация в основном заключалась в следующем — оптимизировал по максимуму GIF (подробнее см. во врезке ⇒),

      — это дало существенный прирост по мнению PSI (ну и страница полегчала килобайт на 30, что тоже приятно)

       

      Вторая оптимизация заключалась в выпиливании неиспользованных шрифтов. Дело в том, что верстальщик добавил через «Google шрифты» нечто вроде:

       

      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic" rel="stylesheet">

      При этом использовав на сайте всего 3 гарнитуры из 10 загружаемых (много не всегда хорошо).

       

      В результате оптимизаций, страница теперь спокойно набирает 95 на PC и 94 на мобильных. (Было бы больше, но я, к сожалению, не могу понять как еще можно оптимизировать две проклятые джипеги, я их прогнал через gulp-image и tinyjpg – результат нулевой)

      Для улучшения look&feel удобно использовать анимированный прелоадер. Тут каждый выбирает свой путь (например, SVG + CSS3 Animation или просто GIF), лично я предпочитаю использовать GIF формат. Для этого формата существует огромное количество генераторов прелоадеров на любой вкус.

      *   *   *

      Если Вы решите использовать GIF, то вот Вам пара рекомендаций:

      1. Откройте гифку в GIMP и оптимизируйте её (Filters→Animation→Optimize For GIF), это позволит существенно сократить размер файла
      2. Оптимизируйте полученный файл с помощью сервиса ezgif, это позволит сократить размер файла еще процентов на 15–20 (тут как повезёт)
      3. Чтобы не перегружать канал пользователя, следует встроить эту анимацию в base64 закодированном формате. Чтобы закодировать изображение можно воспользоваться системными функциями, либо удобным web–сервисом.

       

       

       

      *   *   * 

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

      *   *   *

       

      Как прокачивать сайт

      Краткий how-to:

      1. Сжимаем все PNG файлы связкой gulp-image + gulp-tinypng (можно юзать только tinypng, но гугл считает, что они могли бы жать и получше), все JPG, SVG достаточно только gulp-image
         
      2. Переносим все скрипты и стили в конец страницы и делаем их инлайновыми (с помощью модуля gulp-usemin)
        * Также перед прогоном usemin я дополнительно прогоняю страницу через gulp-minify-inline чтобы пожать всё что и так было инлайновым на странице – usemin почему–то это не умеет :(
         
      3. В сдедствие этих действий мы получаем отложенную загрузку css, поэтому дополнительно добавляем прелоадер (я заюзал fixed блок + gif в виде base64)
         
      4. Разумеется очень желательно включить gzip чтобы пожать всё перед отдачей
         
      5. Если имеется доступ к htaccess, то включаем кэширование (тут я не стал ничего выдумывать, а взял готовое решение с хабра)
         
      6. ...
         
      7. PROFIT!!1

       

      Примечание:

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