The Federal Student Aid from the US Department of Education (https://studentaid.gov/) grants more than $112 billion every year to more than 10 million students each year. The sheer volume of website traffic alone is enough to test the limits of any server.
However, the FAFSA website has some fundamental issues that cause the page to load so slowly. This includes:
- Large files that take longer to load
- The inefficient scrolling performance caused by “Event Listeners”
- Inefficient caching
In this article, we will go in-depth into the issues plaguing the US Federal Student Aid website and how it can be rectified.
But first, a little bit about ourselves - we are CWVIQ.com, a free email notification service that lets anyone monitor the page loading speeds on their website. We send out email alerts anytime we notice that your site is running slow. This allows you to take corrective action before your site goes down entirely.
Now, going back to why FAFSA is so slow, we will have to look at their Lighthouse report. Lighthouse is an open source that measures the ‘Core Web Vitals’ (CWV) of your pages. Having excellent CWV scores is paramount to a good user experience.
The First Contentful Paint (FCP) of FAFSA is 6.4 seconds. This means it takes over 6 seconds for the browser to display the first bit of content from the website. The visitor is left staring at a blank screen for so long before they can see anything load.
This is the same with unused CSS files. If you clean up all the lines of code that are not even required, you can reduce loading time by around 1 second.
A better way to do this would be to splitting this code into smaller components and only call for the execution of the particular files that are needed for page load. This way, users do not have to wait for the entire JS and CSS files to be executed before loading the page.
If you dig into the source code of the FAFSA website, you will see a handful of “Event Listeners”
In the image above, you see that there is an Event Listener that states that when the page is completely loaded (referred to by the DOMContentLoaded event), then executes a few lines of code.
The problem is that this Event Listener forbids the page from letting users scroll until the time the page is completely loaded. This can be easily fixed with just a small line of code calling for a “passive listener”. Will take seconds to implement, but can have a dramatic effect on the user experience.
Every time you load a page, the browser sends a bunch of requests to download the various scripts and images. That’s a lot of resources and time. Fortunately, though, these scripts and images can be ‘cached’ – that is, the browser can create a local copy of these files on your own computer.
This way, the next time you load the page, the browser does not have to download these different files all over again. Instead, they can be pulled in from your local directory.
But here is the thing with FAFSA – the cache time for most of the images and scripts is set to just 1 hour. That means all files downloaded to your computer get erased just one hour later. Simply setting a larger cache time (say a week or month) can dramatically improve user experience and make page loading fast for most repeat visitors.
We have covered almost all the reasons that make the FAFSA website slow. Now, you tell me –
Do you run a website? Don’t be like FAFSA. Set a free alert for your site on CWVIQ.com so that you know when your pages are loading slowly.
Anand Srinivasan is the founder of CWVIQ, and has been in the internet media space for over 15 years. He has previously served as the AVP of Products and Head of Business at popular media portals. He has worked with several SaaS and enterprise businesses as an external consultant for their SEO marketing campaigns.