Несоответствие времени загрузки страницы на тестах GTmetrix
Я столкнулся с большим расхождением во времени загрузки в тестах моего веб-сайта, иногда он говорит, что для полной загрузки требуется 5 секунд, а если я повторно тестирую, он говорит, что загрузка занимает 25 секунд. Во время тестирования я не вносил никаких изменений в сайт.
Также были получены разные результаты в других инструментах (я знаю, что они могут отличаться от одних инструментов к другим (один проверяет время полной загрузки, другие проверяют время начальной загрузки и т. д.), Но я оставлю ссылки ниже на случай, если это поможет):
По сути, поскольку я не являюсь экспертом по анализу этих данных и выводов из gtmetrx, я хочу знать, почему это несоответствие происходит на GTmetrix, поскольку я не вношу изменения в веб-сайты или в параметры тестов. Иногда я также замечаю эту разницу во времени загрузки при перезагрузке веб-сайта в моем браузере. Что не так с моим сайтом? Есть ли какой-нибудь "поврежденный" файл или запрос, который я не вижу?
Я ценю любую помощь заранее спасибо
Ответы 1
Глядя на вкладку водопада в двух архивах GT Metrix, которыми вы поделились, первое большое отличие, которое я заметил, касается файла rt.application.scss.css - при медленной загрузке этот файл был waiting примерно на 6,5 секунд.
Shopify анализирует файлы .scss на обычные файлы .css, поэтому я подозреваю, что файл настроен неэффективно и Shopify кэширует результаты в течение некоторого времени. При быстрой загрузке Shopify будет обслуживать кешированный файл, при медленной загрузке Shopify потребуется перестроить файл, потому что срок его внутреннего кеша истек.
Если ваш файл rt.application.scss (или rt.application.scss.liquid) в папке с ресурсами огромен, вы можете попробовать сделать его более эффективным (примечание: файл в «Assets» не будет включать окончание .css. Если файл имеет окончание .liquid, это означает Shopify необходимо проанализировать жидкий код при построении файла, но .liquid не будет включен в окончательное имя файла).
Парсер Shopify должен применить любой жидкий код (если файл имеет окончание .liquid), а затем преобразовать из формата .scss в обычный код .css. Если вам удобно работать с одним или обоими этими синтаксисами, вы можете попробовать разобрать файл, чтобы посмотреть, поможет ли это.
Вы также можете просмотреть проанализированное содержимое визуализированного файла css (https://cdn.shopify.com/s/files/1/0076/6931/7690/t/10/assets/rt.application.scss.css?8094593948347511375) и сохранить содержимое этого файла в отдельный файл CSS, а затем использовать этот файл вместо динамического. Если это действительно основная причина, вы должны увидеть, что время тестирования вашей страницы стало более постоянным.
В более общем плане, глядя на результаты GT Metrix, вы можете использовать водопад для поиска любых полос загрузки, которые кажутся слишком длинными по сравнению с другими файлами. Файлы с длительным временем ожидания (обозначены фиолетовым цветом) указывают на то, что Shopify является источником задержки, вероятно, из-за файла, который довольно интенсивно загружает сервер. Длительное время приема будет означать, что файл сам по себе довольно большой и его можно сжать или уменьшить.
Надеюсь это поможет!
Большинство тем помещают свои основные файлы javascript и css в файл layouts/theme.liquid. Если ваша тема этого не сделала, вы можете попробовать выполнить поиск в файле theme.liquid по ключевому слову include, которое используется для ссылки на файлы в папке snippets вашей темы. Файл rt.application.scss.liquid будет находиться в вашей папке assets, и вы также захотите сделать свою скомпилированную замену в папке assets. Надеюсь, это поможет - дайте мне знать, если я могу еще что-нибудь сделать :)
Спасибо, Дэйв. Просто нашел и заменил. Я вижу, что мои результаты не так сильно расходятся на данный момент, но есть еще много работы, которую нужно сделать, чтобы полностью улучшить мой венсайт. Вы, кажется, являетесь экспертом в области шопификации, и я хотел бы поддерживать с вами связь и даже нанять вас, если это имеет для вас смысл. Я попытался просмотреть страницу вашего профиля, чтобы найти контакты, но безуспешно. Есть ли у нас, чтобы с вами связаться?
Привет, Дэйв! Большое спасибо! Это действительно многое прояснило. Я считаю, что для меня лучше всего использовать второй вариант - использовать файл .css вместо динамического .scss.liquid. Но я не знаю, где найти в файлах темы ссылку на: rt.application.scss.liquid, чтобы я мог удалить ее и поместить вместе с файлом css. Я просмотрел файл theme.liquid и другие, но ничего. Есть подсказка?