Код сайта выражается в совокупности: HTML, CSS стилей и скриптов, например, JavaScript. в Интернете такую совокупность веб-серверы посылают браузерам, по запросам пользователей. Запрос пользователь пишет в строке браузера о том, что его интересует, в той или иной теме. Блогеры должны строить свои сайты так, чтобы в них были ответы на эти запросы. Потом они становятся ключевыми словами, по которым блогеры пишут статьи.
Код сайта – что в себя включает
В настоящее время так устроен Интернет. Хотя в недалеком будущем будут свободные темы, как в книгах. В таком направлении Интернет уже делает шаги.
Код страницы включает в себя: html-разметку; таблицу стилей или ссылку на сторонний файл CSS; программы, написанные на JavaScript или ссылки на файлы с кодом; изображения. Эти разделы обрабатывает браузер. Но для сервера это только текст, который он отправляет в ответ на запрос.
Зачем это изучать блогеру. Например, иногда придется поправить на сайте коды, вставить социальные кнопки . Сервис Гугл предлагает оптимизировать неиспользуемые CSS, для ускорения загрузки сайта. Приходится самостоятельно вставить коды счетчиков, а так же рекламы. Исправить ошибки и замечания ПС Яндекса и Гугла. Знать нужно не на уровне программиста, но хотя бы элементарно, когда мы ведем свой сайт. Исходный код мы можем посмотреть несколькими способами.
Код сайта — как посмотреть
Увидеть всю разметку кода можно, нажав на странице правую кнопку мыши /ПКМ/. Выбирать опцию «Просмотр кода страницы», после чего получим страницу с кодом сайта. Его можно анализировать, чтобы было удобнее выделим его и скопируем, например, в блокнот -notepad++, где сохраним. Еще его можно открыть, нажав: ctrl+a, ctrl+c, ctrl+v, или ctrl+u.
Но можно получить интерактивный код с помощью инструментов разработчика. Для этого нажмем 3 полоски или 3 точки вверху, справа браузера, это значок меню. В разделе дополнительных инструментов выбираем «Инструменты разработчика». Откроется окно, в котором отображается активное состояние кода.
Например, вкладка «Source» показывает содержимое некоторых файлов: скрипты, шрифты, изображения. Их можно сохранить. Для этого нажимаем правую кнопку мыши (ПКМ) и выбираем «Save». Сохраним на своем компьютере, который откроется, например, в папке документы или в загрузках.
Вкладки: Console и Coverage
Они станут видны внизу страницы. Во вкладке Coverage видим много файлов CSS. Рядом с файлами в виде цветного графика расположены полосы красно-голубого цвета. Голубой цвет показывает, насколько полно скрипт используется на сайте. Нажатие на любую полосу вызовет, чуть выше, показ кода, соответствующего файла.
Все скрипты можно скачать, они с расширением json. Открыла их в блокноте notepad++. Или можно скачать другие программы из интернета, для прочтения таких файлов.
В браузере красным цветом обозначается не используемый фрагмент скрипта. Например, совсем у себя отключила иконки daschboard. Во вкладке «Coverage» теперь они обозначены только красной полосой, то есть не используются совсем, но в коде они остаются сохранными.
Файлы в блокноте
Они скачаны сюда, но отображаются уже без подсветки голубой и красной, зато их можно просмотреть. Хотя сайты веду уже 7 лет, но за это время ни разу эти файлы не просматривала. В результате просмотр произвел на меня большое впечатление, громадными размерами. Файлы CSS расположены на хостинге, в папке WP- includes. Все вместе они представляют собой огромный код, состоящий из 12426 строчек.
Не зря сервис Pagespeed insights постоянно предлагает удалить неиспользуемые файлы CSS. Но этого пока делать не умею. Однако кое-что сделать для лучшей загрузки сайтов можно. Например, в темах сайта, но в ущерб дизайну. Пожалуй, пойду на такие жертвы в пользу улучшения скорости загрузки сайтов.
Например, в последнем обновлении WordPress отключил плагин » jquery-migrate.min.js». Блогер может включить его принудительно, но только временно, Word Press об этом нас предупредил. Со временем этот плагин все равно из приложения исчезнет.
У меня на сайте это можно сделать в плагине «Clearfy pro». Однако после отключения не стал работать красивый слайдер – карусель и еще перестал функционировать поиск сайта. Автор темы мне эти настройки вернул, после чего карусель и поиск опять работают.
Но сейчас посмотрела в блокноте, как много места занимает плагин » jquery-migrate.min.js». К тому же еще дополнительные картинки в карусели, тоже имеют вес не малый. Так что теперь мои сайты будут без плагина и каруселей. Вместо поиска на сайте теперь использую только Яндекс поиск .
Еще вкладки
Во вкладке «Security» -«безопасность» доступна проверка сертификата сайта. «Audits» поможет провести проверку выложенного на хостинг ресурса. Если расположение панели справа неудобно, можно нажать три точки и поменять его, выбрав желаемый пункт.
Во вкладке «Console» — «приставка» заметим ссылку chrome-extension: //jlipcaflaocihnmlhnhcfombgmmfglho/lib/backbone-min.map на огромный файл. У меня он отмечен, как ошибка 404, но файл открылся, в браузере. Пока не знаю, что с ним делать.
Зайти в код можно еще иначе. Откроем консоль своего сайта, нажмем на клавиатуре F12 — увидим код. Далее меню – 3 полоски, в выпадающем меню выберем опцию «Moore Tools»- «инструменты меню», найдем «Coverage» — «покрытие», в дополнительном меню. Кстати здесь очень много пунктов, с которыми стоит блогеру познакомиться, постепенно.