- This topic has 24 replies, 2 voices, and was last updated 3 years, 11 months ago by
.
hello,
going through google page insight, it gave me 2 problems, i don’t know how to solve
<div class=”lh-audit__header lh-expandable-details__summary”>
<div class=”lh-load-opportunity__cols”>
<div class=”lh-load-opportunity__col lh-load-opportunity__col–one”>
<div class=”lh-audit__title”>Preload key requests</div>
</div>
<div class=”lh-load-opportunity__col lh-load-opportunity__col–two”>
<div class=”lh-load-opportunity__sparkline” title=”Potential savings of 1,910 ms”>
<div class=”lh-sparkline”>
<div class=”lh-sparkline__bar”></div>
</div>
</div>
<div class=”lh-chevron-container” title=”See resources”>Consider using<link rel=preload>to prioritize fetching resources that are currently requested later in page load. Learn more.</div>
</div>
</div>
</div>
<div id=”details-content”>
<div class=”lh-audit__stackpacks”></div>
<table class=”lh-table lh-details”>
<thead>
<tr>
<th class=”lh-table-column–url”>
<div class=”lh-text”>URL</div></th>
<th class=”lh-table-column–timespanMs”>
<div class=”lh-text”>Potential Savings</div></th>
</tr>
</thead>
<tbody>
<tr>
<td class=”lh-table-column–url”>
<div class=”lh-text__url” title=”https://www.saveatrain.com/blog/wp-content/themes/jevelin/fonts/Simple-Line-Icons.woff2?ver=2.4.0″ data-url=”https://www.saveatrain.com/blog/wp-content/themes/jevelin/fonts/Simple-Line-Icons.woff2?ver=2.4.0″>…fonts/Simple-Line-Icons.woff2?ver=2.4.0
<div class=”lh-text lh-text__url-host”>(www.saveatrain.com)</div>
</div></td>
<td class=”lh-table-column–timespanMs”>
<div class=”lh-text”>1,910 ms</div></td>
</tr>
<tr>
<td class=”lh-table-column–url”>
<div class=”lh-text__url” title=”https://www.saveatrain.com/blog/wp-content/themes/jevelin/fonts/themify.woff” data-url=”https://www.saveatrain.com/blog/wp-content/themes/jevelin/fonts/themify.woff”>…fonts/themify.woff
<div class=”lh-text lh-text__url-host”>(www.saveatrain.com)</div>
</div></td>
<td class=”lh-table-column–timespanMs”>
<div class=”lh-text”>1,590 ms</div></td>
</tr>
</tbody>
</table>
</div>it could be related to these fonts not having cache definitions in the code, as you can see in this link of page insights:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.saveatrain.com%2Fblog%2Flondon-paris-train%2F&tab=desktop
<table class=”lh-table lh-details”>
<thead>
<tr>
<th class=”lh-table-column–url”>
<div class=”lh-text”>URL</div></th>
<th class=”lh-table-column–ms”>
<div class=”lh-text”>Cache TTL</div></th>
<th class=”lh-table-column–bytes”>
<div class=”lh-text”>Size</div></th>
</tr>
</thead>
<tbody>
<tr>
<td class=”lh-table-column–url”>
<div class=”lh-text__url” title=”https://www.saveatrain.com/blog/wp-content/themes/jevelin/fonts/themify.woff” data-url=”https://www.saveatrain.com/blog/wp-content/themes/jevelin/fonts/themify.woff”>…fonts/themify.woff
<div class=”lh-text lh-text__url-host”>(www.saveatrain.com)</div>
</div></td>
<td class=”lh-table-column–ms”>
<div class=”lh-text”>None</div></td>
<td class=”lh-table-column–bytes”>
<div class=”lh-text”>55 KB</div></td>
</tr>
<tr>
<td class=”lh-table-column–url”>
<div class=”lh-text__url” title=”https://www.saveatrain.com/blog/wp-content/themes/jevelin/fonts/Simple-Line-Icons.woff2?ver=2.4.0″ data-url=”https://www.saveatrain.com/blog/wp-content/themes/jevelin/fonts/Simple-Line-Icons.woff2?ver=2.4.0″>…fonts/Simple-Line-Icons.woff2?ver=2.4.0
<div class=”lh-text lh-text__url-host”>(www.saveatrain.com)</div>
</div></td>
<td class=”lh-table-column–ms”>
<div class=”lh-text”>None</div></td>
<td class=”lh-table-column–bytes”>
<div class=”lh-text”>30 KB</div></td>
</tr>
</tbody>
</table>Hi @SaveATrain,
I hope you are well today and thank you for your question.
It seems you have not pasted it correctly here, therefore, I am unable to read it.
Could you please share with me the screenshot of it?
Best regards,
Shufflehound teamtry to go to this link:
and search for “ensure text remains visible”, for some reason their is a issue with the fonts loading, you can also try it on your own jevelin page
I did it and saw these are all icon fonts as shown in the attached screenshot, therefore, there isn’t any alternative way to display it until the font fil gets loaded.
can you mark me on http://www.saveatrain.com/blog/ what are these icons that you refer to please?
Those are some of the icons as shown in the attached screenshots.
in what directory these files sitting?
It is in the theme fonts directory as below.
/wp-content/themes/jevelin/fonts/
secondly so i can try to change it the links, what file shall i edit?
I am not sure exactly what you are trying to achieve here so could you please describe it?
i am trying to edit, so these fonts will be served from the cdn and not from the local machine
To achieve this, you have to develop custom code in the child theme of the Jevelin theme.
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
i made a research that you can try on your end, to get rid of this error on google page insights as you see in the following link,
<p style=”direction: ltr;”>if you would change in your theme, where you call the simple-icons or the themify, under {font-face …………}</p>
{font-face …………;font-display:swap}
then the error doesn’t show on google page insights
I didn’t understand what I have to change when calling the simple-icons or the themify so could you please describe it a bit more in detail?
when you call in the plugin to simple-icons.ttf or eot you use css code that starts with
{font-face
in this clause, if you add this argument: font-display:swap before the }
then that would solve the google page insight message error issue:
https://css-tricks.com/almanac/properties/f/font-display/
developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
1. how can i apply this font-display:swap, i want to see how google page insights reacts if we have this
2. why don’t use use font who has a fallback?
1. how can i apply this font-display:swap, i want to see how google page insights reacts if we have this
You can add it as follows.
@font-face { font-family: 'simple-line-icons'; font-display: swap; }2. why don’t use use font who has a fallback?
The icon fonts don’t have any fallback.
i added this in the custom css, how can i see if its implemented in:
You can check whether it is displaying in your website page source but before checking that please clear or temporarily deactivate the WP-Optimize cache that you are using on your website.
As said above, what we are doing is useless as in this case as these are custom icon fonts and they don’t have any fallback font.
then why not change to fonts that are recognized to increase page insights scoring, this is super important nowadays
secondly, i cleared the wp-optimize cache
