Making YounginWP.com

There are many things that need to come together in order to make a website good. Below are some of the things I did to make the YounginWP.com website better.

Speed

Studies show that 40% of visitors will leave your website if the loading process takes more than 3 seconds. Because of these stats, I felt that my main focus for the website should be speed.

Now WordPress, as awesome as it is, is really not that fast. So for the main page of YounginWP I coded up my own HTML, CSS, and JS page. Using tools like Pingdom and Google PageSpeed Insights, I was able to target the slow parts of the website and speed them up.

Below is a before/after comparison of the YounginWP.com webpage test on Pingdom.

As you can see, huge improvements across the board.

So here is what I found out as I was doing this. Compress and combine EVERYTHING. If you have three CSS files linking to the page, combine them into one. If you have a background image, compress it to its max. Every kB can slow down your website. That is why I went for a HTML landing page, to get you on the website as fast as possible.

Now as for the WordPress side of the website, that involved installing a cache plugin. I went with WP Fastest Cache as it is lightweight and super easy to setup. I played around with the settings and kept doing tests until I found the configuration that worked best for me. I also tried to minimize requests on each page by disabling plugins that were slowing it down and finding alternatives.

I must say that I am quite pleased with the final speed result of YounginWP.com.

Responsive

Next up was responsiveness. Responsiveness is important to reach a wider audience that use all different devices. Below is the final responsiveness results of YounginWP.com.

Home Page

What’s Up Page

To test the pages responsiveness, I used the built in Firefox Responsiveness Design Tool. This is a great feature in Firefox that I wish I had discovered a long while ago.

For the landing page responsiveness I made it have zero scrolling. This gives the webpage a much cleaner feel. Also thanks to some @media (min-device-width: ) CSS, I was able to resize the text to make it perfectly fit on all screens.

Lastly, for the WordPress part of the website, I picked a simple theme that is fully responsive and looks similar to that of the home page. It did require me to make a child theme and edit out some stuff, but in the end it turned out to be the perfect theme.

Configurations

The third and final thing I encountered while making this website was configuring a WordPress and HTML site to work together as one. This involved me reading through some Codex articles until I figured out what I needed to do. Turns out just changing the URL in the WordPress settings, and organizing the files in the back-end properly was all I needed to do.

Now I am not going to list all the big and small things I needed to do to make the website work smoothly, although I will say this. Google and the WordPress.org documentation are your friends when creating WordPress websites. Even me, who has made countless websites in my four years of using WordPress still can’t live without using online documentation.

Conclusion

In the end, YounginWP.com turned out to be a fun and mostly useless project. I learned a lot from designing and developing it. Hopefully I get to do some more fun projects on YounginWP.com later on. Maybe I will try and combine it more with my blog. Or make a fun client portal or something on it. We shall see!

Matthew

Leave a Reply

Your email address will not be published. Required fields are marked *