Добрый день, дорогой читатель! Сегодня, мы затронем тему, которая может сэкономить кучу нервных клеток и тебе и твоим подписчикам. Мы разберем, что влияет на скорость загрузки сайта и попробуем понять, что нам делать, если ты обычный блогер, а не программист.
Реклама
Прежде всего начнем с самого простого, а именно, реклама. Да, все мы любим размещать рекламу, чтобы получать скромную награду за наши труды, но главное не увлекаться. Браузер скачивает страницу с сервера, чем больше изображений, видео, файликов или музыки, тем дольше будет загружаться страница. Тут два варианта или уменьшать количество рекламы или искать другого рекламодателя, у которого рекламные блоки не будут, так сильно затормаживать загрузку.
Надежность хостинга
Не менее важно это как далеко находится сервер, его мощность и стабильность. На этот параметр Вы особо повлиять не сможете, да и фирмы, предоставляющие услуги хостинга, зачастую, заботятся, чтобы сайт загружался максимально быстро, а сервер был прекрасно настроен. Проверить это можно просто – почитайте отзывы. Если пишут, что сайты постоянно недоступны или виснут, может быть, дело не только в сайтах…
Качественный шаблон
Не стоит сбрасывать со счетов и качество написанного сайта. Современные методы разработки предлагают кучу ухищрений, чтобы экономить каждый возможный бит (минимальная единица измерения информации). Поэтому если Вы берете бесплатный шаблон или покупаете сайт по минимальной цене, то будьте готовы, что оптимизация окажется на нуле, а значит для посетителя это лишние 2-3 секунды, при оптимистичном раскладе. В общем-то наибольшая оптимизация выигрывается именно при качественной разработке сайта, но это подходит лишь тем, кто может себе позволить столь дорогостоящее мероприятие. В этом случае можно оптимизировать и работу с базой данных и отображение, и алгоритмы поиска по сайту… в общем раздолье.
Но вернемся на землю, то была лирика. Что конкретно можно предпринять, если денег нанимать программистов нет, а держаться надо?
Минимизация изображений
Первое это минимизация изображений. Все картинки, которые закачиваются на сайт, весят какое-то количество килобайт или даже мегабайт, если говорить о фото с высоким разрешением. Текст для современного интернета, почти невесом, а вот изображения очень даже. Тут можно испугаться, что недостаточная четкость картинки отпугнет посетителя, но важно лишь соблюсти меру, вот к примеру, сайт. Отлично демонстрирует, как можно уменьшить качество фото, а значит и его вес незаметно для глаз. Конечно, такой способ сложно рассматривать сайтам, специализирующимся на фотографиях… но опять же, можно отображать чуть худшего качества картинки в режиме ленты, а если посетитель нажал на фото – тогда максимального качества. Помимо минимизации изображений, можно поискать плагины, которые кешируют изображения, либо каким-то еще образом уменьшают время загрузки страницы.
Минификация и бандлы
Второе, волшебное слово минификация, программисты его любят, не путать с мумификацией. Как и было сказано выше, сайт состоит из кучи файликов, таблицы стилей, скрипты, странички… все это хранится на сервере и по требованию отдается в браузер посетителя. Давайте предположим, вы нашли свою старую тетрадь и решили использовать ее, но вот незадача – оказалось все листы в ней использованы, но остались на половину пустыми. Согласитесь, не рационально, а теперь подумайте, что происходит, когда на сайт приходят десятки таких тетрадей, где половина текста — это пустые строчки. Правильно! Снова увеличение времени загрузки сайта. Вот для решения этой проблемы и придумана минификация. Она убирает все лишние отступы, вот как на этой картинке, компьютеру нет разницы, он и так и так разберется, а вот вес файлика уменьшается. Для различных CMS часто существуют плагины или настройки, позволяющие настроить эту чудную функцию. К слову, поисковики, тоже очень любят, когда файлы минифицированы.
А теперь представим картину, Вы купили пакет картошки и Вам надо отнести его домой, но он порвался, и вся картошка рассыпалась по багажнику автомобиля. Как Вы предпочтете решить проблему? Собрать в пакет или носить по одной? Думаю, первое, так быстрее. Так вот тот же принцип работает и для файликов сайта на сервере. Их можно собрать в один большой пакет или бандл и отправить один раз. Собственно, если говорить о разработке сайтов под ключ, там чаще всего эти два способа (минификация и бандлы) связаны неразрывно. На счет CMS, как говорится, надо искать. Может поддерживает, а может и нет.
Шрифтовые иконки
И последний на сегодня способ — это использовать icon font или «шрифтовые иконки». Найти вы их можете без проблем и подключаются они легко, обычно, одной строчкой, а вот выгоду от них переоценить сложно. Как и было описано выше, каждое изображение — это лишние миллисекунды ожидания посетителя. Текст грузится быстрее, кроме того, эти иконки и выглядят красивее, чем их аналоги – в виде картинок. А еще используя стили css их можно легко окрасить в любой цвет, но об этом как-нибудь в другой раз. Вот пример сайта с «шрифтовыми иконками» от google. Там же описано, как их подключить (одной строчкой) и использовать. Подключаются иконки вставкой ссылки на файл-css в head вашего сайта. Может быть, в следующих статьях разберу подробнее куда именно вставлять строку подключения на примере wordpress или подобной CMS.
Подведем итоги
Итак, если говорить о разработке сайта под ключ с нуля, то тут глубина оптимизации, зависит лишь от Ваших средств и навыков программистов, рецепт зачастую один – пнуть компанию, занимающуюся поддержкой и указать страницы, которые тормозят.
Когда же мы говорим о сайте на каком-либо CMS, то тут возможностей гораздо меньше, но тоже имеются:
- подумайте, возможно, доход от сайта позволит заплатить за
качественный шаблон, который еще больше полюбят поисковые
системы и Ваши посетители;
- минимизируйте изображения еще до добавления на сайт и поищите
плагины для ускорения загрузки изображений;
- поищите плагин или настройку минификации и бандлов;
- уберите часть блоков или измените поставщика рекламы;
- вместо иконок картинок, используйте «шрифтовые иконки».
Начните с этих простых вещей и будете уже впереди многих ваших конкурентов. Надеюсь, кому-то этот пост пригодится. Спасибо за внимание! Удачи!
