![Theme Switcher Image](https://stackcoder.in/images/theme-switcher.png?cb=stackcoder90070)
Good content takes time and effort to come up with.
Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.
Sometimes loading static files take long time to load. Especially CSS, Images, Webfont (Fonts). The best way to tackle them is to CACHE
them in users devices. If your new to CACHE
concepts and wondering how the hell should I do it. Then I have already written an article for it How To Cache Static Files With NGINX Server. Please have a look at it and I promise that you wont regret about about that :)
Even after caching fonts sometimes when you run an audit in Google Lighthouse, you will basically encounter Ensure text remains visible during Webfont load
. Which looks as the below image
This is because some browsers wait for the fonts to get loaded and don't show texts in the browser until they load the webfont. You might have imported the font-family
as below.
@font-face {
font-family: inter;
src: url('../fonts/Inter-Regular.otf');
}
One simple way to tell browsers to show the default one text and don't wait for fonts to load is add the following code.
font-display: swap;
Now your overall CSS
will look like the following
@font-face {
font-family: inter;
src: url('../fonts/Inter-Regular.otf');
font-display: swap;
}
Install Apache Web Server On Ubuntu 20.04 / Linux & Manage It
Google, Twitter, GitHub, Facebook & Many Other Social Generic Logins With PHP Laravel Socialite
Send SMS With Amazon SNS (Simple Notification Service) Using PHP
Comment And Like System Using Disqus
Create Zip File On The Fly With Streaming Download In PHP Laravel
Generate RSS Feeds in PHP Laravel
What Is HTTP? Different HTTP Methods And Status Codes Explained With Examples
Increase Session Timeout In Laravel
Add Google ADS In AMP (Accelerated Mobile Pages) Website
Lazy Load Images In Chrome With This Simple Trick
Dependency Dropdowns With Javascript And PHP
What Is Method Chaining In PHP?