Сейчас везде ключевое слово против РФ - санкции. Большинство из них не несет нам россиянам никаких угроз, хотя и напрягают. В этой публикации я хочу рассмотреть апокалипсический сценарий - изоляция Рунета. И расскажу как подготовиться к этому для вашего сайта ("на всякий случай").
В данной статье я в большей степени раскажу о устранении зависимости от Google, но так же и от многих внешних загрузок на сайте. Это кстати и повысит скорость загрузки сайта, так что в любом случае будет полезно.
Конечно, скорее всего, полностью заблокировать международный трафик не получится - будут придуманы новые технические и программные средства обхода запрещений. На подходе система глобального спутникового интернета, которая будет покрывать всю планету.
Но подготовиться к некрасивым действиям каких то крупных американских компаний можно уже сейчас. "Подстелить соломку" для сайта...
Итак, пофантазируем, в соотношении с вашим сайтом:
В одно доброе российское утро вместо привычной заставки будет:
Что будет с сайтом?
Вроде бы и ничего страшного, но есть важные вещи.
1. Если ваш сайт использует Google AdSense и Google AdWords - рекламные сервисы гугл, то это пропадет.
Используйте - Яндекс директ и Яндекс маркет.
2. Пропадет статистика Google Analytics.
Используйте Яндекс Метрику. Она не чем не хуже и во многом даже лучше и понятней.
3. Пропадут инструменты и отчеты Search Console.
Используйте Яндекс вебмастер. Он во много раз информативней гугл консоли и дает больше информации и сервисов.
4. И пожалуй самое важное для сайта - большинство их использует Google Fonts https://fonts.google.com, которые подкачиваются при их открытии с гугл сервера.
Иначе, ваш сайт потеряет уникальный дизайн, так как эти шрифты не загрузяться и произойдет их замена на стандартные шрифты браузера. На этом я и хочу подробно остановится.
Вначале определите, какие шрифты загружает ваш сайт. Для этого откройте его в режиме просмотра кода и посмотрите между тегами <head> и </head> есть ли тег link href с fonts.googleapis.com.
Пример:
<link href="https://fonts.googleapis.com/css?family=Roboto+Sans:300,300i,400,400i,600,600i,700,700i&display=swap&subset=cyrillic-ext" rel="stylesheet" type="text/css">Как видим на этом примере используется Google Fonts - Roboto.
Чтобы сделать загрузку шрифта не с Google, а локально с вашего же сайта, можно проделать следующие действуия:
- Набрать в поиске https://fonts.google.com этот шрифт и загрузить его в архиве.
Или в фильтре сверху выбираем:
категорию — самая популярная Sans Serif;
нужный язык (Cyrillik -русские / кириллические);
сортируем (при необходимости).
Что мы видим в архиве, довольно скучно и годится для современного сайта мало, хотя можно и конвертировать:
Идем на наш российский сайт: https://webfonts.pro и так же в поиске набираем нужный вам шрифт и загружаем архив. Тут уже почти все что нужно есть, но к сожалению не все:
А теперь, подробно разберем, что нужно современному сайту. Это зависит от браузеров, который использует пользователь.
Уже понятно, что формат шрифтов svg и eot мы использовать не будем. Это не актуально для современных браузеров, как стационарного компьютера, так и мобильных гаджетов.
К вопросу - "Нужно ли подключать все форматы шрифтов?". Ответ - нет!
Остаются три расширения шрифтов - TTF, WOFF и WOFF2.
Мы же хотит кросс браузерности? Правильно!
Чтобы закончить подготовку шрифтов используемых на вашем сайте (пусть и на всякий пожарный случай) вам не хватает WOFF2 формата.
Его легко можно получить на сервисах конветации из WOFF:
https://www.onlinewebfonts.com/woff2-converter
https://cloudconvert.com/woff-to-woff2
https://everythingfonts.com/woff-to-woff2
https://anyconv.com/ru/konverter-woff-v-woff2
Конечно, весь нужный вам пакет шрифтов надо подготовить заранее. На всякий случай, на всякий случай...
Немного про современные CSS3 - шрифты, используемые современными браузерами. Немного теории:
В CSS3 поддержка сложных шрифтов обеспечивается посредством возможности @font-face, которая применяется следующим образом:
-
Требуемый шрифт (или, более вероятно, несколько версий шрифта для поддержки разных браузеров) загружается на сайт.
-
Каждый шрифт регистрируется в таблице стилей с помощью команды @font-face.
-
Зарегистрированный шрифт используется в правилах стиля указанием его названия, точно так же, как и обычные веб-шрифты.
-
Когда браузер обнаруживает таблицу стилей, в которой используется специальный веб-шрифт, он загружает этот шрифт с сервера в свой кэш для временного хранения страниц и изображений. После этого браузер использует этот шрифт только для данной страницы или сайта. Если этот же шрифт указывается в другой странице, он должен быть зарегистрирован на этой странице и загружен на ее сервер, откуда он может быть загружен браузером в свой кэш.
TTF (шрифт True Type)
Это основные типы шрифтов, созданные Microsoft и Apple, и поэтому они предустановлены как на компьютерах Windows, так и на iOS. Он состоит из одного двоичного файла, поэтому им легко управлять. Это наиболее часто используемые форматы для файлов шрифтов, и все основные браузеры поддерживают его, но единственная проблема с этим форматом заключается в том, что шрифты TTF не сжимаются, а размер файла довольно велик по сравнению с другими форматами.
WOFF (формат открытого веб-шрифта)
WOFF — это в основном OTF или TTF с метаданными и сжатием, поддерживаемыми всеми основными браузерами. Он был создан, чтобы жить в сети. Это результат сотрудничества Mozilla Foundation, Microsoft и Opera Software. Поскольку шрифты сжаты, они загружаются быстрее. Метаданные позволяют включать данные о лицензии в файл шрифта для решения проблем с авторским правом. Это рекомендация консорциума World Wide Web, которая, несомненно, является будущим форматов шрифтов.
WOFF2
Очевидно, это следующая версия WOFF с улучшенным сжатием. WOFF2 поддерживает почти все популярные веб-браузеры и широко используется веб-разработчиками. Кроме того, он поддерживает спецификации OTF и TTF, а также коллекции шрифтов и вариативные шрифты.
И так пакет шрифтов у вас готов. Как же его подключить локально к сайту.
Как подключить его к сайту.
Вначале уберите по возможности вызов загрузки шрифта с сервера гугл из шаблона, сотрите строку:
<link href="https://fonts.googleapis.com/css?family=Roboto+Sans:300,300i,400,400i,600,600i,700,700i&display=swap&subset=cyrillic-ext" rel="stylesheet" type="text/css">
Он может у вас и загружаться из таблицы стилей - css.
Там прописано так, как правило в самом верху:
@import 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,600,600i,700,700i';
Далее загружаете подготовленный ранее пакет шрифтов в свой шаблон. Чаще всего это папка шаблона fonts/
Теперь идем в таблицу стилей CSS вашего сайта и в самом верху пишем следующее правило для подключения шрифтов:
@font-face {font-family: Roboto; src: url(../fonts/Roboto.ttf); src: url(../fonts/Roboto.woff; src: url(../fonts/Roboto.woff2;}
Путь относительный и выглядит имено так url(../fonts/Roboto.ttf);
@font-face — это сообщение браузеру, что будут подключаться сторонние шрифты на сайте.
Обычно достаточно такого:
@font-face {
font-family: 'Web font';
src: url('../fonts/webfont.woff2') format('woff2'),
url('../fonts/webfont.ttf') format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */
url('../fonts/webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Теперь, чтобы применить стиль шрифта ко всему тексту (параграфы, заголовки, ссылки, списки и т.д) мы сделаем одну маленькую хитрость. Ведь вы все знаете, что в CSS используется правило наследование, т.е родительский тег распространяет свое влияние на все дочерние элементы. Этим мы и воспользуемся и я объясню почему.
Во-первых, мы пропишем в css правило только один раз и оно будет распространяться автоматически на все другие элементы и классы от родителя к «дочкам».
Во-вторых, мы значительно упрощаем нашу таблицу, делая ее легкой, а если ваш сайт загружается быстро, то это безусловный плюс в карму и вы будете выше в поиске при одинаково полезном контенте и правильной оптимизации.
Теперь как нам это сделать? Все просто. Мы знаем, что самый главный тег в веб структуре это <html> и <body> .
Вот к ним то мы и применим наше правило следующим образом:
html, body {font-family:'Roboto', sans-serif;}
Мы просто задали семейство шрифтов вот такой строчкой font-family:'Roboto', sans-serif;
Вот и все. Ваш google шрифт будет загружаться локально с вашего сайта и никакие отключения этого сервиса вам больше не страшны. Дизайн сайта останется прежним.
Недавно увидел недорогое расширение для Joomla 3 и 4 линеек, котрое позволяет вам автоматически загружать шрифты Google на свой сервер и использовать его вместо удаленного. Поддерживает все фреймворки. Easy Local Google Fonts (я пока его не пробовал, но по описанию, то что нужно).
5. Давно известно, чем меньше внешних загрузок чего либо на сайте, тем быстрее он загружается и ничего не зависнет, даже если нет асинхронной загрузки (шрифты, скрипты, картинки, сервисы и т.д.).
И так рассматриваемая апокалипсическая ситуация прежняя - санкции гугл, других многих американских сервисов и почти изолированный Рунет.
Теперь настало время проверить, не загружаются ли у вас от "буржуинов" какие то скрипты. Как правило это js.
Их так же видно в просмотре сайта в режиме кода, смотреть между тегами <head> и </head> тег script и выглядит это обычно так:
<script src="https://kit.fontawesome.com/b36cb93fac.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
Как подготовится. Введите адрес скрипта в строку своего браузера, откроется код, скопируйте его в бесплатную программу Notepad++ и сохраните в том же формате, например jquery-2.1.1.min.js.
У вас будет архив загружаемых внешних скриптов. После чего загрузить их в шаблон, обычно это папка js, но можно и создать ее, если нет.
После чего в главном файле вашего шаблона переопределить загрузку кажого скрипта локально, стерев код внешних вызовов.
Пример:
$script = array('jquery.isotope.min.js','jquery.carouFredSel-6.1.0-packed.js','template.js');
Это должен делать специалист! Так как в каждом шаблоне это реализуется по разному.
Главное, чтобы у вас был архив этих внешних скриптов.
Что то можно оставить и внешним, но уже с загрузкой с яндекса:
https://yandex.ru/dev/jslibs/#jquery
6. Проанализировать другие внешние сервисы. Что возможно, замените на аналогичные российские уже сейчас.
7. Я уже не раз писал, что домены для наших сайтов лучше иметь в зонах ru и рф (последний, лучше вторым с 301 редиректом на ru).
Если это так, то проблем не будет.
8. Почта gmail. Многие пользуются. Заведите альтернативу на яндекс почте или mail.ru. Если вы пользуетесь сервисами яндекс, то она уже у вас есть. Смените на сайте мейлы на нее.
9. На сайте представлены документы с подгрузкой с Google Документы https://www.google.ru/intl/ru/docs/about/. Это может быть критично.
Имейте их архив.
Загружайте документы в pdf формате локально.
Пользуйтесь Яндекс Документы. Это совершенно бесплатно: https://docs.yandex.ru/
10. На сайте представлены видеоролики с youtube, который как известно так же пренадлежит Google.
Имейте архив видеороиков.
Пользуйтесь нашими сервисами, типа https://rutube.ru/info/about_company/
11. Достаточно большая проблема - спам. Большинство используют сервис Google Recaptcha. Надо заранее подумать о локальных капчах и других способах защиты от спама. Это вполне решаемо и без гугл рекапчи.
12. Ну и последнее, серьезная проблема, но уже не относящаяся к сайтам - это смартфоны на андроид. Это конечно серьезно, но думаю то же решаемо, я в этом не специалист.
Я не призываю сразу менять что то, я и сам не изменил вызов шрифтов с гугл фонтс. Но архивы у меня есть, чего и вам советую.
