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

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

Цель

Цель состоит в следующем: как разработчик, фронтенд-разработчик/дизайнер или... даже бэкенд-разработчик, как я, может использовать бесплатные инструменты для оптимизации существующего веб-сайта и создания его прототипа без какого-либо одобрения со стороны БОСС и не запрашивая никакой внешней помощи.

Я освещаю только основные концепции, а не обсуждаю философию UI/UX, которая не является целью этого поста. Пользовательский интерфейс/UX.

Рассматриваемые темы

Я собираюсь рассказать о следующем:

  • Как использовать бесплатные инструменты разработки для создания рабочего процесса для минимизации файлов CSS и Javascript.
  • Как использовать бесплатные онлайн-инструменты для минимизации HTML и оптимизации изображений.
  • Как использовать Google PageSpeed ​​и WebpageTest для проверки наших усилий.

Выбор сайта

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

  • Он использует старые веб-стандарты. Нет HTML5 и CSS3
  • Не подходит для мобильных устройств
  • Неправильная структура HTML
  • Несколько файлов CSS и JS
  • Распаковать изображения
  • Сайт не на WordPress (Оптимизировать сайт на WP — это как открыть банку с червями).

Удобство для мобильных устройств и тест PageSpeed

Мы входим в 2017 год. Мобильные пользователи уже обогнали десктопных. Совершенно очевидно, что вы хотели бы знать, оптимизирован ли ваш сайт для мобильных устройств или нет. Google предоставляет бесплатный инструмент под названием Mobile Friendly Test, используйте его, чтобы узнать, как ваш сайт отображается на мобильных устройствах. Я попробовал Правительственный портал Пакистана, и вот что я получил:

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

Строка выше будет разрешать viewport. Настройка области просмотра позволяет настроить всю страницу в соответствии с устройством, которое в данный момент ее просматривает. Я также собираюсь сделать сайт совместимым с различными версиями IE до IE11, чтобы отображать страницы в режиме Edge.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Хорошо, пока все хорошо. Давайте посмотрим, что говорит PageSpeed ​​о веб-сайте. Ну, не что-то хорошее.

Только 53/100. Больше, чем плохо.

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

Мы видим, в чем заключаются проблемы: минимизация файлов JS и CSS, объединение их в один файл и установка правильного размера шрифта.

Gulp и Twitter Bootstrap

Чтобы сделать страницу удобной для мобильных устройств, я собираюсь использовать Twitter Bootstrap framework, который уже взял на себя большую часть бремени разработки мобильных страниц. Хотя доступна версия 4 TBS, но, как и многие, я все еще придерживаюсь версии 3. Я рекомендую вам то же самое. Другой инструмент, который я собираюсь представить, это Gulp. GulpJS помогает вам автоматизировать рабочий процесс и сосредоточиться на своей первоначальной работе: разработке. Вместо того, чтобы тратить время на минимизацию файлов CSS/JS, копирование из одной папки в другую, все, что вы можете сделать, это настроить файл задачи gulp и позволить ему делать все от вашего имени. Gulp — это модуль узла, поэтому на вашем компьютере должен быть установлен NodeJS. Настройка Gulp не является частью этого поста, и вы можете найти несколько замечательных руководств в Интернете. Итак, ниже мой файл gulp.js:

var gulp = require('gulp');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');

gulp.task('default', function () {
    gulp.src('resources/css/*.css')
        .pipe(minifyCSS())
        .pipe(concat('style.min.css'))
        .pipe(gulp.dest('public/css'))
});

gulp.task('minify', function () {
    gulp.src(['resources/js/jquery-1.4.min.js', 'resources/js/jquery.imagerotator.1.0.min.js', 'resources/js/bootstrap.min.js', 'resources/js/site.js'])
        .pipe(concat('scripts.min.js'))
        .pipe(gulp.dest('public/js'))
});

После установки необходимых узловых модулей: gulp, gulp-concat, minify и uglify я собираюсь написать свой рабочий процесс, то есть то, как задачи должны действовать на мои файлы JS и CSS. Я уже скопировал необходимые файлы CSS и JS с веб-сайта и поместил их в отдельную папку resources. Помните, что ваша задача — не испортить существующий сайт и кодовую базу, а параллельно сделать еще лучше. Я помещаю ресурсы в папку resources, gulp затем копирую их после ряда задач в папку public, на которую затем ссылаются в HTML-документе.

Это должна быть задача по умолчанию, и вы можете добавить другие задачи. По умолчанию я извлекаю ВСЕ файлы CSS из resources/css, затем минимизирую их, а затем объединяю ВСЕ из них в один CSS и копирую в папку public/css. Теперь все это можно делать вручную так же, как раньше это делали разработчики. Здесь вам не нужно беспокоиться обо всем этом. В терминале запустите команду gulp или gulp ‹taskname›, и она должна выполнить соответствующую задачу. Поэтому по умолчанию я запускаю gulp, который минимизирует CSS, а для JS я запускаю gulp minify, который минимизирует файлы JS.

Я также создаю новый индексный файл с именем index2.html, и здесь я напишу свой HTML-код, удобный для мобильных устройств, с помощью Twitter Bootstrap.

CSS-градиенты

