As a developer I don't really enjoy working on front-end page speed optimizations... Those things are boring, right?
But... If you want your pages to rank well in Google it almost becomes a mandatory task that needs to be done. So... I thought I would write myself a quick cheatsheet with 8 of the most common ways to increase page speed.
May this be used as a guide on your path to reaching page speeds faster than Doc Browns Delorean. Here are 8 ways to increase your page speed, written from a feisty browsers perspective.
1. Image Sizes
Browser Says: "You're images are too fuck'n large."
Use this tool to compress them: https://tinypng.com/ or you can use a service like https://www.imgix.com/ to autocompress images on the fly.
2. Too Many Images
Browser Says: "WTF, why so many images?"
Don't load images that are not in the viewport, there's a common practice known as lazy image loading, which only loads an image image if it is visible on the page. This is commonly accomplished by adding a data-src attribute to an image and then adding a 1x1 pixel image in the src attribute.
<img src="/pixel.png" data-src="/path/to/image.png">When the user scrolls to this image you will need to write some javascript to swap the value of src with the value inside data-src.
3. Preload Requests
Browser Says: "Give me a quick heads up on any files you want me to preload,... Bitch"
View Website
View Website
View Website
If a JS or CSS file loads another external file, it will take longer for load that file. Instead you can give the browser a heads up by adding a <link preload=""> in your head element. This way the browser can preload that file.
Example: If a javascript file on your site loaded some styles dynamically by fetching a new file called ui.css
You can add the following to make that file load faster:
<head>
<link rel="preload" href="ui.css" as="style">
</head>This can also help page speed by preloading web fonts:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>Learn more here: https://developers.google.com/web/tools/lighthouse/audits/preload
4. Minification
Browser Says: "Minify your shit. I don't care what it looks like, the faster I get my content the better."
Minifying your content including HTML, CSS, and Javascript is a must. This will make your file size smaller and it will make it quicker to retrieve. Here's a quick example:
Uniminified file is slower to retrieve and parse:
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Title</h1>
<p>Some Content</p>
</body>
</html>Minified file is faster and easier to parse
<html><head><title>My Awesome Page</title></head><body><h1>Title</h1><p>Some Content</p></body></html>Minifying your HTML, CSS, and Javascript will have a significant impact on page speed.
5. Browser Caching
Browser Says: "Tell me what to save so I don't have to fuck'n fetch it with every page load."
Browser caching means that the browser will store static assets on your machine, this way it doesn't have to fetch them with every page request. When another request is made to a another page on your site the browser can just use the assets it saved from the previous request. You need to specify browser caching on your server.
If you are using Cloudflare you can choose to set the browser caching expiration inside of the Caching section of your site.
Alternatively, you can set cache headers using Apache in your .htaccess file:
# cache most static assets for one month
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>Or with NGINX you will need to specify browser cache in your /etc/nginx/sites-enabled/default virtual host file:
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 30d;
}6. Too Many External Resources
Browser Says: "This page is taking forever to load... Why do I have to call so many fuck'n external sources"
The fewer external resources your website makes the quicker it can load the page. Sometimes you just need to cut the amount of assets your page loads or you can find a way to combine similar external resources.
Quick Tip: If your CSS or JS file is pretty small you might consider injecting them into the page:
Here's a PHP example:
<style><? readfile('/path/to/style.css'); ?></style>You can also directly inject a javascript file:
<script></script>You'll have to test out injecting your CSS/JS into the page and see if it gives you a page speed boost.
7. Render Blocking Resources
Browser Says: "WTF, I constantly have to stop rendering the page to fetch more javascript files, why can't I finish loading the page and then fetch javascript files?"
When adding scripts on your page you should leverage the async attribute where possible. Simply add the async attribute to your script tag to make it non-render blocking.
Render blocking:
<script src="/path/to/script.js"></script>Non-render blocking:
<script src="/path/to/script.js" async></script>8. Too Many Dom Nodes
Browser Says: "As much as I love fetching HTML, this fuck'n page has way too many DOM nodes."
It takes longer to render pages with deep DOM elements. Try to minimize the depth of your HTML response. Rule of thumb is to try not to go more than 32 nodes deep or this could have an effect on your page speed load time.
Try and implement these tips above to make your page speed faster. This will increase your Organic SEO traffic and bring more people to your website!
Happy Optimizing ;)
There are 2 places I like to check my page speed score and ways to increase it, Google Page Speed Insights and GTMetrix.
Comments (0)