How to optimize my website better? (PageSpeed Insights) - node.js

I'm trying to optimize my website according to the recommendations from PageSpeed Insights. The link of my website is Evant. There are two recommendations that I have problem with; first is to eliminate the render blocking css. I tried to make some of them preload but it turns out the css is not loading properly when I do it, so I decided to leave all of them load synchronously. The second thing is about browser caching. I tried everything I saw online like adding a .htaccess file which I will write down later, but none of them worked.
The file directory structure :
.htaccess file :
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

What do you mean by recommendation? Something like the google lighthouse project?
For having non-blocking CSS, write the CSS of your entry module inline instead of loading it from a bundled file.
For caching the easiest solution are Service-Workers.

Related

Cache-Control + mod_expires setup at .htaccess but leverage browser cache still do not work

I've fine tuned the .htaccess file but could not make the Leveraged Browser Cache to work. GTMetrix tells me several .png and .svg images have no Expiration set.
1. Expires_module is enabled and running in Apache
2. Set Cache-Control and Enable Browser Cache are setup at the .htaccess.
The .htaccess code is below. Any advice to make browser caching work is welcome. :-)
#Set Cache-Control
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
#End Cache-Control
</FilesMatch>
#Enable browser cache
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>
#End browser cache
#Enable HSTS
you need to ensure to Enable mod_expires on CentOS and Ubuntu,
Run following command on your CentOS system to see if Apache module mod_expires is enabled or not, It should show following output if enabled, otherwise you’ll see nothing in output.
httpd -M | grep expires
Another way to verify it is via httpd.conf file, open apache configuration file in your favorite text editor application (Vi/ViM, Nano etc) and search for following line. If successfully found, then your Apache has mod_expires enabled.
LoadModule expires_module modules/mod_expires.so
For Ubuntu system, we need to use a2enmod utility to enable Apache modules, simply run following command to enable expires module on Ubuntu.
sudo a2enmod expires
Once done, we need to restart apache for this change to take effect.
sudo /etc/init.d/apache2 restart
or
sudo service apache2 restart
Then go to GTmetrics or Google PageSpeed and test your url for "Browser Leverage caching" and check if cache time is updated as per your entry in .htaccess

How to add headers to assets for cache validation?

I've been googling and testing stuff for the past couple of days but unfortunately I cant find a solution for my problem...
I am working on a Symfony 2 application that uses a Service-Worker to cache a bunch of assets. For whatever reason I can't seem to add headers like ETag or Expires to the assets for a custom cache validation.
I am using PHP's built-in Web Server, so my initial thought was to add this piece of code to the htaccess file(s)*, because the assets are served by the server. It didnt work.
* web/.htaccess, app/.htaccess, src/.htaccess
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access 1 month"
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/js "access 1 week"
ExpiresByType application/javascript "access 1 week"
</IfModule>
What am I doing wrong? Looking at the response headers, they still look the same:
Connection:close
Content-Length:6133
Content-Type:text/css; charset=UTF-8
Host:127.0.0.1:8000
Should I configure the server to handle this kind of stuff? If so, what file and what data should I use?
Looking at the php server documentation it seems that this server only returns a minimal set of http headers, unlike apache. Which means I need to switch server in order to solve my problem.

Where is .htaccess on AWS EC2 EB

