The goals for Drupal migration and website redesign projects vary.  Often, the goal is to achieve one or several measurable results related to the website’s users: customers, members, or constituents depending on the industry.  Included in most website redesigns is a goal to move toward an interactive web design with animations and parallax effects as a way to immerse visitors in a modern experience. Rarely is website performance and speed a paramount consideration – it is at New Target because we understand the impact page load speed has on users and the impact it has on Google’s search ranking. 

Recently we used Material Design as a guiding design pattern in a website redesign project to great effect and positive results. Material Design allowed us to simultaneously get back to basics while also incorporating the most appealing elements that web design, in 2017, has to offer. Material Design takes elements like typography, space, and color and uses them to guide users in a subtle way – often times graphics, animations, and movement play a key part by mimicking reactions in the physical, or material world. During our design prototyping and development phases, we understood that much of the design needed to be optimized to produce a good page load speed and lead to a positive user experience. 

During website prototyping we had to face a few facts. The good news: The website is beautiful. The bad news: It was loading slowly. The mission: To enlist our web team for a search and rescue mission to increase page speed. After a bit of investigating, we found a number of issues that were causing the page speed decreases. By initiating the tasks below, we doubled the page speed to an excellent score of 85 in Google PageSpeed which yielded a host of benefits, including the eventual increase of the website’s organic search rankings significantly. 

So, how did we do it?  Here are just a few of the modifications we made during development:

·       We replaced CAPTCHA with another spam protection, Honeypot. CAPTCHA disables page caching because the code has to be regenerated for each visitor.

·       We compressed the images by using Image API Optimizer which compresses the styled images automatically in Drupal-based websites.   

·       Because the website was loading a lot of resources, it was slowing down the page loading time. We aggregated the CSS and JavaScript to one file. Our team recommends combing big chunks of one file and then loading that file into your browser. The browser will then decompress and render. In this case, we used Advanced JS/CSS aggregation in Drupal.

·       We compressed the resource files as a gzip. Gzip compresses web pages and style sheets before sending them to the browser.

·       We compressed images and rendered JavaScript which brought us up to an impressive PageSpeed score of 87 on desktop and 70 on mobile – check around using the link above, this is fast.    

The moral of the story: Regardless of if you are going through a website redesign, make use of the tips and tricks above when aiming for a high (>85) score in Google PageSpeed. By making a few adjustments, it is possible to have a stunning web design, enhanced functionality, animations, and an impressive PageSpeed score as well that will get that stunning site noticed.

A global team of digerati with offices in Washington, D.C. and Southern California, we provide digital strategy, digital marketing, web design, and creative for brands you know and nonprofits you love.

Stay up to date with our insights by following us on Twitter, Facebook, and LinkedIn.