Если вы посетите веб-сайт правительства Пакистана, вы заметите градиентный фон зеленого и белого цветов. Они используют файл изображения, который на самом деле представляет собой PNG-файл размером 16 x 900 и размером около 5,5 КБ. Теперь CSS3 здесь, вы можете добиться того же результата без использования файла изображения. Помните, что моя цель — ускорить веб-сайт, исключив как можно больше HTTP-запросов и оптимизировав оставшиеся запросы. Теперь проблема в том, как мне создать CSS, поскольку я не CSS-ниндзя и не дизайнер. Это также цель не мешать другим людям для моего собственного эксперимента. Я всегда пытаюсь найти генераторы для различных вещей, которые я делаю во время разработки. К счастью, какой-то хороший парень создал инструмент, который преобразует градиентное изображение в правила градиента CSS. Привет Gradient Finder, что эта задача быстро. Чтобы градиент отображался на сайте, я сделал следующее:

html {
    height: 100%;
}

body {
    height: 100%;
    font-size: 12px!important;
    font-family: Arial, Helvetica, sans-serif;
    background: -webkit-linear-gradient(top, rgb(18, 89, 44) 0%, rgb(158, 188, 169) 18%, rgb(252, 253, 252) 32%, rgb(252, 253, 252) 100%);
    background: -o-linear-gradient(top, rgb(18, 89, 44) 0%, rgb(158, 188, 169) 18%, rgb(252, 253, 252) 32%, rgb(252, 253, 252) 100%);
    background: -ms-linear-gradient(top, rgb(18, 89, 44) 0%, rgb(158, 188, 169) 18%, rgb(252, 253, 252) 32%, rgb(252, 253, 252) 100%);
    background: -moz-linear-gradient(top, rgb(18, 89, 44) 0%, rgb(158, 188, 169) 18%, rgb(252, 253, 252) 32%, rgb(252, 253, 252) 100%);
    background: linear-gradient(to bottom, rgb(18, 89, 44) 0%, rgb(158, 188, 169) 18%, rgb(252, 253, 252) 32%, rgb(252, 253, 252) 100%);
}

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

Адаптивный ротатор изображений

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

Я создал новый JS-файл с именем site.js и поместил в него этот код. Также я оптимизировал вращающиеся изображения, чтобы уменьшить их размеры. Не обращайтесь к графическому дизайнеру или не используйте Adobe Photoshop для этой цели, используйте для этой цели бесплатную OptimZilla.

Помимо использования онлайн-инструментов, вам также следует установить плагин для браузера, который даст вам представление о том, как ваш сайт отображается на экранах разного размера. Для этой цели я использую плагин Responsive Web Design Tester Chrome. Вот скриншот:

Как видите, Google не ноет без причины.

Сделав несколько изменений, я попытался протестировать его в Google Speed, и вот что у меня получилось:

85/100. Неплохо, но со временем это изменится, когда мы продвинемся дальше. Поскольку у меня нет доступа к веб-сайту правительства, я размещаю все изменения на своем собственном сервере.

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

Включить сжатие через .htaccess

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

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Результат

Ниже приведен Оценка PageSpeed как для мобильных устройств, так и для компьютеров.

Тестирование производительности

Google Speed ​​дает вам представление о том, насколько хорош ваш веб-сайт визуально или иначе, но Google Speed ​​— это не конец света, и вы не должны убивать себя, чтобы получить 100/100 баллов. Я мог бы решить еще несколько вещей и получить здесь 95+ баллов, но из-за сайта и существующей структуры CSS это казалось трудным, и это не было целью.

Теперь я хочу проверить, насколько сильно повлияли мои изменения. Чтобы увидеть, насколько хорошо загружается мой сайт, WebpageTest — лучший доступный инструмент. На официальном сайте checking:

Слишком много красного. Теперь вы можете начать понимать, что происходит не так. Большая F при получении первого байта. Посмотрите еще один скриншот той же страницы:

Около 10 секунд при первой загрузке. 10 секунд — это слишком много в мире Интернета. Максимальное рекомендуемое время загрузки — 2 секунды. Отчет ссылка здесь дает представление о том, на что уходит много времени. Теперь детальный вид дает вам больше информации:

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

А теперь сравните с моим:

Загрузка заняла около 0,875 с, как вы можете видеть в детальном представлении. После документа HTML он загружает файлы ротатора. Если вы посмотрите здесь в Waterfall, то увидите эти файлы Pakistan_day2.jpg и PmYouthLogo.jpg, занимающие 1219 мс и 2187 мс соответственно, тогда как в то время как эти изображения были оптимизированы, в детальном просмотре они указывают, что занимают 626 мс и 193 мс соответственно. Огромная разница только потому, что изображения были оптимизированы.

Вывод

Это здесь. Я показал вам, как разработчик или дизайнер вы можете оптимизировать существующую страницу и сделать ее совместимой с современными веб-стандартами. Этого здесь недостаточно. Есть много других причин, по которым веб-сайт может работать медленно, и они больше связаны с серверной инфраструктурой; Медленные запросы MySQL, избыточные соединения с базой данных, без использования систем CDN и кэширования. Есть много возможностей, но это отдельная глава, и я когда-нибудь расскажу об оптимизации бэкенда. А пока наслаждайтесь этим. Финальную оптимизированную страницу можно увидеть здесь. Я сделал несколько визуальных изменений, таких как измененный нижний колонтитул и панель навигации, так как мне не нравилось то, что было на исходной странице. Для тех, кто хочет увидеть несжатую HTML-страницу, можно посмотреть здесь. Код скачивается отсюда.

Ваш веб-сайт загружается медленно, и вы хотите знать, что происходит? Я могу помочь вам в этом отношении. Просто отправьте мне письмо по адресу kadnan (at) gmail (dot) com , и я постараюсь вам помочь.

Оригинальная версия этого поста доступна здесь.