If you came from Home
I challenged myself to produce a flawless portfolio which has maximum optimization in performance, accessibility and page speed. I did the following steps to achieve the goals I had in my mind!
The web page should be eye catching
My first intention was to make a colorful webpage which surprises the visitors at first sight. I used 45 different colors to make for 45 cells. I wanted them to stay a while and look to the window for 4 or 5 seconds.
Then to interact with the page, they’ll saw a shaking hat at the top left corner and they will probably click it. The curtains will fall and the main important cells will be revealed. After that, they will know their way around and cell after cell will be checked.
There are 45 cells which show:
- The abilities and my score
- Links to my social web pages
- Links to text contents about my career and how to contact me
- Some pixels with no interaction, just to express my interests 🙂
The web page should be fast! real fast!
With the help of
Ask Google analytics and Cloudflare about why it didn’t reach the maximum of 100%! I searched everywhere to find out how to deal with
Leverage browser caching of the google analytics script and using of cookie-free domains on Cloudflare, but there weren’t standard ways to remove those errors!
Use a CDN and reduce extra effort!
To speed up your website it’s recommended to use a CDN. Cloudflare is one of the best around with extraordinary features like security and reliability. I used it and I’m very happy with the results.
Images should be optimized
As you saw, many images were used in the page, so I used some applications to achieve the highest level of image optimization in order to satisfy GTMetrix standards.
Browsers love optimized styles and scripts
Unlike us browsers love minified scripts and styles, also they love to see them at the end of the body tag not in the head!
If you want to load them at the end probably visitors will see a mess during loading of the page. To avoid that use CSS critical path and insert it to the head. It will make a nice rendering by using critical styles in the head!
If your Javascript file contains less than 100 lines, why don’t you make it inline? I Do it and it helped me with the page speed and I wrote pure javascript instead of attaching a library like jQuery!
SEO standards and metas will introduce you better to search engines and the world
here are some short lines of what I did on this score:
- I didn’t miss any important meta tags, they will present you to the world of
Internet . check yours with this helpful article about meta tags - Using H1 and P tags
- Don’t miss using 404 error page
- Use favicon
- Consider using
webmanifest file and robots.txt - Don’t use unnecessary redirects on htaccess file
Conclusion
Building this portfolio was an amazing experience for me as a web developer. I’ve learnt many interesting things on SEO and website performance upgrade. Thank you for paying attention to this post and Let me know if you want to add extra information or correct me if I was wrong about something by commenting on this post.
Have Fun 🙂