We got accepted in the BizSpark program and the first thing I had in my head was to compare the performance of our web site with a version on the cloud, even though our landing page is pure html, a bit of java and optimized images, this was the result I got from GT Metrix,
so you can see from the above, that I already optimized the site to 98% on the normal hosting that we had (
http://CanadianInfoTech.com).
And when we moved the html files directly to the cloud and checked it, we got the below:-
so we have one point that is making a big issue and its "
The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:-"
so before fixing it, I wanted to move the main css & js to a CDN, checked some torurials and appeared now its a peace of cake, by doing the following:-
open your azure portal,
- select CDN, click the plus, select quick create.
- Select Otigin Type: Web App
- Select Original URL your target web site.
Be aware that there are a lot of tutorial that will tell you go and create storage, a container blob, set security, add your files, etc, that was the old method and had a lot of headache when you needed to update you files. dont use it anymore. a great video about this can be found
here.
One issue here, you can't test it directly, so if you want to go for lunch,play a game or take a break this will be a good time for it, as it will take a bit of time till the new CDN end point will start working.
So we are back, the next day, checked the end point and the site opened from it, but I did not yet update the resources to read from the end point.
So I changed all the file references to the endpoint, for example :-
to
References: if you still have a problem, this blog post was really helpful to me,
here
before doing so, I needed to make a new copy of my web site, so I have a special version for the cloud.
If my the landing page was MVC ASP.NET I prefare to make html helper or another way to let all the resources work with the cdn, but for my company main page it was simple html.
So I started to replace the paths for the images, css and the js, here VS replace tool was handy.
For the stander JQuery and other well known plugins, I preferred to leave them on there cdn domains, to utilize caching from other web sites.
Used the Azure publishing and starting testing again. I'm expecting a small enhancement as we did not fix the main issue yet. And as expected 93%, the same results, but the paths for all the resource are coming from the CDN end point, great.
This
link was really helpful, added the following to the web config:-
and the performance returned to normal, In php hosting it did not start 98%, but I updated the .htaccess file, so in IIS, the web config can do the trick.
even though that the last step was the key to enhance the performance, moving to the CDN was important.
And if you check the details this is basic comparison:-
# |
Item |
PHP Hosting |
Azure Hosting |
1 |
Page Load time |
1.52s |
1.32s |
2 |
Page size |
490Kb |
490Kb |
3 |
Number of request |
28 |
28 |
4 |
Page Speed Grade |
98% | 98% |
5 |
Y Slow Grade |
86% |
96% |
|
|
|
|
So we see a small gain of 0.20 sec. Moving that 98% higher will not be an easy task, and if I have time I will try my best to find the main issues causing them and the best fixes.
I wanted to note that on the
google developer insights I did not find a real difference between the two.
it was 89% for the desktop and 71% for the Mobil, we need to tackle these number later too.