Inter Var variable font is SLOW

Resolved travisburch
(@travisburch)

4 years, 4 months ago
This variable font makes my site almost 3X slower, by itself.

If I delete all lines of code that pertain to ‘inter var’ — my site loads in under 1 second. With the variable font, however, it’s consistently 3.5 seconds.

This is insane. Nothing is worth that kind of speed difference — not for a serious site that actually anticipates serving users.

Please give us an option to “turn off” the variable font. It’s for the good of the people.

I LOVE Anders design. Let’s stop dragging it (and the user experience) through the mud. Let us turn off the variable font — at least until it’s accepted tech.
- This topic was modified 4 years, 4 months ago by travisburch.
- This topic was modified 4 years, 4 months ago by travisburch.
The page I need help with: [log in to see the link]

Viewing 15 replies - 16 through 30 (of 31 total)

← 1 2 3 →

Thread Starter travisburch
(@travisburch)

4 years, 4 months ago

@acosmin

Saw this on the webpage.
“There has been a critical error on your website. Learn more about debugging in WordPress.”

In the dashboard, it said ‘a problem has been detected with the Twenty Twenty theme” (or something to that affect). It said it had paused the theme (I believe. It’s almost like it had reverted away from the child theme in the process, too (it didn’t appear activated in recovery mode). If it happens again, I’ll copy the error code.

Okay, I’ll try it again. I’ve got the whole functions.php file copy+pasted, rather than importing the file from the parent file.

Thread Starter travisburch
(@travisburch)

4 years, 4 months ago

@kitchin Appreciate your input, here!
Thread Starter travisburch
(@travisburch)

4 years, 4 months ago
@acosmin so strange. Broke my site again (this time only used ‘Live Preview’, so it didn’t actually break the site.)

I thought I had it figured out, because I had altered the parent theme file, but I just deleted and reinstalled Twenty Twenty before this test.

Not sure what the issue is.

“There has been a critical error on your website. Please check your site admin email inbox for instructions.

Learn more about debugging in WordPress.”
- This reply was modified 4 years, 4 months ago by travisburch.
acosmin
(@acosmin)

4 years, 4 months ago

@kitchin that seems to work as well 🙂

acosmin
(@acosmin)

4 years, 4 months ago

@travisburch try kitchin’s solution, maybe include the selectors mentioned in my code…
acosmin
(@acosmin)

4 years, 4 months ago
@travisburch also, regarding your child theme’s functions.php file, you shouldn’t copy paste the parent’s code in it, that’s why it was causing that error.

In that file just add <?php at the very top.
- This reply was modified 4 years, 4 months ago by acosmin.
Thread Starter travisburch
(@travisburch)

4 years, 4 months ago
@acosmin

Okay, so I’ve got the parent’s code copy+pasted in the child functions.php file. I’ll undo that.

Then I’ve added the snippet mentioned at the very bottom.

So now add <?php at the very top of the file.

Giving this a try.
- This reply was modified 4 years, 4 months ago by travisburch.
- This reply was modified 4 years, 4 months ago by travisburch.
- This reply was modified 4 years, 4 months ago by travisburch.
Thread Starter travisburch
(@travisburch)

4 years, 4 months ago

@acosmin

So I’ll just import the other file using this: @import url("../twentytwenty/style.css");

and then add the snippet.
Thread Starter travisburch
(@travisburch)

4 years, 4 months ago
Forgot to add the @import line in the functions.php, but it still all worked.

Speed test results:

Load times are clocking faster 1.2s on pingdom from D.C.

I think I need to get more acclimated with various data points for speed, though.

The current speed feels perceptibly less “instant” than my other hack (which was: deleting all ‘inter var’ lines of code from the parent theme). However, the test results say we’re not far off from the other hack. Steve Teare’s article & suggested code

Many thanks to everyone involved! @acosmin @kitchin you two really are great.
- This reply was modified 4 years, 4 months ago by travisburch.
- This reply was modified 4 years, 4 months ago by travisburch.
- This reply was modified 4 years, 4 months ago by travisburch.
- This reply was modified 4 years, 4 months ago by travisburch.
- This reply was modified 4 years, 4 months ago by travisburch.
finebyme
(@finebyme)

4 years, 3 months ago

@travisburch how to do the hack? what code to remove in style.css file?
acosmin
(@acosmin)

4 years, 3 months ago
@finebyme go toCustomizer > Additional CSS and add the following css:
```
@supports ( font-variation-settings: normal ) {
	body,
	input,
	textarea,
	button,
	.button,
	.faux-button,
	.wp-block-button__link,
	.wp-block-file__button,
	.has-drop-cap:not(:focus)::first-letter,
	.entry-content .wp-block-archives,
	.entry-content .wp-block-categories,
	.entry-content .wp-block-cover-image,
	.entry-content .wp-block-latest-comments,
	.entry-content .wp-block-latest-posts,
	.entry-content .wp-block-pullquote,
	.entry-content .wp-block-quote.is-large,
	.entry-content .wp-block-quote.is-style-large,
	.entry-content cite,
	.entry-content figcaption,
	.entry-content .wp-caption-text {
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif !important;
	}
}
.widget_text p,
.widget_text ol,
.widget_text ul,
.widget_text dl,
.widget_text dt,
.widget-content .rssSummary,
.entry-content p,
.entry-content ol,
.entry-content ul,
.entry-content dl,
.entry-content dt {
        font-family: "Hoefler Text", Garamond, "Times New Roman", serif !important;
}
```
Publish/save and enjoy.
finebyme
(@finebyme)

4 years, 3 months ago

@acosmin thank you. it did work
Thread Starter travisburch
(@travisburch)

4 years, 3 months ago
@acosmin

It seems like both of these solutions lose the pull quote block styling (inter var must have been used there). This makes the pull quote block pretty ugly, with a big, bold Hoefler font, IMO.

I don’t think your solution has this problem, but my other solution (deleting the lines of code) altered font coloring when on dark backgrounds. The theme switches fonts to light colors over dark backgrounds automatically, and that function is lost when deleting the code as I did.

Fun stuff! Really appreciate your input.
- This reply was modified 4 years, 3 months ago by travisburch.
David Elstob
(@davwaiguy)

4 years, 1 month ago

@macmanx Come on, James, you know fine well the industry doesn’t recommend under 8 seconds!

If a page goes from 1 second to 6 seconds the probability of bounce increases by 106%.

Don’t believe me – take Google’s word for it. Think with Google – Page Speed

Moderator James Huff
(@macmanx)

Volunteer Moderator

4 years, 1 month ago

Google presents a nice ideal picture of what the web should be, I agree, but I encourage you to run some speed tests on industry-leading sites, like Facebook, Twitter, Amazon, Washington Post, etc. That will give you a nice real-world view.

If you’d like to drive yourself crazy getting your site under 1 second, you’re welcome to. Susty is a great theme to start with for that: https://sustywp.com/