Crankit Consulting a team of three automobile enthusiasts started crankit.in.
A weekly magazine that publishes content focusing on automobile industry. Website publishes automobile news as well as technical knowledge with terminology & references. Previously we had delivered crankit its brand identity, website design, iconography. It was a collaborative project with vikcon consulting. This time they needed their page optimization to boost the speed of website
Need for speed
Team crankit is very analystic and enthusiastic about their website, They were not happy with their google page speed and pingdom test results. They needed some boost.
Page optimization Audit
We did audit of website. Homepage was taking good 2-3 seconds to load, with 10-12 javascripts, css and many uncompressed images. While designing UI / website we considered mobile users first but after all functionality completion it became quiet big website. Website’s desktop score was 16/100 and for mobile it was little better 56/100. We decided to start page optimization by cutting down extra scripts first, then building custom code for few functionalities.
Cutting down extra
Every time when user visits your page
Browser waits until all scripts are downloaded and then renders page, its a give-take relation between them. The more number of scripts page loading / delivery time extends. We need to cut that by optimizing, minimizing, omitting scripts, style sheets that are unnecessary.
We took call mutually and removed all unnecessary plugins that were taking time. We hard coded the functionality, considered conditionally loading scripts, used gzip compression to achieve this.
- We hard coded social media buttons, wp post listing widget, in post google advertises, banner announcements which removed 4 plugins.
- Gapplayer plugin was giving life to animated gif files on site. But it was only utilizing 1 gif file at the moment. We discussed with team crankit and decided to use videos instead of gif files in future to reduce one more plugin call.
- For social media icons we hard coded svg files into php and reduced 1 call to font awesome css file loading over the fold.
- With .htaccess technique, all deliverables download with gzip at visitor’s end and then get uncompressed by browser. This improved page speed score massively.
- We observed that woocommerce was loading their scripts on every page. Using conditional tags we unloaded woocommerce first and then loaded them as required on other pages.
- Wp product compare plugin was not loading its css file to website in standard way, it was also increasing 1 call unnecessary on every page. After observing its influence on important pages is null. We deactivated page. Product compare functionality is being used only in crankit selekt module, which runs good at this point without plugin active.
Images
Image content is integral part of this website. Technical drawings, hi resolution photos of cars, concepts are the things which attract visitors.
- We observed many images were not compressed. We installed / tested many plugins on image compression and activated one plugin that suites. We also compressed existing latest images that were taking time to load.
- Image thumbnail sizes : we removed unnecessary thumbnails, reduced number of thumbnails in function.php. This way it reduced almost .5 GB from storage.
- We also set a plugin to auto optimize images after being uploaded. It has limit of certain images but it keeps track of image optimization. It can be purchased in pro version for more optimization attempts
- Home page was loading 35 posts with post thumbnails, we reduced its count to 23.
overall layout
- Removed black call for action panel to top with close functionality, so user can have more space to see content. It is responsive and fetches content from a page.
- Adjusted height of blocks to compact space.
- added h-entry h- tags to articles as suggested by google web master
- Realigned columns for mobile view to show articles first then news , technical terminology.
- Removed extra padding for mobile view to reduce number of page scrolls
- Typography: Improved typography with css rules. Now no need to justify your text manually. Headings and paragraph have clear space in between. Images and ads also differ from content well. Readability is improved on phone and tablets as well.
Currently page looses points due to advertises in pages, results are as follow –
featured image from Pixabay.com