Case Studies Web Development

How We Brought Into the Green Zone on PageSpeed Insights

In this post, we talk about one of our frontend development projects. You will learn about the challenges we faced, the solutions we offered, and the results we achieved.


There are three characteristics of a website that probably weigh more on the final results than anything else. These are visual appeal, performance, and search engine visibility. 

If your target audience doesn’t find your website among the first results on a SERP, you have little chance of succeeding. Similarly, when a visitor opens your home page and sees that it is dull, slow, poorly designed, and full of bugs, they will most likely close it then and there. 

The best way to make sure a website is both attractive, well performant, and search engine friendly is to hire professional web developers. That’s what one of our clients did by requesting our front-end experts to optimize his website for mobile first and then restyle it for a new shine. 

Today, we will discuss the project more in detail. 

The Client was started in 2000 by a group of web developers passionate about American football in order to build out an online football pool system. In 2008, the website’s functionality was enhanced to let multiple managers set up and run their own pools. 

The website allows admins to create pools, invite their friends to them, send e-blasts with game-related information and statistics, track various data such as Pool Admin Actions on Players, and perform other essential administrative tasks. 

The Challenge: Making Mobile Friendly 

Our collaboration with spans almost five years when they contacted us back in 2017, requesting our assistance with making the site mobile-friendly in order to pass the Google mobile-friendly test

The website uses custom PHP and is not based on any web authoring tools such as WordPress. The USAFootballPools team took care of the website’s back-end. Our task was to optimize its front-end. 

The Solution

To achieve the goal, we did the following: 

  1. Ran a Google mobile-friendly test and registered all the errors produced. Then we fixed those errors in the HTML, CSS, and JavaScript code. 
  2. Made around 20 pages responsive by tweaking their source code, including the Home Page, Login Page, Logout Page, Terms of Service Page, and many more. 

As a result, passed the Google mobile-friendly test easily, which greatly improved its chances to rank high on SERPs.

The Challenge: Restyling 

In 2022, the client returned. This time around, he wanted us to restyle the website in accordance with his new designs and make some of the pages responsive just like we did before. The number of pages we needed to restyle was way larger than the first project – around 100. 

The Solution 

Again, the back-end was handled by the client himself while we worked exclusively on the front end. The client’s designer created the designs of the main pages and our developers styled the screens by mimicking those designs. 

We wrote new HTML/CSS/JS code without any frameworks or libraries such as Twitter Bootstrap. That allowed us to create code that was clean, semantically correct, and well optimized for search engines. 

Here are some screenshots that show how we transformed the old website into what it is today. 

How It Works – Old Version 
How It Works – New Version 
Home Page – Old Version
Home Page – New Version

We also remembered how important mobile-friendliness was for the client and applied the best practices to ensure that the website rendered perfectly across devices, screen sizes, and resolutions.

As the screenshots below show, our developers knocked it out of the ballpark. The website’s performance scores are in the green zone for both the desktop and mobile versions.

Mobile version 
Desktop version 


The scores are calculated based on a variety of factors and can change over time. The values in the screenshots above show the website’s performance at the time of this writing. 

Another issue we had to deal with was oversized tables that required lots of scrolling on both mobile and desktop resolutions. We also wanted to avoid font sizes that are too small and keep the content both readable and compact.

We were eager to solve the issue by coming up with multiple options: a responsive table, a scalable table, and a horizontal scroll. The latter solution did the trick and was accepted by website’s audience.  

The client was pressed for time, so we had two developers working in parallel, which allowed us to deliver in batches and process feedback as we kept working on new pages.

Email Templates 

We also created two email templates based on the designs provided by the client. Here’s one of those. 

The Outcome is now a mobile-friendly website with a modern look and feel thanks to the effort of our frontend developers. The fact that the client keeps coming back with more projects for us is solid proof of our professionalism and reliability. 

Have a frontend project or task for us too?  We’re just a click away. 

Alex Kopp

Alex Kopp is a Business Development Manager at P2H with the main mission to help organizations overcome web development hurdles. One of the ways he does this is by writing engaging and value-packed posts. Follow him on LinkedIn