Before testing and applying changes to your website, it is best to understand the difference between development and production. Development environment is where the developer lives. Production is where the site lives out on the internet. The development environment should have the tools to recreate production or at least something similar, but the code shouldn’t be minified and concatenated until it goes to the production server.
Development and Production where to optimize?
Think of a web application or website like a ship. Ships aren’t built out at sea, they are built at a dock and launched when completed. Same with making repairs to a ship or website. In emergencies some changes might be made out at sea or on the live website, but most of the time its better to make the changes at the dock or in a dev environment.
Some things shouldn’t be optimized during development, for example don’t minify your JS and CSS while doing development. Its better to run a build script before you push your application to development.
First things first let’s profile the website:
Google Speed Test:
Web Page Speed test:
With these profiles I now have a baseline and I can start looking for ways to improve the speed.
Looking into the scores, I noticed that the first byte time could use some improvement. The reason for the B is I am using materializecss and loading their icon library.I don’t need all of their icons and using the icomoon tool I converted the icons that i was using to base64 and loaded them through css (after a few tweaks i have removed the icons totally for now).
The next thing loading the custom fonts. Improving this will help to reduce render-blocking CSS in above-the-fold content.
After that round of research on loading custom fonts. I decided not to make any changes simply because the pros don’t outweigh the cons.
Doing some of these changes by hand every time you have to deploy the website would be a tremendous waste of time, why do something manually when we can have computers do it for us!
During Development use a CSS preprocessors to build CSS faster. Both sass and lesscss can place all of your css into one file. They can also minify your css for you as well. Sass and Less also allow you to keep your css files modular which helps you build CSS faster.
Main Sass file for FrankCode.com:
Build tasks with gulp and grunt
I created a very basic example for some of the tasks that gulp can preform, it can be found at: gulp-simple (it is extremly simple). Place a site in the src folder and run some of the commands found on the read me. Keep in mind this build script isn’t for production it’s a super basic to only show how Gulp could be used in a build process.
With these changes applied we will rerun the tests to see if there has been any improvements to the load times and scores.
Some improvements to the overall performance. The first load on the site is now 1.409s, which isn’t too bad. I could improve this further with some more optimization. Repeat views of the site load 0.726s not bad as well! I still need to fix the caching of static content, but that will be another day.
The 5 easy tips to speed up your site:
- Profile your site.
- Reduce the number of http requests your pages make by combining files.
- Reduce the file sizes using minification, optimizing images, and cut out the bloat.
- Use build tools and preprocessors to automate as much of this work as you can.
- Continue to profile your site.