Performance and Optimization

In order to ensure my website run quickly and smoothly I took several steps to optimize the site as well as possible.

Code

As this was my first time developing a website with grid I wanted to be sure that I implemented it as efficiently as possible. To do this I first structured my homepage wireframes to the grid specification and began applying styles. My first attempt was scruffy at best and was particularly difficult to edit. To rectify this, I took the knowledge I had gained with my first attempt and began redeveloping the homepage in a much cleaner fashion with more focus on coding in such a way that it would be easier to implement design changes in future. This meant creating more reusable classes that could be used to quickly change colours and styles across the website quickly rather than having to change each element individually.

In order to reduce the size of the homepage and speed up loading times I seperated styles which are specific to project pages into another file meaning they aren’t being downloaded unnecessarily. Once the user clicks through to a project page the main styles should already be cached and the browser should only need to download the page specific styles and images.

One of the inspirations for my portfolio is my love of Netflix’s Stranger Things and 1980’s “retrowave” design. In fact the idea to create the neon-like headings on the website came from my attempt at creating the Stranger Things opening titles in CSS. To achieve this effect  I created a simple webkit keyframe animation, quickly changing the text colour to a darker shade and giving each character in the heading a different timer in order to create a realistic neon-flicker. To make the effect more convincing I then made the text-shadow disappear when the character flickers to give the illusion that there is light flickering on and off.

Optimization

The most significant impact on page size and loading times on my website is the images. To make the website more mobile friendly and reduce loading times I have optimized the images, increasing file compression as much as possible without subtracting from the perceived quality of the images on the website itself. In addition to this I have exported the images scaled to their relative max sizes on screen which drastically lowers file sizes.

Image scaling is particularly important where I have used images with transparency such as my logo as PNG graphics are typically larger in size than their JPEG equivalent. I have made any images which do not require transparency in JPEG format for this very reason.

SEO Integration

The majority of search engine optimization is dictated by the quality of the content on the website itself. I have attempted to create keyword rich content and blogs with a relevance to front end web development.

In addition to the content, as of April 2015, Google decided to “use mobile friendliness as a ranking signal”. To test whether or not my website confirms to Google’s specification of a mobile friendly website I ran their Mobile Friendly Test which confirmed the website was indeed mobile friendly.

Finally, I have included relevant metadata to my portfolio using relevant keywords and page descriptions.

Contact

Have a project in mind? Feel free to get in touch using the contact form and I'll be happy to help. Alternatively, you can email me directly at cprincewebdev@gmail.com.

profile for C Prince at Stack Overflow, Q&A for professional and enthusiast programmers

Get in touch