12 Steps to Lightning Page Speed

This increases the likelihood of a page being in the cache when a user or Google bot visits those same pages (i.e. our hit rate improves). To tune MySQL, you can use the following scripts: https://github.com/major/MySQLTuner-perl and https://github.com/mattiabasone/tuning-primer Step 5: HTTP headers Use HTTP2 server push to send resources to the page before they are requested. If it is a script: ; rel=preload; as=script, If it is a CSS file: ; rel=preload; as=style, 7 Steps to speed up the frontend The following steps are to help speed up your frontend application. I’ve noticed that every time I remove JavaScript, I see page speed improve. Step 3: Optimize your CSS You want to make sure your CSS is inline. Move your media queries to specific files so the browser doesn't have to load them before rendering the page. If you are going to use web fonts, check if you need all the glyphs defined in the font file. To learn how to to get service workers up and running on your site, visit this page. With resources (images, CSS, javascript, fonts, etc) being cached by a service worker, returning visitors will often be served much faster than if there was no worker at all. WSO is the largest online community focused on careers in finance with over 2 million visits per month.

Author: Patrick Curtis / Source: Moz

At Wall Street Oasis, we’ve noticed that every time we focus on improving our page speed, Google sends us more organic traffic. In 2018, our company’s website reached over 80 percent of our traffic from organic search. That’s 24.5 million visits. Needless to say, we are very tuned in to how we can continue to improve our user experience and keep Google happy.

We thought this article would be a great way to highlight the specific steps we take to keep our page speed lightning fast and organic traffic healthy. While this article is somewhat technical (page speed is an important and complex subject) we hope it provides website owners and developers with a framework on how to try and improve their page speed.

Quick technical background: Our website is built on top of the Drupal CMS and we are running on a server with a LAMP stack (plus Varnish and memcache). If you are not using MySQL, however, the steps and principles in this article are still relevant for other databases or a reverse proxy.

Ready? Let’s dig in.

5 Steps to speed up the backend

Before we jump into specific steps that can help you speed up your backend, it might help to review what we mean by “backend”. You can think of the backend of everything that goes into storing data, including the database itself and the servers — basically anything that helps make the website function that you don’t visually interact with. For more information on the difference between the backend vs. frontend, you read this article

Step 1: Make sure you have a Reverse Proxy configured

This is an important first step. For Wall Street Oasis (WSO), we use a reverse proxy called Varnish. It is by far the most critical and fastest layer of cache and serves the majority of the anonymous traffic (visitors logged out). Varnish caches the whole page in memory, so returning it to the visitor is lightning fast.

https://en.wikipedia.org/wiki/Reverse_proxy

Step 2: Extend the TTL of that cache

If you have a large database of content (specifically in the 10,000+ URL range) that doesn’t change very frequently, to drive the hit-rate higher on the Varnish caching layer, you can extend the time to live (TTL basically means how long before you flush the object out of the cache).

For WSO, we went all the way up to two weeks (since we were over 300,000 discussions). At any given time, only a few thousand of those forum URLs are active, so it makes sense to heavily cache the other pages. The downside to this is that when you make any sitewide, template or design changes, you have to wait two weeks for it to arrive across all URLs.

Step 3: Warm up the cache

In order to keep our cache “warm,” we have a specific process that hits all the URLs in our sitemap. This increases the likelihood of a page being in the cache when a user or Google bot visits those same pages (i.e. our hit rate improves). It also keeps Varnish full of more objects, ready to be accessed quickly.

As you can see from the chart below, the ratio of “cache hits” (green) to total hits (blue+green) is over 93 percent.

Step 4: Tune your database and focus on the slowest queries

On WSO, we use a MySQL database. Make sure you enable the slow queries report and check it at least every quarter. Check the slowest queries using EXPLAIN. Add indexes where needed and rewrite queries that can be optimized.

On WSO, we use a MySQL database. To tune MySQL, you can use the following scripts: https://github.com/major/MySQLTuner-perl and https://github.com/mattiabasone/tuning-primer

Step 5: HTTP headers

Use HTTP2 server push to send resources to the page before they are requested. Just make sure you test which ones should be pushed, first. JavaScript was a good option for us. You can read more about it here.

Here is an example of server push from our Investment Banking Interview Questions URL:

</files/advagg_js/js__rh8tGyQUC6fPazMoP4YI4X0Fze99Pspus1iL4Am3Nr4__k2v047sfief4SoufV5rlyaT9V0CevRW-VsgHZa2KUGc__TDoTqiqOgPXBrBhVJKZ4CapJRLlJ1LTahU_1ivB9XtQ.js>; rel=preload; as=script,</files/advagg_js/js__TLh0q7OGWS6tv88FccFskwgFrZI9p53uJYwc6wv-a3o__kueGth7dEBcGqUVEib_yvaCzx99rTtEVqb1UaLaylA4__TDoTqiqOgPXBrBhVJKZ4CapJRLlJ1LTahU_1ivB9XtQ.js>; rel=preload; as=script,</files/advagg_js/js__sMVR1us69-sSXhuhQWNXRyjueOEy4FQRK7nr6zzAswY__O9Dxl50YCBWD3WksvdK42k5GXABvKifJooNDTlCQgDw__TDoTqiqOgPXBrBhVJKZ4CapJRLlJ1LTahU_1ivB9XtQ.js>; rel=preload; as=script,

Be sure you’re using the correct format. If it is a script: <url>; rel=preload; as=script,

If it is a CSS file: <url>; rel=preload; as=style,

7 Steps to speed up the frontend

The following steps are to help speed up your frontend application. The front-end is the part of a website or application that the user directly interacts with. For example, this includes fonts, drop-down menus, buttons, transitions, sliders, forms, etc.