Streaming live at 10am (PST)

[Optimization] Tips and tricks


#1

Hey!

I'd like to share with you some optimization tricks for your website smile We'll start with .htaccess file

.htaccess

AddDefaultCharset utf-8

RewriteEngine On
#Rewrite non-www to www
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

#Tell where to look for the index file
DirectoryIndex index.php index.html index.htm
Options -Indexes

#Error documents list
ErrorDocument 404 /404.php

#compress text, html, js, css, xml
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php

<IfModule mod_expires.c>
Header set cache-control: public
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType	text/html				"access plus 1 hour"
ExpiresByType	application/rss+xml		"access plus 1 hour"
ExpiresByType	application/x-httpd-php		"access plus 1 hour"
ExpiresByType	text/css					"access plus 7 days"
ExpiresByType	text/javascript		"access plus 7 days"
ExpiresByType	application/javascript			"access plus 7 days"
ExpiresByType	image/png				"access plus 1 month"
ExpiresByType	image/jpg				"access plus 1 month"
ExpiresByType	image/jpeg				"access plus 1 month"
ExpiresByType	video/ogg				"access plus 1 month"
ExpiresByType	audio/ogg				"access plus 1 month"
ExpiresByType	video/mp4				"access plus 1 month"
ExpiresByType	image/x-icon			"access plus 1 year"
ExpiresByType	font/ttf				"access plus 1 year"
ExpiresByType	font/otf				"access plus 1 year"
ExpiresByType	image/svg+xml			"access plus 1 year"
</IfModule>

Starting from the beginning...

AddDefaultCharset utf-8 will add a information to the header that the website will use UTF-8 character coding.

RewriteEngine On
#Rewrite non-www to www
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

When user or bot will go to domain.com it will be redirected to www.domain.com. That will lead to NOT getting duplicated content of your website. It's best if Google will index only www. page rather than both non-www and www wink

#Tell where to look for the index file
DirectoryIndex index.php index.html index.htm
Options -Indexes

As the comment says, it will tell the browser where to look for index files. You can change index.php to imtotallyawesome.html and when user go to yourdomain.com it will show iamtotallyawesome.html page as a index file smile

#Error documents list
ErrorDocument 404 /404.php

Well... 404 error pages with white background and black letters always drives me crazy. Why not to give our beloved users error pages they will enjoy somehow? You can check my website www.bartekkustra.eu/thispagedoesntexist to see what I mean.

#compress text, html, js, css, xml
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php

Nothing optimize better than some good-old compression, huh? This few lines will add gzip compression to html, js, css, xml and all the other files with some exclusion when it's not supported.

<IfModule mod_expires.c>
	Header set cache-control: public
	ExpiresActive on
	ExpiresDefault "access plus 1 month"
	ExpiresByType	text/html				"access plus 1 hour"
	ExpiresByType	application/rss+xml		"access plus 1 hour"
	ExpiresByType	application/x-httpd-php		"access plus 1 hour"
	ExpiresByType	text/css					"access plus 7 days"
	ExpiresByType	text/javascript		"access plus 7 days"
	ExpiresByType	application/javascript			"access plus 7 days"
	ExpiresByType	image/png				"access plus 1 month"
	ExpiresByType	image/jpg				"access plus 1 month"
	ExpiresByType	image/jpeg				"access plus 1 month"
	ExpiresByType	video/ogg				"access plus 1 month"
	ExpiresByType	audio/ogg				"access plus 1 month"
	ExpiresByType	video/mp4				"access plus 1 month"
	ExpiresByType	image/x-icon			"access plus 1 year"
	ExpiresByType	font/ttf				"access plus 1 year"
	ExpiresByType	font/otf				"access plus 1 year"
	ExpiresByType	image/svg+xml			"access plus 1 year"
</IfModule>

And the last thing - header cache-control. It tells the browser how long will it hold files used on this site, and how long are they valid. There are many techniques I was told to use, but few of them simply caused me more problems than helped. This is my htaccess base file and I hope you will use it well.


You tought this is the end? Naaah! This is just the beginning. In my [Library] topic I've mentioned sites like Google Pagespeed Insights and Pingdom to test your website. It is wise to use them to understand what's going on over there. There are few tricks those sites gave a hint to.

PNG Compression tinypng.org compress your png files. It saves your and your visitors bandwith and speed up page load.

CSS Sprites spritepad.wearekiss.com reduce requests from server and speeds up page load. It also saves a little from bandwith since there are less files to be downloaded and they can be AGAIN compressed using eg. tinypng.org wink

It is always wise to set encoding (like utf-8) in <head> before <title>. You can use PHP to do that.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php header('Content-type: text/html; charset=UTF-8'); ?>
	<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
	<!--[if lt IE 9]>
		<script src="dist/html5shiv.js"></script>
	<![endif]-->
	<title>My awesome site title</title>

You can also add a simple <?php flush(); ?> between </head> and <body> tags if you are using any PHP scripts inside your document. They will render in the same time your static content does.

Always load CSS files before JavaScript.

You can always compress files by removing spaces and newlines. There are plenty of compressors over the internet.


That's it for now. If I ever get into anything new, I'll post it here. You can also leave a comment and your advices on how to improve your website here! Let's make a good library here wink

~Bartek


Speeding up your Webflow Site
Option to remove URL extensions on export (.html)
Possibility to sort sites
#2

Thanks Bartek for the suggestions! We will add this to our feature list of optimizations for our user's sites.


Speeding up your Webflow Site
Automatic Optimization of Images (Size, Dimension)
Possibility to sort sites
#3

This topic was automatically closed after 60 minutes. New replies are no longer allowed.