Faster page loading speed of PacoGames

Page loading speed is a very important factor that needs be treated with some seriousness. Thinking about loading speed and optimization must already be included in the web proposal, dealing it backward may be expensive. This post summarizes our experience with extra page speed optimization that would not be necessary, if we were considering page speed issue more thoroughly in our website redesign specification.

Big web redesign without optimization from web coders

PacoGames has been a simple gaming website with minimal features for many years, very similar to other gaming websites. This simplicity is something that works well, but does not bring added value for anybody - players nor game developers. We have always wanted to do more than just another gaming website, so in 2016 we started working on a big redesign of our backend as well as a client side solution of PacoGames gaming website. New design was created with a goal to allow us to bring great things to the web gaming. We went by the ideal route - focusing on things with "added value" as full backend solution UI and UX, whilst outsourced common works as e.g. coding (transfer of design from .psd format to web-based files (html, css, js) to renowned companies. This process is usually the best if the contracting authority knows and specifies all its requirements. Unfortunately, this is something we did not handle well.

With a thought that cheap solution at the beginning can be the most expensive at the end, we selected renowned, one of the most recommended company offering web coding in the Czech Republic (our based country) - SuperKoders.com. Coded template of PacoGames was delivered according to the contract on the time, functional, with a need of minimum revisions. Happy from how it looks and works we put the design live on PacoGames in January 2017. All good for next few months untill we have started thinking about possible improvements and started finding issues in the delivered templates.

Mistakes we made in specifying of our new design for web coders

• We expected that a company with many recommendations know better than we how to code a web to be effective and well optimized. Thus, we specified only how it has to look and work. PacoGames template looked and worked as we required, however we forgot the important fact - if not exactly specified, every company works by the way to deliver the optimal mix of functionality and price. When I stepped back I can mention following backlogs related received PacoGames templates:
  
  • The design was not made with a sign of focus to achieve the best page loading speed. The web templates used 1 huge shared .css file with many unused resources on most pages, with multiple fonts on a page and many javascript libraries loaded synchronously at the start of every page - even when they were not necessary. Also DOM was larger than it could be.
  • There was no feedback for our design and specification. Many things in the psd templates we sent were wrong, leading from our inexperience (too small font sizes, too low color contrast between text and background, more fonts used on a page in the psd templates and so on). If we were get a feedback of required resources for features we required, we would probably thought about their necessity on the web. With no feedback, we found out all these issues until when we feel that our website is too slow and we need deal with Page speed, Accessibility and UX web performance optimization.
• We did not received source codes of the new coded design without requesting for them. There was an initial expectation, that anytime we need an adjustment or update, we will tell it superkoders and they will make it for us. This turned out to be very impractical, especially due to the fact that we were finding tiny UX issues like wrong color contrast, small font size etc. (things which could be eliminated by consultation or feedback during coding works). These "bugs" are very simple to fix on our own, but very expensive over a 3rd company (files synchronisation, time consumption etc).
• When we were preparing the redesign, we did not care about speed and modern trends. We made another "static" website. 

Our mistakes have led to the expected problem - Our web was not optimized well. Low page speed optimization costed us users' experience from browsing and additional costs of transferred data. This we started to deal with GameArter which provided us professional and detailed page speed analysis and optimization service. First web we started deal with was our version for mobiles. - Check how they speed up it dramatically in 10 hours.

After optimizing the mobile version, we decided to let optimize also desktop version of PacoGames. Here they made more advanced optimization, including decreasing size of DOM by using more efficient style definition

PacoGames for desktop is incredibly fast now

In cooperating with GameArter we modified PacoGames for support of dynamically loaded javascript resources in a time of their need, launched optimised ads and started use multi-level caching mechanism for reduction of TTFB. Generally, every page should be now loaded in a second.