🤔 Вы же наверняка задумывались, как помочь своей половинке зарабатывать больше? Но что делать, если во всех этих маркетингах и процедурах не разбираешься от слова «совсем»? Мы нашли выход — это сервис VisitTime
Чат-бот для мастеров и специалистов, который упрощает ведение записей:
— Сам записывает клиентов и напоминает им о визите
— Персонализирует скидки, чаевые, кешбек и предоплаты
— Увеличивает доходимость и помогает больше зарабатывать
А еще там первый месяц бесплатно, поэтому лучшее, что вы можете сделать сейчас — установить или показать его своей принцессе Всё интуитивно понятно и просто, достаточно нажать на этот текст и запустить чат-бота
Как сделать сайт быстрым
Тяжелые сайты не безразличны факторам ранжирования поисковых систем и тем, кто на них заходит. А большинством заходят с мобильных телефонов и тупо ждать, когда сайт откроется, никто уже, как раньше не хочет, а ведь большую часть трафика мы получаем с мобильных устройств.
Немного стараний и voila, у меня получилось поднять скорость загрузки своего сайта почти в 2 раза, с 54 до 98-100 пунктов, по меркам мобильных устройств. Данные о скорости, в имитации загрузки страницы приятно позеленели и превзошли мои ожидания:).
Что для этого нужно:
- Убрать JavaScript из верхней части кода страницы и перенести его поближе к </body>;
- Сделать для CSS, Javascript загрузку отложенной или асинхронной;
- Уменьшить вес картинок и отложить их загрузку через ленивую прокрутку;
- Настроить кэш браузера;
- Отложить загрузку рекламы (если такое имеется);
С первым пунктом я думаю все понятно, находим все скрипты вида <script type='text/javascript'>...</script> копируем и вставляем их в footer перед закрывающим тегом </body>, чтобы они не мешали в первую очередь загрузится основному, более важному коду страницы. Кроме этого загрузку большинства скриптов для увеличения скорости загрузки страницы, нужно будет еще и отложить или сделать асинхронной.
Каждый раз, что-то меняя в html-коде, перепроверяйте сайт на скорость, перед этим обязательно очистить историю браузера. Онлайн информацию по каждой странице, можно получить из своего Google Аналитика, на вкладке Скорость загрузки сайта (очень удобно).
Простой способ отложить загрузку стилей CSS
Кроме .js скриптов прописанных в шапке, быстро открываться, сайту мешает файл.css в большей или меньшей степени, на сколько именно ms, можно узнать на PageSpeed Insights, но тормозит обязательно. С маленьким объёмом .css можно не трогать, большому лучше отложить загрузку, что даст возможность быстро загружаться первому контенту, тем более сделать задержку, сегодня стало проще.
Замените свой:
на:
<link rel="preload" href="mystyle.css" as="style" onload="this.rel='stylesheet'">
в href mystyle.css пропишите свой и готово:).
Но к сожалению не все браузеры могут сотрудничать с атрибутом rel="preload", браузеры Chrome и Яндекс поддерживают, отстаёт Firefox. Для Firefox и остальных подобных браузеров нужен на сайте дополнительный скрипт cssrelpreload.js, чтобы css правильно подгружался:
<link rel="preload" href="mystyle.css" as="style" onload="this.rel='stylesheet'">
<script async src="cssrelpreload.js"></script>
Добавим <noscript></noscript> чтобы стили подключались как обычно, когда у браузера нет возможности работать со скриптами.
Вот, что получилось:
<link rel="preload" href="mystyle.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="path/to/mystyle.css"></noscript>
<script defer src="cssrelpreload.js"></script> - прописываем отдельно ближе к тегу </body>
Как отложить загрузку .js скриптов
Несмотря на то, что все скрипты мы перенесли из шапки в подвал, они по прежнему в не лучшую сторону влияют на скорость сайта. Не основным JS-скриптам (метрики, соцсети, реклама и т.д.) нужно отложить загрузку или сделать её асинхронной с помощью атрибутов async и defer.
Кроме того, увесистые скрипты быстрее будут загружаться с сервера на котором расположен сайт, а не со сторонних ресурсов. Скачиваем .js скрипт и закидываем его в отдельную папку.
Вот, как это выглядит:
defer или async
Тут можно поиграть с атрибутами, так как по разному, при разных обстоятельствах, строении сайта они могут влиять на скорость загрузки, проверенно:).
Как уменьшить вес картинок и отложить загрузку
Понятно, что чем меньше весит картинка, тем быстрее она раскроется и загрузка страницы будет считаться завершённой. Прежде чем залить картинку на сервер, я всегда пропускаю её через программу FileOptimizer, бесплатная и очень популярная. Сжимает картинки, но при этом оставляет хорошее качество. Можно сжимать и онлайн способом, очень много для этого есть сервисов в интернете. Оптимизировать нужно все, что есть картинки на сайте.
Асинхронная загрузка и ленивая прокрутка
Но, опять же не всегда только сжатием можно обойтись и получить максимальный результат в процессе сделать сайт быстрым. На страницы может быть размещено много картинок или большого размера и опять долгая загрузка несмотря, что им уменьшили вес. Нужно сделать так, чтобы загрузка картинок была асинхронной или открывались только те, которые попадают в поле зрения монитора устройства, а при прокручивании страницы постепенно подгружались, подключить картинкам ленивую прокрутка.
Асинхронная загрузка jmg:
Для небольших и(или) малого количества изображений на странице, достаточно к элементу jmg добавить атрибут loading="lazy", чтобы подсказать браузеру, что загрузку данных элементов можно немного отложить:
Ленивая прокрутка:
Для сайта (страниц) где много изображений, лучше подключить ленивую прокрутку. Для этого скачайте lazyload.js и залейте на свой хостинг, я сделал отдельную папку skript там и хранятся все подобные файлы, далее копируем "ленивый" код:
и чтобы страницы загружались быстрее, вставляем скопированное ближе к закрывающемуся тегу </body>. Не забываем исправить адрес .js файла (название папки) на свой src="/skript/lazyload.js">.
В .css нужно добавить стили, для картинок участвующих в подгруздке при прокрутке страницы:
img[src] {opacity:1 !important}
перед каждым src="" тега jmg, того изображения, что должно подгружаться дописать data-
<img data-src="index.files/13.jpg" title="" width="" height="" alt="/>
Скрипт, желательно устанавливать там, где это действительно необходимо, на страницы где много картинок, так как, ненуждающиеся в ленивой прокрутке страницы, скрипт при загрузке немного, но будет тормозить и его не отложить. В общем-то, экспериментируйте, как будет быстрее:).
Как настроить кэш отдельным файлам
С одним .htaccess файлом на сайте, у меня не получалось решить проблему кэширование в браузере пользователя. Проверяя сайт через Google сервис PageSpeed Insights, всегда выпадала ошибка: "Используйте кэш браузера для следующих ресурсов:", там были и картинки и .js файлы. Обычным способом, то-есть прописать в одном .htaccess <ifModule mod_expires.c> и подключить кэширование не получалось. Обратился в техподдержку хостинга Спринтхост, с вопросом: почему кэшируются не все файлы, получил достаточно подробный ответ:
На площадке работает двухуровневая система веб-серверов: все запросы принимает многопотоковый сервер nginx, часть из них обрабатывает и передает клиенту самостоятельно — это запросы к статическим данным, таким как картинки, файлы стилей, JS-скрипты, а часть — передает для дальнейшей обработки веб-сервером Apache, который нацелен на обработку динамических файлов, например выполнение PHP-скриптов.
Правила, которые указаны вами в файле .htaccess, работают корректно, но они не применяются для статических файлов, таких как CSS, JPEG и т.д., поскольку они не обрабатываются веб-сервером Apache.
Чтобы применить данные правила, вы можете изменить права на директорию, в которой хранятся статические файлы, на 750. Такие права доступа не позволят nginx обрабатывать статические файлы самостоятельно, все запросы будет полностью обрабатывать Apache. Однако такая настройка повлечет за собой повышение уровня потребления ресурсов. Также права можно изменить и для отдельных файлов, а не для всей директории целиком.
Аналогичный способ — создание файла .htaccess в директории, где размещены статические файлы, для которых требуется изменение времени хранения кеша.
Выбрал аналогичный способ, добавил в папку картинки и где скрипты хранятся, в каждую свой .htaccess, оставляя ExpiresByType для нужной директории:
php_value default_charset "windows-1251"
# кэш браузера
<ifModule mod_expires.c>
ExpiresActive On
#кэшировать флэш и изображения на одну неделю
ExpiresByType image/x-icon "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType application/x-shockwave-flash "access plus 7 days"
#кэшировать css, javascript и текстовые файлы на одну неделю
ExpiresByType text/css "access plus 7 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"
#кэшировать html и htm файлы на один день
ExpiresByType text/html "access plus 1 day"
#кэшировать xml файлы на десять минут
ExpiresByType application/xhtml+xml "access plus 10 minutes"
</ifModule>
Проблема с кэш браузера для файлов JPEG, PNG, GIF, JS, хранившихся на сервере сайта, была полностью решена. Сервисы проверки на скорость это подтвердили и перестали что либо предъявлять, скорость загрузки сайта немного выросла.
Как отложить загрузку Google AdSense рекламы
Для Google AdSense, если у вас имеется такая реклама на сайте, можно сделать ленивую загрузку и отложить показ рекламы, пока пользователь не тронул страницу. Очень прилично получается сэкономить и поднять скорость загрузки страниц, но не всех такой вариант может устроить, в частности у кого реклама первой при загрузке странице попадает в поле зрения пользователя, впрочем...
Скопируйте код:
и установите его перед тегом </body> вместо уже имеющегося у вас на сайте, он должен быть примерно такого вида:
