Дом творчества и свободы
Главная Написать
Front-End оптимизация. Секреты нашего издания
Оптимизация Front-end ресурсов всегда являлась наиболее популярной темой. А всё потому, что чем быстрее происходит загрузка вашего сайта, тем больше пользователь доволен. А довольный пользователь - очень весомый показатель для поисковых систем. Google, к примеру, официально заявил о том, что такие сайты будут отображаться выше в поисковой выдаче, а также, он предоставляет подобие автоматической скидки в AdSense этим сайтам.
1. Минимализм Простота (не примитивность, а элегантный, стильный минимализм) - огромная, титаническая работа, нет ничего удивительного в том, что инженеры и дизайнеры Apple в Купертино работают едва ли не круглосуточно (даже над обычной упаковкой для гаджета!). И этот элегантный минимализм у Apple во всем - одна кнопка на iPhone, небольшая линейка продуктов, отсутствие сложности и бюрократии внутри самой компании. Почему же он так важен? Те, кто как и я, помнят развитие интернет-ресурсов, наверняка знают, что эпоха Интернета после фанатских сайтов-одностраничников с жетым текстом на красном фоне приняла немного иной поворот в сторону использования изображений-градиентов: теперь фон блоков задавался с помощью изображения, которое могло быть рельефным, более-менее обьемным, вообщем, всё было хорошо, но эти же самые изображения слишком медленно загружались или создавали большое количество запросов к серверу, а вот аналогов им не было. Со временем, на смену им пришел CSS, пару строк кода и произошла революция: сайты сумели создавать аналогичные градиенты, после эксперементов с которыми очень многие разработчики использовали flat дизайн на своих веб-сайтах, который завоевал не бывалую ранее популярность. К чему это я? Нужно уметь упрощать вещи. Принцип KISS - Keep it simple. Keep it stupid. К примеру, давайте взглянем на Washingthon Post. При всем уважении к коллегам по цеху, но сайт действительно перегружен информацией, более того, он похож на большую доску обьявлений. А ведь это один из самых популярных интернет-ресурсов в США! Да что там, я тоже время-от-времени читаю его и многие из тех, кто изучает английский в университетах к нему очень часто обращаются(это вообще довольно распостраненная практика, особенно у филологов, которые берут статьи для перевода из иностранных СМИ). Кроме того, что это шокирует пользователя, такой обьем информации создает дополнительную нагрузку на сервер и засоряет кешем пространство на вашем жестком диске. 2. Сторонние библиотеки Использование посторонних библиотек таких как JQuery постоянно поощряется работодателями. Но, по сути, это велосипед. К примеру, мы не нашли ему применения на сайте нашего интернет-издания. Намного предпочтительней использовать только нативные инструменты, к примеру, AJAX-класс, который используется нами занимает 1.4kb аналогичный обьем был бы с использованием скрипта под JQuery + размер самой библиотеки, итого уже стоимость реализации выходит дороже. Абсолютно всё, что позволяют сторонние интструменты вы можете реализовать сами намного быстрее и качественнее, а всё потому, что они предназначены для широкого круга лиц, а ваш код будет служить Вам и ничего лишнего в нем не будет! Позволю себе заметить, что крупные корпорации с первоклассными специалистами полностью отказываются от стороннего ПО как во имя безопасности так и во имя оптимизации использования ресурсов. Поэтому, использовать исключительно свои изобретения - хороший тон. 3. Спрайты Ранее я никогда их не использовал, однако они меня просто поразили. Во-первых, количество запросов к сайту сокращается, во-вторых общий вес обьединенного изображения будет намного меньшим из-за нескольких причин: 200-300 байт занимает размер заголовков, которые посылает и получает браузер для загрузки изображения; при обьеденении нескольких изображений в одно, его вес будет меньше за счет внутренней оптимизации палитры и обьеденения секторов. Кроме того, вы также можете использовать этот инструмент для ещё большей оптимизации изображения, он позволяет очистить изображения от ненужных меток и пр. данных графического редактора, а также уменьшать его вес за счет потери качества, которое не будет заметно пользователю! 4. AJAX Наиболее затребованный инструмент в деле front-end разработчика, он позволяет передавать и получать данные из сервера без полного обновления страницы. Таким образом обновляется не вся страница, а лишь её необходимая часть. Просто must-know! Изучить можно здесь 5. Кеширование Здесь очень важно выделить два основных момента: - Кеширование подгружаемых файлов реализуется за счет соответствующей записи в htaccess(проверено на Apache): <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/font-woff2 "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" </IfModule> - Кеширование страницы лучше всего реализовать с помощью Etag, таким образом, если браузер передал эту метку на сервер можно проверять изменилось ли содержимое страницы, если нет - сообщить, что страница не изменилась: function Etag(string $module, int $modified) { header("Last-Modified: ".gmdate("D, d M Y H:i:s", $modified)." GMT"); header("Etag: $module"); header("Cache-Control: public"); header("Pragma: cache"); if (strtotime(@$_SERVER['HTTP_IF_MODIFIED_SINCE']) == $modified) { exit(header("HTTP/1.1 304 Not Modified")); } } 6. Минификация и оптимизация После того как вы написали свой front-end код, привели его в порядок, вы просто обязаны провести его оптимизацию и минификацию. Минификация состоит в том, чтобы очистить код от всех пробелов и отступов. А оптимизация помогает сокращать код более умно, к примеру, заменять 0.5em на .5em, давать переменным более короткие имена, обьединять похожие css-свойства для разных блоков и пр. Да, код становится нечитаемым, но он всё равно понятен браузеру и вес его намного меньше. Следует использовать оба приема! CSS-минификатор + оптимизатор JS-минификатор + оптимизатор 7. Сжатие Но и это не предел, если вы когда-либо использовали архивы, то вы можете подключить подобную функцию для вашего ресурса: на стороне сервера файл автоматически сжимается, а пользователь также автоматически получает его и расжимает. Существует две техники сжатия - Gzip и Zlib. Код htaccess для активации Gzip (аналогично проверено на Apache): # Само сжатие AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-font-ttf application/font-woff2 # Заголовки для сжатия некоторых форматов <IfModule mod_mime.c> AddType application/font-woff2 woff2 AddType application/x-font-ttf ttc ttf </IfModule> Ньюанс: не используйте сжатие для изображений, они уже сжаты, напротив, вес изображения может увеличиться 8. WebP и WoFF2 WebP является очень эффективной заменой JPEG-изображениям с ещё большей степенью сжатия! Конвертировать изображение в WebP вы можете здесь. Но, к сожалению, Firefox его не поддерживает, поэтому, можно воспользоваться техникой, которая будет отдавать изображение WebP браузеру, который его поддерживает, и обычное изображение для предателя. WoFF2 эффективная замена ttf-шрифтам с минимальным весом. Конвертировать ttf в woff2. 9. Cloudflare & HTTP 2/0 Cloudflare позволяет использовать CDN(сеть серверов, в которой передача данных будет производится из ближайшего к вам), минифицировать и оптимизировать css, js, html(я всё равно использую эту галочку, файлы оптмизируются, даже несмотря на предыдущие оптимизации) и использовать HTTP 2/0(новейшая версия протокола, которую почему-то хостинги не спешат вводить; кратко - протокол передает информацию ещё быстрее, ограничение на одновременное количество запросов к серверу снято). Всё это бесплатно :) И в заключение... Рекомендую также ознакомиться с технологиями AMP(Accelerated Mobile Pages), WebSQL Database и Progressive Web Apps, с которыми я ещё не работал, поэтому ничего дельного посоветовать не могу. После использования всех вышеуказанных техник мы получили довольно яркую оценку в 92/100, хотя и неудовлетворительную для нас: мы рассчитывали, как минимум, быть на 3 позиции выше, но из-за использования посторонних сервисов Google Custom Search и ReCaptcha, которые не соизволили минифицировать/оптимизировать свои скрипты получилось то, что получилось. Протестировать скорость загрузки вашего сайта можно здесь
Следующая запись
Предыдущая запись
RELATED POSTS
COMMENTS
LEAVE A COMMENT
Никнейм:
Комментарий: