Søg på siderne...

.htaccess Fil - sikkerhed ? performance ⚡️ max PageSpeed

Klint WebDesign - Logo
.htaccess Fil - sikkerhed ? performance ⚡️ max PageSpeed

.htaccess Fil - der gør en forskel ?

Vidste du at en .htaccess fil, der er sat rigtigt op, kan optimere din hjemmeside utrolig meget ved at reducere størrelsen og øge PageSpeed rigtig meget.
 Jeg har set mange flotte hjemmesider, som umidelbart fungerer rigtig godt. Men alt for mange er langsomme - flere sekunder om at loade, fordi de ikke er optimeret.
Betydningen af komprimering af indhold, ETags og Expires Headers bliver ofte overset. Sikkert fordi at de ganske enkelt ikke aner, hvad .htaccess er, og hvilken forskel den kan gøre for hjemmesiden performance.
 

Her i dette blog opslag vil jeg prøve at beskrive, hvordan du kan komme videre, uden at skulle nørde alt for meget.

htaccess

.htaccess filen bruges til at konfigurere Apache HTTP serveren, som er den mest udbredte HTTP server på internettet. Den styrer den måde, som filer i mapper og undermapper tilgås og håndteres af browseren.

I starten havde jeg også svært ved at forstå, hvordan og hvor vigtigt det var tilføje flere komandoer i .htaccess filen. Men hen ad vejen fandt jeg ud af, at de enkelte komandoer havde stor betydning for hjemmesidens performance - ikke kun i sekunder ved indlæsning, men også at det hjælper browseren med at indlæse det nødvendige mest hensigtsmæssigt. Så jeg tilføjede nogle af de vigtigste komandoer step by step.

I forbindelse med at jeg skulle lave et nyt design til denne hjemmeside, valgte jeg, at jeg ville se, hvor tæt på en PageSpeed Score på 100 / 100 jeg kunne komme - og resultatet taler for sig selv 100/100 på Google PageSpeed insight, 100/100 på GTMetrix og A 100 på Pingdom. Det krævede lidt mere end hidtil - bl.a. en .htaccess fil der sparker ...

htaccess

Men hvordan kan du sætte en .htaccess rigtigt op?

Jeg har i mange år brugt Admin Tools Pro udvidelsen fra Akeeba, som er kendt i hele verden for nogle af de bedste udvidelser til Joomla! overhovedet. En af de mange funktioner som den kan, er at oprette en meget specifik .htaccess fil - den måtte jeg simpelt hen lære at få det allerbedste ud af. Apache servere har mange indstillingsmuligheder, så derfor er det altafgørende, at man kan vælger de indstillinger, som passer bedst til den enkelte host.

Hvis du ikke allerede har aktiveret den .htaccess fil, som følger med i alle Joomla! installationer, skal du starte med det - du kan se, hvordan du aktiverer .htaccess filen her. På nogle servere ligger der allerede en .htaccess fil i roden af din installation. Hvis det er tilfældet, skal du bare kopiere koden og lægge den over bunden af den .htaccess fil som følger med Joomla.

Der findes allerede mange artikler og debatter på internettet, hvor du kan læse om, hvordan .htaccess kan forbedre sikkerheden på din hjemmeside. Men her beskriver jeg punkt for punkt, hvordan du kan forbedre PageSpeed performance på din hjemmeside.

Se mere om Admin Tools Pro
  1. ETags fortæller browseren, at den kan cache (gemme) en billed-fil, så den ikke skal indlæses igen og igen. Der tilføjes min. en værdi for tid og størrelse på filen
  2. Expires headers er lidt som ETags, men kan de kan indeholde værdier pr. fil type, som fortæller browseren, hvornår lagringen skal udløbe - hvor mange dage/uger/måneder der skal gå, inden filen skal loades igen.
  3. AddOutputFilterByType DEFLATE minimerer HTML kildekoden ved at fjerne unødvendige linkeskift og mellemrum. I mange tilfælde bliver flere hundrede linjer reduceret til mellem 3 og 6.
  4. Gennetving Gzip på forskellige statiske filer sikrer, at filer som almindelig GZip ikke komprimerer, alligevel bliver komprimeret

Du kan se koderne til .htaccess nederst - her

Akeeba Admin Tools Pro er perfekt til jobbet

Alle servere er ikke sat ens op - server standarindstillinger kan variere fra host til host, så en eller flere af de anviste indstillinger kan forårsage en 500 Internal Server Error - hvid skærm. Inden du går igang, er det en god idé at åbne din FTP og downloade din nuværende .htaccess fil. Hvis du får en server fejl, kan du så bare uploade den igen.

HUSK at læse og forholde dig til hver eneste punkt, så du kan træffe de bedste valg i forhold til dine behov.

Det er grundigt beskrevet i Akeebas manual, hvis nedenstående ikke er tilstrækkeligt

Vælg Komponenter > AdminTools (Admin værktøj) og vælg så .htaccess oprettelse
 

Vaelg Komponenter AdminTools

 
Du skal ikke blive forskrækket over advarslerne, som vises øverst på siden - hvis du forholder dig til dem, skal det nok gå.

Hvis der allerede var en .htaccess fil i roden på din host, skal du kopiere koden og indsætte den i et af felterne til Brugerdefinerede .htaccess regler - som regel er i feltet til regler i bunden af filen OK

Som jeg tidligere skrev, er der også en hel del sikkerhedsmæssige indstillinger i .htaccess Maker. Hvis du er i tvivl, skal du bare vælge nej og slå Server beskyttelse fra - både Backend og Frontend, så får du en .htaccess fil, som ligner den oprindelige fra Joomla + optimering. Men det bør ikke afholde dig fra også at se på det også.
 

Server beskyttelse

 
Optimering og nyttigt

Her kan du vælge Ja til det meste - se billedet nedenfor

Omdirigér www og ikke-www adresser - her skal du bare vælge det, som du allerede foretrækker

HSTS Header (Kun for HTTPS sider) - hvis du bruger SSL / HTTPS, skal du vælge Ja - Anbefales på det kraftigste både for optimering og sikkerhed.

Deaktivér HTTP metode TRACE og TRACK (beskyt mod XST) - normalt kan du vælge Nej

Aktivér Cross-Origin Resource Sharing (CORS) - Nej, skal kun aktiveres, hvis 3. part skal kunne loade ex. et Javascript fra din side til et andet domæne

 

Bemærk at du kan vælge "Gem uden oprettelse af .htaccess" og vælge "Preview" for se at filen, inden du opretter den.
 

Optimering og nyttigt
########## Begin - Optimal default expiration time
## Note: this might cause problems and you might have to comment it out by
## placing a hash in front of this section's lines
<IfModule mod_expires.c>
    # Enable expiration control
    ExpiresActive On

    # CSS and JS expiration: 1 week after request
    ExpiresByType text/css "now plus 1 week"
    ExpiresByType application/javascript "now plus 1 week"
    ExpiresByType application/x-javascript "now plus 1 week"

    # Image files expiration: 1 month after request
    ExpiresByType image/bmp "now plus 1 month"
    ExpiresByType image/gif "now plus 1 month"
    ExpiresByType image/jpeg "now plus 1 month"
    ExpiresByType image/jp2 "now plus 1 month"
    ExpiresByType image/pipeg "now plus 1 month"
    ExpiresByType image/png "now plus 1 month"
    ExpiresByType image/svg+xml "now plus 1 month"
    ExpiresByType image/tiff "now plus 1 month"
    ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
    ExpiresByType image/x-icon "now plus 1 month"
    ExpiresByType image/ico "now plus 1 month"
    ExpiresByType image/icon "now plus 1 month"
    ExpiresByType text/ico "now plus 1 month"
    ExpiresByType application/ico "now plus 1 month"
    ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
    ExpiresByType application/vnd.wap.wbxml "now plus 1 month"
    ExpiresByType application/smil "now plus 1 month"

    # Font files expiration: 1 week after request
    ExpiresByType application/vnd.ms-fontobject "now plus 1 week"
    ExpiresByType application/x-font-ttf "now plus 1 week"
    ExpiresByType application/x-font-opentype "now plus 1 week"
    ExpiresByType application/x-font-woff "now plus 1 week"
    ExpiresByType image/svg+xml "now plus 1 week"

    # Audio files expiration: 1 month after request
    ExpiresByType audio/ogg "now plus 1 month"
    ExpiresByType application/ogg "now plus 1 month"
    ExpiresByType audio/basic "now plus 1 month"
    ExpiresByType audio/mid "now plus 1 month"
    ExpiresByType audio/midi "now plus 1 month"
    ExpiresByType audio/mpeg "now plus 1 month"
    ExpiresByType audio/mp3 "now plus 1 month"
    ExpiresByType audio/x-aiff "now plus 1 month"
    ExpiresByType audio/x-mpegurl "now plus 1 month"
    ExpiresByType audio/x-pn-realaudio "now plus 1 month"
    ExpiresByType audio/x-wav "now plus 1 month"

    # Movie files expiration: 1 month after request
    ExpiresByType application/x-shockwave-flash "now plus 1 month"
    ExpiresByType x-world/x-vrml "now plus 1 month"
    ExpiresByType video/x-msvideo "now plus 1 month"
    ExpiresByType video/mpeg "now plus 1 month"
    ExpiresByType video/mp4 "now plus 1 month"
    ExpiresByType video/quicktime "now plus 1 month"
    ExpiresByType video/x-la-asf "now plus 1 month"
    ExpiresByType video/x-ms-asf "now plus 1 month"
</IfModule>
##### Optimal default expiration time - END

########## Begin - Automatic compression of resources
# Compress text, html, javascript, css, xml, kudos to Komra.de
# May kill access to your site for old versions of Internet Explorer
# The server needs to be compiled with mod_deflate otherwise it will send HTTP 500 Error.
# mod_deflate is not available on Apache 1.x series. Can only be used with Apache 2.x server.
# AddOutputFilterByType is now deprecated by Apache. Use mod_filter in the future.
<ifmodule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript image/svg+xml
</ifmodule>
<ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_keep_workfiles No
    mod_gzip_can_negotiate Yes
    mod_gzip_add_header_count Yes
    mod_gzip_send_vary Yes
    mod_gzip_min_http 1000
    mod_gzip_minimum_file_size 300
    mod_gzip_maximum_file_size 512000
    mod_gzip_maximum_inmem_size 60000
    mod_gzip_handle_methods GET
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl|xml|rb|py|svg|scgz)$
    mod_gzip_item_include mime ^text/plain$
    mod_gzip_item_include mime ^text/xml$
    mod_gzip_item_include mime ^text/css$
    mod_gzip_item_include mime ^application/xml$
    mod_gzip_item_include mime ^application/xhtml+xml$
    mod_gzip_item_include mime ^application/rss+xml$
    mod_gzip_item_include mime ^application/javascript$
    mod_gzip_item_include mime ^application/x-javascript$
    mod_gzip_item_include mime ^image/svg+xml$
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include handler ^server-status$
    mod_gzip_item_include handler ^server-info$
    mod_gzip_item_include handler ^application/x-httpd-php
    mod_gzip_item_exclude mime ^image/.*
</ifmodule>
##### Automatic compression of resources -- END
## Force GZip compression for mangled Accept-Encoding headers
<IfModule mod_setenvif.c>
    
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
   
</IfModule>
########## Begin - ETag Optimization
## This rule will create an ETag for files based only on the modification
## timestamp and their size. This works wonders if you are using rsync'ed
## servers, where the inode number of identical files differs.
## Note: It may cause problems on your server and you may need to remove it
## Send ETag (selected method: sizetime)
FileETag MTime Size
########## End - ETag Optimization
 

Bedste resultat på Pingdom, GTMetrix og PageSpeed Insight

Vi har lavet en ny hjemmeside, som er optimeret bedst muligt for hurtig visning, som er med til at få en bedre placering på Google. De fleste hjemmesider kan optimeres, så de vises meget hurtigere. Derfor har Google besluttet, at PageSpeed fremover skal vægte meget mere i forhold til at opnå en bedre placering på Google. Vi tester primært hastighed på GTMetrix - Performance Test, og på Pindom - website speed test.


GTMetrix PageSpeed 100 / 100 
Pingdom test A100 98 Klint WebDesign


Det bedste framework - Vertex, fra Shape5

Vi bruger det professionelle framework Vertex fra Shape5, fordi det lever op til såvel Joomlas som Googles "Best Practice" - og så er det let at arbejde med. Hvis du selv vil bestille en Template - Joomla eller WordPress, er du velkommen til at kontakte til os her...