I have an EC2 instance running Elastic Beanstalk. I would like to enable GZIP Compression, and I understand I need to modify my .htaccess file.
I have read that the .htaccess file is located in my root folder of the app install. However, I cannot seem to find it. (I am pretty novice and not sure where the root folder is).
I am able to ssh onto the server running Apache Tomcat 8 with a Java 8 app.
Question
Where is .htaccess located?
This is what I have in my root:
$ ls
bin cgroup etc lib local media opt root sbin srv tmp var
boot dev home lib64 lost+found mnt proc run selinux sys usr
UPDATE
I have a .ebextensions/tomcat-settings.config now that works. It enables GZip compression.
option_settings:
aws:elasticbeanstalk:environment:proxy:
GzipCompression: 'true'
ProxyServer: nginx
aws:elasticbeanstalk:environment:proxy:staticfiles:
/pub: public
This does not seem to compress .svg files though. So if possible, I would like to have the following, but not sure where to add it:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
you need to upload .htaccess file or make it in your ec2 instance on your root folder on that you upload your application, if you are using elastick beanstalk you need to add the .htaccess file to your .zip file on the root folder
How you configured the ec2 instance, by ssh or by the .ebextensions file?
if you configure the instance by ssh and you are using a elastic enviorment then the configuration will be erased when the instance is degraded or change, if you are using only one instance by ec2 the configuration keep working.
if you need to configure it by .ebextensions you need to create a folder named .ebextensions in your .zip file, inside this folder you need to create two files named enable_mod_deflate.conf and myapp.config.
The contents of enable_mod_deflate.conf:
# mod_deflate configuration
<IfModule mod_deflate.c>
# Restrict compression to these MIME types
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xml+rss
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/jpeg
# Level of compression (Highest 9 - Lowest 1)
DeflateCompressionLevel 9
# Netscape 4.x has some problems.
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
<IfModule mod_headers.c>
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>
</IfModule>
The contents of myapp.config:
container_commands:
01_setup_apache:
command: "cp .ebextensions/enable_mod_deflate.conf /etc/httpd/conf.d/enable_mod_deflate.conf"
Then you need to restart the server.

Browser cache overriding expires headers

I have a Joomla site, running on an Apache server and am having problems with Firefox and Chrome browsers caching the page and not serving the latest version.
I have added this code to my htaccess file:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 60 seconds"
# My favicon
ExpiresByType image/x-icon "access plus 1 month"
# Images
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
# CSS
ExpiresByType text/css "access plus 1 week"
# Javascript
ExpiresByType application/javascript "access plus 1 week"
</IfModule>
If I clear the browser cache in Chrome and Firefox then load the site, I get the correct response headers for images, css and javascript as per the code above.
For the main document I get these respond headers on the first load:
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Expires: Wed, 17 Aug 2005 00:00:00 GMT
Pragma: no-cache
But when I reload the page or even open it in a new tab those expires headers disappear, and the browser loads up the cached web page (with status code 304 not modified).
I'm at a loss to understand what is happening here. I'm on a mac and use Safari which doesn't have any of these issues so I'm puzzled why Chrome and Firefox don't behave the way I expect them to.
Perhaps it could be explained why the page has a different set of response headers in relation to the expires than the default in htaccess. Is this the way mod_expires works?
I hope there's enough info here to answer my query, thanks in advance.
this will help, take ref. by this link
http://php.net/manual/de/function.session-cache-limiter.php

SIte shows old pages in cache - I've reset htaccess to disable caching but it doesn't work

I'm in a pickle here. I tried to set up caching using htaccess files. I made the mistake of setting the htaccess to maintain a cache of html and text files as well. The result was that since the site is a dynamic web application the html would be always generated based upon whatever activity is taking place on the site. However it keeps showing old cache.
I removed all entries from the htaccess file concerning the caching and even deleted my local cache. However its not working. What do I do here.
What happened was that I had put in the following code in the htaccess file:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 30 days"
ExpiresByType image/gif "access plus 60 days"
ExpiresByType image/jpg "access plus 60 days"
ExpiresByType image/png "access plus 60 days"
ExpiresByType application/x-javascript "access plus 60 days"
ExpiresByType text/css "access plus 60 days"
ExpiresByType image/x-icon "access plus 360 days"
</IfModule>
The first line in the snippt was the blunder here. Because of this I could only access old cached pages even though information on the site changes drastically. I removed the entire line however it hasn't worked at all as even now after having cleared my browsers cache hundreds of times I am still seeing cached results.

Resources